/*
 * Define a 9x9 grid of cells of size 4rem x 4rem.
 * Set default font size and background color of cells.
 */
h1 {
    font-size: 2rem;
    font-weight: 800;
}

#grid {
    width: 36rem;
    display: grid;
    grid-template-columns: repeat(9, 4rem);
    grid-template-rows: repeat(9, 4rem);
    font-size: 2.5rem;
    background-color: rgb(252, 249, 229);
}

/* 
 * Ensure that each cell's content is centered, 
 * both horizontally and vertically.
 */
#grid>div {
    display: grid;
    align-items: center;
    justify-items: center;
}

#grid>div:nth-child(odd) {
    background-color: rgb(221, 221, 221);
    opacity: 0.9;
}

#grid>div:nth-child(even) {
    background-color: rgb(170, 170, 170);
    opacity: 0.9;
}

#grid>div:nth-child(-n+10) {
    background-color: rgb(252, 249, 229);
    opacity: 0.9;
    font-size: 1.5rem;
    color: rgb(173, 216, 230);
}

#grid>div:nth-child(9n+1) {
    background-color: rgb(252, 249, 229);
    opacity: 0.9;
    font-size: 1.5rem;
    color: rgb(173, 216, 230);
}


/*
 * Colors/Sizes to Use
 *
 * default background color --> rgb(252, 249, 229)
 * playing area background colors:
 *     light squares        --> rgb(170, 170, 170)
 *     dark squares         --> rgb(221, 221, 221)
 * grid labels
 *     text color           --> lightblue, or rgb(173, 216, 230)
 *     font-size            --> 1.5rem
 */