body {
  background-color: #EDEAE8;
  font-family: roboto, sans-serif;
}

.game {
  display: flex;
  margin-top: 50px;
  align-items: center;
  justify-content: center;
}

.chess-board {
  --board-length: 80vh;
  height: var(--board-length);
  width: var(--board-length);
  margin: 0 5vh;
  display: grid;
}

.board {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;

  display: flex;
  flex-direction: column;
}

.board > div {
  display: flex;
}

.board > div > div {
  position: relative;
  width: 10vh;
  height: 10vh;
}

.dark {
  background-color: #BBC557;
}

.light {
  background-color: #EEECD3;
}

.board > div > div:hover {
  opacity: 0.5;
}

.selected {
  opacity: 0.5;
}

.letter-marker {
  font-size: 1.7vh;
  position: absolute;
  bottom: 0.25vh;
  right: 0.25vh;
}

.number-marker {
  font-size: 1.7vh;
  margin: 0.5vh;
}

.target {
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
}

.move {
  cursor: pointer;
  filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
}

.capture {
  cursor: pointer;
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

.check {
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

.castle {
  cursor: pointer;
  filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
}