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

#grid > :nth-child(2n) {
  background-color: rgb(221, 221, 221);
}

#grid > :nth-child(2n + 1) {
  background-color: rgb(170, 170, 170);
}

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

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

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