body {
    font-family: "Blackadder ITC", sans-serif;
    background-color: blanchedalmond;
    line-height: 0.3;
}

.title {
    display: inline;
    text-align: center;
    font-size: 7vh;
}

.turn {
    font-size: 3vh;
    text-align: center;
    white-space: nowrap;
}



.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-content: center;
    align-content: center;
    gap:0;
    margin: 5vh 33vw 5vh 33vw ;
}

.board div{
    border: 2px solid black;
    aspect-ratio: 1/1;
    place-content: center;
    text-align: center;
    user-select: none;
    font-size: 15vh;
    font-family: "Inter Semi Bold", sans-serif ;
}

.board div:hover{
    background-color: azure;
}

/*reformat the board to look like tic tac toe*/
.board div:nth-child(1), .board div:nth-child(2), .board div:nth-child(3) {
    border-top: none;
}
.board div:nth-child(1), .board div:nth-child(4),.board div:nth-child(7) {
    border-left: none;
}
.board div:nth-child(3), .board div:nth-child(6), .board div:nth-child(9) {
    border-right: none;
}
.board div:nth-child(7), .board div:nth-child(8), .board div:nth-child(9) {
    border-bottom: none;
}

.restart {
    display: none;
    justify-content: center;


}

.restart button {
    /* ChatGPT styling*/
    padding: 10px 20px; /* Add some padding for a nice button look */
    font-size: 1.5rem; /* Adjust font size */
    background-color: rgba(73, 166, 77, 0.77); /* Green background */
    color: white; /* White text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Show pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    transition: transform 0.2s ease; /* Optional: hover effect */

}
.restart button:hover {
    transform: scale(1.05); /* Optional: Slightly enlarge on hover */
}