styles.scss

$CELL_DIMENSIONS: 55px;

#board-content table, th, td {
  border: 1px solid black;
}

#board-content {
  & td.cell {
    &.white {
      background-color: lightgoldenrodyellow;

      &:hover {
        background-color: khaki;
      }
    }

    &.black {
      background-color: lightcoral;

      &:hover {
        background-color: crimson;
      }
    }

    &.selected {
      background-color: deepskyblue;

      &:hover {
        background-color: dodgerblue;
      }
    }

    &.possible-move {
      background-color: skyblue;

      &:hover {
        background-color: lightcyan;
      }
    }

    & div.piece.team {
      color: deeppink;

      &.team-white {
        color: aliceblue;
        text-shadow: 2px 2px 6px #000;
      }

      &.team-black {
        color: midnightblue;
        text-shadow: 2px 2px 6px #aaa;
      }
    }

    user-select: none;
    cursor: pointer;

    width: $CELL_DIMENSIONS;
    height: $CELL_DIMENSIONS;

    text-align: center;
    font-size: 40px;
  }

  & th.board-border {
    background-color: lightgray;
  }
}