body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1000%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #151515;
  font-family: monospace;
}

#three-canvas {
  position: absolute;
  /* top: 5%;
  left: 5%;
  width: 80%;
  height: 80%; */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#res-controls {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 2rem;
  z-index: 10;
  display: none;
}

#res-controls.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  all: unset;
  cursor: pointer;
}

.res-button {
  background: rgba(255, 255, 255, 0.5);
  padding: 0.4rem 0.8rem;
  margin: 0 1rem;
  border-radius: 2rem;
  filter: invert(1);
  -webkit-filter: invert(1);
}

.res-button.active {
  background: rgba(255, 255, 255, 1);
}

.res-button:hover {
  background: rgba(255, 255, 255, 0.8);
}