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

 /* tile colouring */
 /* odd squares */
#grid div:nth-child(n + 10) {
    background: rgb(221, 221, 221);
}

/* even squares */
#grid div:nth-child(2n + 10) {
    background: rgb(170, 170, 170);
}

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