body {
  margin: 0;
  margin-right: 1rem;

  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgb(0, 0, 0);
  font-family: "Stack Sans Text", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 700; /*bold*/
  font-style: normal;
}

.chess-container {
  display: grid;
  grid-template-columns: repeat(8, 12.5%);
  grid-template-rows: repeat(8, 12.5%);
  width: min(90vh, 90vw, calc(100vw - 2rem));
  height: min(90vh, 90vw, calc(100vw - 2rem));
  aspect-ratio: 1;
  box-shadow: 0 0 25px 9px rgba(255, 255, 255, 0.5) !important;

}

.board-location {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

#x0y0,
#x0y2,
#x0y4,
#x0y6,
#x1y1,
#x1y3,
#x1y5,
#x1y7,
#x2y0,
#x2y2,
#x2y4,
#x2y6,
#x3y1,
#x3y3,
#x3y5,
#x3y7,
#x4y0,
#x4y2,
#x4y4,
#x4y6,
#x5y1,
#x5y3,
#x5y5,
#x5y7,
#x6y0,
#x6y2,
#x6y4,
#x6y6,
#x7y1,
#x7y3,
#x7y5,
#x7y7 {
  background-color: rgb(58, 32, 5) !important;
  color: rgba(0, 0, 0, 0, 0.2) !important;
}

#x1y0,
#x1y2,
#x1y4,
#x1y6,
#x0y1,
#x0y3,
#x0y5,
#x0y7,
#x3y0,
#x3y2,
#x3y4,
#x3y6,
#x2y1,
#x2y3,
#x2y5,
#x2y7,
#x5y0,
#x5y2,
#x5y4,
#x5y6,
#x4y1,
#x4y3,
#x4y5,
#x4y7,
#x7y0,
#x7y2,
#x7y4,
#x7y6,
#x6y1,
#x6y3,
#x6y5,
#x6y7 {
  background-color: rgb(126, 73, 37) !important;
  color: rgb(126, 73, 37) !important;
}
.piece {
  font-size: clamp(24px, 7vw, 50px);
  cursor: grab;
  user-select: none;
  color: white;
  z-index: 10;
}
.piece.black-piece {
  color: #000000;
  text-shadow: 0 0 4px #fff;
}

.piece.white-piece {
  color: #ffffff;
  text-shadow: 0 0 4px #000;
}
.piece:active {
  cursor: grabbing;
}

.header {
  position: flex;
  top: 40px;
  left: 25px;
  width: 150px;
  font-size: 75px;
  margin-right:290px;
  margin-bottom:1010px;
  color: rgb(153, 115, 0);
  text-align: center;
  font-family: "Stack Sans Notch", sans-serif;
  font-weight: 700;
}
.score {
  display:flex;
  color: white;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: bold;
}

#Score-Title {
  margin: 4px;
  padding: 10px;
  background: linear-gradient(rgb(0, 0, 0),rgb(100, 100, 100));
  border-radius: 7px;
  position:absolute;
  top: 297px;
  left: 150px;
  font-size: 36px;
  font-family: "Stack Sans Notch", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 700; /*bold*/
  font-style: normal;
}

#White-Score{
  margin: 2%;
  padding: 20px;
  background: linear-gradient(rgb(0, 0, 0),rgb(100, 100, 100));
  border-radius: 6px;
  position:absolute;
  top: 370px;
  left: 1px;
  font-size: large;
  width: 100px;
  font-family: "Stack Sans Text", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 700; /*bold*/
  font-style: normal;
}

#Black-Score{
  margin: 2%;
  padding: 20px;
  background: linear-gradient(rgb(0, 0, 0),rgb(100, 100, 100));
  border-radius: 6px;
  position:absolute;
  top: 460px;
  left: 1px;
  font-size: large;
  width: 100px;
  font-family: "Stack Sans Text", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 700; /*bold*/
  font-style: normal;
}

#Best-Move{
    margin: 2%;
  padding: 20px;
  background: linear-gradient(rgb(186, 85, 3),rgb(0, 101, 189));
  border-radius: 6px;
  position:absolute;
  top: 545px;
  left: 1px;
  font-size: large;
  width: 150px;
  font-family: "Stack Sans Text", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 700; /*bold*/
  font-style: normal;
}