/* css basics     
Content: The actual image or text.

Padding: Space inside the box (between the text and the border).

Border: The frame around the box.

Margin: Space outside the box (pushing other boxes away).


     */
body 
{
display:flex;
flex-direction: column;
align-items:center;
justify-content: center;
height: 100vh;
margin:0;
}











.btns {
    width: 100px; /* Makes the button wider */
    height: 100px; /* Makes the button taller */
    font-size: 24px; /* If you ever use text instead of images */
    cursor: pointer; /* Changes the mouse pointer to a hand on hover */
    /* These three lines keep your X and O images centered and fitting perfectly */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#box {
    height: 50vh;
    aspect-ratio: 1 / 1;
    line-height: 0;
}

#game-over-screen {
    display: none; /* Hidden initially */
    position: fixed; /* Detaches it from the flex column layout flow */
    top: 0;
    left: 0;
    width: 100vw; /* Forces it to fill 100% of the viewport width */
    height: 100vh; /* Forces it to fill 100% of the viewport height */
    z-index: 999; /* Places it directly on top of the game board grid */
    background-color: blue;
    color: white;
    font-size: 50px;
    text-align: center;
    line-height: 100vh; /* Changing this to 100vh centers your text perfectly top-to-bottom! */
}


#startMenu {
    display: block;
}