html,
body {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: peachpuff;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#board {
  --board-width: min(90vw, 90vh);
  width: var(--board-width);
  height: var(--board-width);

  border: 20px solid #563232;
  border-radius: calc(var(--board-width) / 100);
}

.square.white.highlighted {
  fill: #e6b219 !important;
}

.square.black.highlighted {
  fill: #cc9e12 !important;
}

.square.white.highlighted2 {
  fill: #db0000 !important;
}

.square.black.highlighted2 {
  fill: #ab0000 !important;
}

.square.white.highlighted3 {
  fill: #db00db !important;
}

.square.black.highlighted3 {
  fill: #ab00ab !important;
}

/*****************************************************/

.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;

  background-color: peachpuff;
  color: black;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: auto;

  text-align: center;
  --font-scale: min(10vh, 15vw);
}

.menu-container h1 {
  font-size: calc(0.5 * var(--font-scale));
}

.menu-container h2 {
  font-size: calc(0.3 * var(--font-scale));
}

.menu-container button,
.menu-container select,
.menu-container input {
  font-size: calc(0.25 * var(--font-scale));
}

.menu-container .slider {
  width: 40vw;
}

.menu-container .spacing {
  font-size: calc(0.2 * var(--font-scale));
}