* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    position: relative;
    background: url(bg.jpg);
    min-height: 100vh;
    height: fit-content;
    background-size: 100vw 100vh;

}

.grid{
    background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
    position: absolute;
    top: 4%;
    left: 20%;
    width: 90vmin;
    height: 92vmin;
    border: 2px solid black;
    display: grid;
    grid-template-rows: repeat(18, 1fr);
    grid-template-columns: repeat(18, 1fr);
}

.currrentScore {
    position: absolute;
    top: 10%;
    left: 72%;
    font-size: 3.3vw;
}
.highestScore {
    position: absolute;
    top: 20%;
    left: 72%;
    font-size: 3.3vw;
}

.head{
    background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129));
    border: 2px solid rgb(34, 4, 34);
    transform: scale(1.02);
    border-radius: 9px;
}
.tail {
    background-color: purple;
    border: .25vmin solid white;
    border-radius: 12px;
}
.food{
    background: linear-gradient(red, purple);
    border: .25vmin solid black;
    border-radius: 8px;
}

@media (max-width: 817px) {
    .grid{
        width: 70vmin;
        height: 80vmin;
    }
}