#grid {
    background-color: black;
    width: 480px;
    height: 480px;
    grid-template: repeat(15, 30px) / repeat(15, 30px);
    gap: 2px;
    padding: 2px 0 0 2px;
    border: 3px solid black;
}
.tile {
    background-color: gray;
}
.snake {
    background-color: green;
}
.head {
    background-color: rgb(10, 178, 10);
}
#fruit {
    background-color: red;
}
#grid, #score, #pause, #replay {
    display: none;
}
button {
    width: 150px;
    height: 50px;
    font-size: x-large;
    border-radius: 30px;
    cursor: pointer;
}
#speed {
    font-size: larger;
}
@media screen and (max-width: 500px) {
    #grid {
        width: 90%;
        grid-template: repeat(15, 6%) / repeat(15, 6%);
    }
}