/* Set up the body to center content and make it full screen */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    flex-direction: column;
    background-color: #121212; /* Dark mode background color */
    color: #ffffff; /* Light text color for contrast */
}

/* Board setup: full screen width with maximum size limit */
#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 90vmin;   /* Uses viewport minimum to keep it square */
    height: 90vmin;
    max-width: 90vmin;
    max-height: 90vmin;
    gap: 5px;
}

/* Cell setup: adjusts font size and fills its parent container */
.cell {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vmin; /* Larger font size for cell symbols */
    cursor: pointer;
    background-color: #333333; /* Darker cell background */
    border: 2px solid #ffffff; /* Light border color for contrast */
    color: #ffffff; /* Light text color for cell symbols */
}

.cell:hover {
    background-color: #444444; /* Slightly lighter hover color */
}

/* Message styling below the board */
#message {
    margin-top: 10px;
    text-align: center;
    font-size: 5vmin;
    color: #ffffff; /* Light text color for contrast */
}

/* Reset button with responsive sizing */
#resetButton {
    margin-top: 10px;
    padding: 5px 15px;
    font-size: 4vmin;
    max-width: 200px;
    background-color: #333333; /* Darker button background */
    color: #ffffff; /* Light text color for contrast */
    border: 2px solid #ffffff; /* Light border color for contrast */
}