@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');
*{
    padding: 0;
    margin: 0;
}
.body{
    background: url("https://images.squarespace-cdn.com/content/v1/581c7ae0e4fcb5a092598bd2/1479990675626-0VV2PUEXJYP3QOWTW5D8/Snake_Pass_Level_Concept.jpg");
    min-height: 100vh;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
#scoreCount{
    position: absolute;
    top : 9px;
    left :1000px;
    font-size: 30px;
    color: rgb(128, 71, 30);
    font-family: 'Rubik Glitch', cursive;

}
#HighscoreCount{
    font-family: 'Rubik Glitch', cursive;
    position: absolute;
    top : 50px;
    left :1000px;
    color: #cc0000;

    font-size: 30px;
   

}

#board{
    background: linear-gradient(rgba(0, 128, 0, 0.42),rgba(255, 255, 0, 0.58));
    width: 90vmin;
    height: 92vmin;
    border-radius: 10px;
     border: 2px solid rgba(75, 30, 17, 0.932); 
     /* box-shadow: 10px 10px rgb(16, 68, 16); */
    display: grid;
    grid-template-rows:repeat(18,1fr) ;
    grid-template-columns: repeat(18,1fr);

}
.head{
    background-color: black;
    border-radius: 25em;
    /* border: 2px solid black; */

}
.snake{
    background-color: purple;
    border-radius:20%;
    

}
.food{
    background: url("../apple.png");
    background-size: contain; 
    background-origin: border-box;
    background-repeat: no-repeat;
    background-position: center;

    /* border-radius: 30%; */
    /* border: 1px solid black; */
}