*{
    padding: 0;
    margin: 0;
}

.body{
    background: url(../img/d.png);
    min-height: 100vh;
    background-size: 109vw 100vh;

    display: flex;
    justify-content: center;
    align-items: center;  /*sare items ab center aenge*/
}

#board{
    background: linear-gradient(#3ee9d8f7, #e24bfd);
    height: 92vmin;
    width: 90vmin;

    border: 4px solid black;

    display: grid;
    grid-template-rows: repeat(18, 1fr);
    grid-template-columns: repeat(18, 1fr);
}
.head{
    background: linear-gradient(red, black);
    border: 2px solid rgb(0, 0, 0);
    border-radius: 35%;
    width: 100%;
    height: 100%;
}
.snake {
    background: linear-gradient(brown, rgba(211, 11, 4, 0.753));
    background-size: cover;
    border: 0.25vmin solid rgb(14, 5, 0) ;
    border-radius: 35%;
    width: 100%;
    height: 100%;
}
.food{
    background: linear-gradient(#FF5722, white);
    border: 0.25vmin solid black;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

#scoreBox {
    position: absolute;
    top: 20px;
    left: 85%;
    transform: translateX(-50%);
    font-size: 30px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgb(238, 10, 10);
}

#highscoreBox {
    position: absolute;
    top: 60px;
    left: 85%;
    transform: translateX(-50%);
    font-size: 26px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgb(29, 6, 231);
}