@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
*{
    padding: 0;
    margin: 0;
    
}

.body{
    background: url("../img/bg.jpg"); 
    min-height: 100vh;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;


}

#scoreBox{
    position: absolute;
    top: 9px;
    right: 200px;
    font-size: 39px;
    font-weight: bold;
    font-family: 'New Tegomin', serif;
    color: aliceblue;
}

#hiscoreBox{
    position: absolute;
    top: 59px;
    right: 140px;
    font-size: 39px;
    font-weight: bold;
    font-family: 'New Tegomin', serif;
}

#board{
    background-color: transparent;
    width: 90vmin;
    height: 92vmin;
    border: 2px solid black;
    display: grid;
    grid-template-rows: repeat(18, 1fr);
    grid-template-columns: repeat(18, 1fr);
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
}

@media screen and (max-width: 768px) {
    #board{
        height: 70vmin;
    }
}

@media screen and (max-width: 576px) {
    #board{
        height: 50vmin;
    }
}

.head{
    background: linear-gradient(rgb(255, 2, 2), rgb(165, 120, 24));
    border: 2px solid rgb(34, 4, 34); 
    transform: scale(1.02);
    border-radius: 9px;
    box-shadow: rgba(12, 190, 86, 0.4) 0px 5px, rgba(81, 10, 212, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(17, 199, 86, 0.1) 0px 20px, rgba(216, 51, 10, 0.05) 0px 25px;
}

.snake{
    background-color: purple;
    border: .25vmin solid white;
    border-radius: 12px;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
}

.food{
    background: linear-gradient(rgb(226, 184, 15), rgb(145, 61, 145));
    border: .25vmin solid black;
    border-radius: 8px;
}


@media only screen and (max-width: 280px) {
    #scoreBox {
      font-size: 7vw;
      top: 3%;
      right: 2%;
    }
    
    #hiscoreBox {
      font-size: 7vw;
      top: 10%;
      right: 2%;
    }
    
    #board {
      width: 70%;
      height: 70%;
      max-width: 300px;
      max-height: 300px;
    }
  }