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

/* Change background color  */
div:nth-child(odd) {
    color: black;
    background-color: rgb(170, 170, 170);
}

div:nth-child(even) {
    color: black;
    background-color: rgb(221, 221, 221);
}

/* Style first  column and first row  */
div:nth-child(9n-8), div:nth-child(-n+9) { 
    background-color:  rgb(252, 249, 229);
    font-size: 1.5rem;
    color: lightblue;
}


/* Alternate row  to create checkerboard effect */
#grid > .square:nth-child(9n+1),
#grid > .square:nth-child(9n+3),
#grid > .square:nth-child(9n+5),
#grid > .square:nth-child(9n+7) {
    color: black;
    background-color: rgb(170, 170, 170);
}
#grid > .square:nth-child(9n+2),
#grid > .square:nth-child(9n+4),
#grid > .square:nth-child(9n+6),
#grid > .square:nth-child(9n+8) {
    color: black;
    background-color: rgb(221, 221, 221);
}

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