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

body {
  background-color: black;
  font-family: system-ui, Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 250;
  overflow: hidden;
}

canvas {
  display: block;
  overflow: hidden;
}

h1, h2 {
  font-size: x-large;
  font-weight: bolder;
  margin: 1dvh 0 3dvh;
}

#menu {
  width: min(350px, 75dvw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 5px;
  flex-flow: column;
  display: none; /* Initially hidden */
}

#menu button,
#menu select,
#menu label,
#aboutContent button,
#optionsContent button,
#randomMapContent button,
#randomMapContent select,
#randomMapContent label,
#rulesContent button {
  margin: 0.75dvh 0;
  padding: 0.5dvh 0.5dvw;
}

#rulesContent ul {
  list-style: circle;
  padding: 2dvw;
  overflow: auto;
  max-height: 60dvh;
}

#rulesContent li {
  margin-bottom: 2dvh;
}

#aboutContent,
#optionsContent,
#randomMapContent,
#rulesContent {
  min-width: 350px;
  /* width: min(350px, 75dvw); */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 5px;
  flex-flow: column;
  display: none; /* Initially hidden */
}

#aboutContent div,
#optionsContent div,
#randomMapContent div {
  padding: 2dvh 0;

  overflow: auto;
  max-height: 60dvh;
}

#aboutContent p,
#optionsContent p {
  padding: 2dvh 2dvw;
}