* {
    background-color: rgb(51, 51, 51);
    
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header h1 {
    font-size: 3rem;
    color: #E9EDCC;
    padding: 0;
    border-bottom: black solid 10px;
    font-family: 'Silkscreen', sans-serif;
}

#board {
    margin-top: 20px;
    width: 100%; /* Make the board take up the full width of the container */
    max-width:500px;
    aspect-ratio: 1; /* Maintain a 1:1 aspect ratio for the board */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: solid black 20px;
}

.box {
    border: solid black 1px;
    z-index:1;
}

.even {
    background-color: #E9EDCC;
    transition-duration: 50ms;
}

.odd {
    background-color: #779954;
    transition-duration: 50ms;
}

.won {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 3rem;
}

#pa {
    text-decoration: none;
    color: #ffffff;
}

/* Media query for smaller screens */
@media (max-width: 600px) {
    #board {
        max-width: 100%; /* Allow the board to take up the full width on smaller screens */
    }
}
.odd:hover
{
    background-color: #a6bd82;
}
.even:hover
{
    background-color: #f3eec6;
}
.Play
{
    font-family: 'Titan One', sans-serif;
     text-shadow: 2px 2px #000000;
    font-size: 2.5rem;
    color:#E9EDCC;
    background-color: #779954;
    grid-column: 1/9;
    grid-row:3/4;
    transition-duration: 500ms;
    z-index:2;

}
.victoryScreen
{
    font-family: 'Silkscreen', sans-serif;
    text-shadow: 2px 2px #000000;
    font-size: 2.5rem;
    color:#E9EDCC;
    background-color: #779954;
    grid-column: 1/9;
    grid-row:3/4;
    transition-duration: 500ms;
    text-align: center; /* Center the text */
}
.About
{
    font-family: 'Titan One', sans-serif;
    text-shadow: 2px 2px #000000;
    font-size: 2.5rem;
    color:#E9EDCC;
    background-color: #779954;
    grid-column: 1/9;
    grid-row:6/7;
    transition-duration: 500ms;
    z-index:2;

}
.Play:hover
{
    background-color: #a6bd82;
}
.About:hover
{
    background-color: #a6bd82;
}