#hero {
  height: 600vh;
}

#background {
  height: 100vh;
  background: linear-gradient(91deg, white 0%, var(--bs-warning-text-emphasis) 53%, var(--bs-warning) 100%), var(--bs-body-color);
}

#content {
  height: 100vh;
  transform: scale(1);
  width: auto;
  background: url("../../assets/img/ChessMates(1).png") center / auto no-repeat;
}

#mask {
  mask: url("../../assets/img/ChessMates(1).svg") no-repeat center;
  mask-size: 200%;
}

#overlay-1 {
  background: url("../../assets/img/image-removebg-preview-modified.png") center / contain no-repeat;
  transform: scale(0);
}

#overlay {
  background: white;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}

.btn {
  font-family: Montserrat, sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: var(--bs-black);
  background: var(--bs-warning);
  transform: scale(1);
  height: 60px;
}

.button {
  width: 50px;
  height: 50px;
}