style.css

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

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  background: rgb(128, 128, 128);
  background: linear-gradient(
    133deg,
    rgba(128, 128, 128, 1) 45%,
    rgba(211, 211, 211, 1) 100%
  );
}
h1 {
  color: black;
}

#board {
  width: 644px;
  height: 640px;
  /* border: 1px solid black; */

  display: flex;
  flex-wrap: wrap;
}

.square {
  width: 80px;
  height: 80px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.black-square {
  background-color: black;
  color: white;
}

.white-square {
  color: white;
  background-color: white;
}

.checker-piece {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 10px 10px 37px 0px rgba(0, 0, 0, 0.49);
  -webkit-box-shadow: 10px 10px 37px 0px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 10px 10px 37px 0px rgba(0, 0, 0, 0.49);
}

.red-checker {
  background-color: red;
}

.blue-checker {
  background-color: blue;
}

.clickedChecker {
  transform: scale(1.5);
}

.king {
  border: 3px solid black;
}

@media only screen and (max-width: 600px) {
  .checker-piece {
    width: 20px;
    height: 20px;
  }
  .square {
    width: 40px;
    height: 40px;
  }
  #board {
    width: 320px;
    height: 320px;
  }
}

@media only screen and (min-width: 600px) {
  .checker-piece {
    width: 35px;
    height: 35px;
  }
  .square {
    width: 60px;
    height: 60px;
  }
  #board {
    width: 480px;
    height: 480px;
  }
}

@media only screen and (min-width: 768px) {
  .checker-piece {
    width: 35px;
    height: 35px;
  }
  .square {
    width: 80px;
    height: 80px;
  }
  #board {
    width: 640px;
    height: 640px;
  }
}