body {
    display: inline-block;
    width: 90%;
    height: 90%;
    background-color: black;
}

main {
    position: relative;
    display: inline-block;
    width: 500px;
    height: 500px;
    background-color: rgb(147, 107, 92);
    margin-left: 320px;
    border-radius: 5px;
}

h1{
    text-align: center;
    color: rgb(158, 231, 158);
}

:is(.snake, img) {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 20px;
}

img {
    background-color: rgb(147, 107, 92);
}

.snake {
    background-color: rgb(158, 231, 158);
    
}

.hidden {
    opacity: 0;
}

#game-over{
    position:absolute;
    top: 175px;
    left: 10px;
    display: inline-block;
    width: 500px;
    height: 500px;
    margin: 50px;
    padding: 20px;
    background-color:  rgb(158, 231, 158);
    opacity: 85%;
    color: rgb(0, 0, 0);
    z-index: 2;
    font-family: Font-fil-a;
    text-align: center;
    transform: scale(0%);
    animation: onload 2s;
    animation-fill-mode: forwards;
    margin-left: 370px;
}

#game-over::after {
    font-size: 50px;
    content: "Game Over";
}

@keyframes onload {
    100% {
        transform: scale(100%);
    }
}

#cancel-button {
    position: absolute;
    top: 5%;
    right: 5%;
    background-color: rgb(158, 231, 158);
    color: black;
    font-size: 30px;
    border: none;
}

#cancel-button::after {
    content: "X";
}

#create-button {
    border: none;
    background-color: black;
}

#score{
    position: relative;
    top: -550px;
    font-size: 30px;
    margin-left: 60px;
    color:white;
}

footer{
    margin-left: -55px;
    color:white;
}