.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates a 3x3 grid */
    gap: 10px; /* Space between cells */
    margin: 20px auto; /* Centering the grid */
    max-width: 300px; /* Restricting the maximum width of the grid */
}

.cell {
    background-color: #fff;
    border: 2px solid #333;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    aspect-ratio: 1 / 1; /* Ensures that cells are square */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px; /* Set a fixed height for better visual */
    color: #444; /* Default text color */
}

.cell.red { color: red; }
.cell.blue { color: blue; }

.cell:hover {
    background-color: #eaeaea; /* Hover effect for cells */
}

#resultDisplay{
    font-size: 24px;
    margin: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.game-play-area h2 {
    text-align: center;
}

#difficultySelection {
    text-align: center;
}

#restartButton {
    display: block;
    margin-bottom: ;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    margin: 0 auto 100px auto;
}