h1 {
    text-align: center;
    color: black; /* Adjusting header color to match the theme */
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 2px;
    width: 306px;
    margin: 0 auto;
}

/* Specific styles for X and O */
.cell.X {
    color: white; /* White color inside the letter */
    font-family: 'Aptos', sans-serif; /* Changed font to Arial */
    -webkit-text-stroke: 2px #00f; /* Blue border around the letters */
    text-shadow: 
        0 0 10px #00f, 
        0 0 20px #00f, 
        0 0 30px #00f, 
        0 0 40px #00f, 
        0 0 50px #00f,
        0 0 60px #00f, 
        0 0 70px #00f; /* Blue neon glow effect */
}

.cell.O {
    color: white; /* White color inside the letter */
    font-family: 'Aptos', sans-serif; /* Changed font to Arial */
    -webkit-text-stroke: 2px #f00; /* Red border around the letters */
    text-shadow: 
        0 0 10px #f00, 
        0 0 20px #f00, 
        0 0 30px #f00, 
        0 0 40px #f00, 
        0 0 50px #f00,
        0 0 60px #f00, 
        0 0 70px #f00; /* Red neon glow effect */
}

.cell {
    background-color: #000000a2; /* Black background to enhance neon effect */
    border: 1px solid #000; /* Black border for the cell */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    cursor: pointer;
    color: white; /* White text color inside the cell */
    font-family: 'Arial', sans-serif;
    font-size: 3em;
    text-shadow: 0 0 10px; /* Neon glow effect */
    box-shadow: 0 0 20px; /* Neon glow effect */
    transition: background-color 0.3s ease;
}

.cell:hover {
    background-color: #33333388; 
}

#status {
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.5em;
    color: black; /* Adjusting status text color to match the theme */
}

button#restart-button {
    display: flex;
    margin: 20px auto;
    padding: 10px 20px; /* Adding padding for better touch target */
    font-size: 1em; /* Adjusting font size */
    background-color: #000; /* Black background to enhance neon effect */
    color: white; /* White text color */
    border: 1px solid #fff; /* White border */
    cursor: pointer;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff; /* Neon glow effect */
    box-shadow: 0 0 20px #fff; /* Neon glow effect */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

button#restart-button:hover {
    background-color: #333; 
    color: #fff;
}