body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* height: 100vh; */
    margin: 0; 
    height: 100%; 
    overflow: hidden;
    margin-bottom: 2vmin;
}

#grid {
    display: grid;
    grid-template-columns: repeat(4, 17vmin); 
    grid-template-rows: repeat(4, 17vmin);
    gap: 2vmin; 
    width: fit-content;
    height: fit-content;
    position: relative;
    padding: 3vmin;
    margin-bottom: auto;
}

.cell {
    background-color: papayawhip; 
    border-radius: 1.2vmin;
    display: flex;
    justify-content: center; 
    align-items: center; 
    font-size: 20px; 
}

.tile {
    --x: 0;
    --y: 0;
    border-radius: 1.2vmin;
    font-size: 7vmin;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 17vmin;
    height: 17vmin;
    top: calc(var(--y) * (17vmin + 2vmin) + 3vmin);
    left: calc(var(--x) * (17vmin + 2vmin) + 3vmin);
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    font-style: normal;
    color: aliceblue;
    animation: new 200ms ease; 
    transition: 800ms ease-in-out;
}

@keyframes new {
    0% {
      opacity: .3;
      transform: scale(0);
    }
}

@keyframes gameover {
    from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
}

.container{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 5vh;
    margin-bottom: 1vh;
}

#background {
    position: absolute;
    width: 100%; 
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    animation: gameover 0.5s ease-in-out; 
    background-color: rgba(255, 248, 200, 0.8); 
    z-index: 999; 
}

#game-message {
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    font-style: normal;
    animation: new 500ms ease-in-out;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8vmin;
    color: rgb(107, 80, 54);
    z-index: 999; 
}

#score-container {
    width: 30vmin; 
    height: 8vmin; 
    background-color: rgb(152, 136, 13); 
    border-radius: 1vmin; 
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10vmin;
    left: 7vmin;
    /* position: relative; */
    display: flex;
    margin-right: 5vw
}

#score {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4vmin;
    /* position: relative; */
    top: 11.6vmin;
    left: 13.4vmin;
    color:#ffffff;
    display: flex;
}

button {
    /* display: flex; */
    background-color: rgba(228, 75, 85, 0.8); 
    /* margin-top: 10vmin;  */
    /* position: relative; */
    top: 10vmin;
    left: 10vmin;
    border-radius: 6ch;
    border: 0.1vmin solid rgba(228, 75, 85, 0.8); 
    color: rgb(249, 244, 244);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3vmin;
    width: 20vmin; 
    height: 8vmin;
    cursor: pointer;
    outline: none; 
}