@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&family=Roboto:wght@300&family=Tilt+Prism&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:url('snake.webp');
    background-size:100vw 100vh;
}
#scoreBox{
    position:absolute;
    font-family: 'Tilt Prism', cursive;
    top :40vh;
    left:5vw;
    font-size:40px;
    color:white;
    /* color:rgb(248, 8, 8); */
    /* border:2px dotted red; */
}
#hiscoreBox{
    position:absolute;
    font-family: 'Tilt Prism', cursive;
    top :32vh;
    left:5vw;
    font-size:35px;
    color:red;
}
#board{
background-color:rgb(121, 158, 57);
/* background:linear-gradient(rgb(96, 216, 26), rgb(243, 243, 76));  */
display:flex;
align-items:center;
width:90vmin;
height:81vmin;
border:2px solid rgb(129, 177, 57);
display:grid;
grid-template-rows:repeat(18,1fr);
grid-template-columns:repeat(18,1fr);


}
.head{
    
    width:24px;
    height:24px;
    border-radius:5px;
   background:linear-gradient(rgb(250, 5, 5),rgb(250, 164, 5));
   border:1px solid rgb(241, 3, 3);
}
.food{
    background:linear-gradient(purple,rgb(244, 8, 47));
    width:20px;
    height:20px;
    border-radius:2px;
    
}
.snake{
    background:linear-gradient(rgb(233, 10, 10),rgb(250, 250, 2));
    width:20px;
    height:20px;
    border-radius:5px;
}