/*
 * Define a 9x9 grid of cells of size 4rem x 4rem.
 * Set default font size and background color of cells.
 */
#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;
}

/*
 * 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
 */

/* I sure am glad that I can prioritize certain rules. */
#grid > div:nth-child(2n+1) {
    background-color: rgb(221, 221, 221);
}
#grid > div:nth-child(2n) {
    background-color: rgb(170, 170, 170);
}
#grid > div:nth-child(9n+1) {
    background-color: rgb(252, 249, 229);
    color: lightblue;
    font-size: 1.5rem;
}
#grid > div:nth-child(-n+9) {
    background-color: rgb(252, 249, 229);
    color: lightblue;
    font-size: 1.5rem;
}