/*CHiCheck CSS*/

.board {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  float: left;
  margin: 5px;
}

.board : hover {
  background: black;
}

.wrapper {
  margin: auto;
  padding-top: 100px;
  padding-right: 50px;
  position: relative;
  z-index: 1;

  /* to rotate the board by -45 degrees */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.player1 {
  background: blue;
}
.player1p {
  color: blue;
}
.player1:hover {
  background: navy;
}
.player1Highlight {
  background: green;
}

.player2 {
  background: red;
}
.player2p {
  color: red;
}
.player2:hover {
  background: maroon;
}
.player2Highlight {
  background: orange;
}

.empty {
  background: grey;
}
.empty:hover {
  background: black;
}