/* game board table */

#board td {
  width: 100px;
  height: 100px;
  border: solid 1px #666;
  position: relative;
}

/* pieces are div within game table cells: draw as colored circles */

.piece {
  /* TODO: make into circles */
  border-radius: 50%;
  margin: 5px;
  width: 80%;
  height: 80%;
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
}

/* TODO: make pieces red/blue,  depending on player 1/2 piece */

.p1 {
  background-color: red;
}

.p2 {
  background-color: blue;
}

/* column-top is table row of clickable areas for each column */

#column-top td {
  border: dashed 1px lightgray;
}

#column-top td:hover {
  background-color: gold;
}