/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: rgb(50, 50, 50);
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  padding-left: 250px;
} */

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

main div {
  position: relative;
}

.board {
  display: grid;
  grid-template-columns: 75px 75px 75px 75px 75px 75px 75px 75px;
}

.board button {
  height: 75px;
  border: none;
}

.board button img {
  z-index: 100;
}

.light-square {
  background-color: #FDE68A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-square {
  background-color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.light-square img, .dark-square img {
  height: 80px;
}

.selected.light-square {
  background-color: rgb(120, 196, 236);
}

.selected.dark-square {
  background-color: rgb(40, 140, 204);
}

.possible-move {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  height: 24px;
  width: 24px;
  border-radius: 12px;
}

.possible-move.capture {
  background-color: rgba(0, 0, 0, 0);
  height: 75px;
  width: 75px;
  border: solid 6px rgba(0, 0, 0, 0.2);
  border-radius: 38px;
}

.hidden {
  visibility: hidden;
}

.board-container {
  position: relative;
  font-weight: 600;
}

.rank-labels {
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 53px;
  display: flex;
  justify-content: space-between;
}

.white-rank-labels {
  flex-direction: column-reverse;
}

.black-rank-labels {
  flex-direction: column;
}

.file-labels {
  position: absolute;
  bottom: 0;
  left: 62px;
  right: 5px;
  display: flex;
  justify-content: space-between;
}

.white-file-labels {
  flex-direction: row;
}

.black-file-labels {
  flex-direction: row-reverse;
}

.light-square-board-label {
  color: rgb(80, 116, 156);
}

.dark-square-board-label {
  color: rgb(234, 233, 210);
}