html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

.slider,
.slider2,
.slider3,
.slider4,
.slider5,
.slider6,
.slider7,
.slider8,
.tamaño,
.button {
  position: fixed;
  display: none;
  width: 35%;
  right: 2rem;
  color: rgba(64, 64, 186, 0.541);
  cursor: pointer;
}

.slider {
  top: 5rem;
}

.slider2 {
  top: 7rem;
}

.slider3 {
  top: 9rem;
}

.slider4 {
  top: 11rem;
}

.slider5 {
  top: 13rem;
}

.slider6 {
  top: 15rem;
}

.slider7 {
  top: 17rem;
}

.slider8 {
  top: 19rem;
}

.tamaño {
  top: 21rem;
}

.button {
  background: rgb(44, 44, 44);
  color: rgb(255, 255, 255);
  border: none;
  padding: .5rem 1rem;
}

.button:hover {
  background: rgba(72, 72, 72, 0.934);
}

.mouseRotate {
  position: fixed;
  top: 23rem;
  width: 35%;
  height: 3.5rem;
  right: 2rem;
}

.rotate {
  position: fixed;
  top: 27rem;
  width: 35%;
  right: 2rem;  
}

.toggle-config {
  position: fixed;
  top: 1.7rem;
  right: 2rem;
  background: none;
  color: white;
  user-select: none;
  width: 1.5rem;
  height: 1.5rem;
  filter: invert();
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
}

.logo {
  position: fixed;
  width: 12rem;
  top: 1.3rem;
  left: .75rem;
}

.controls {
  position: fixed;
  top: 4.6rem;
  right: calc(35% + 3rem);
  color: white;
  list-style: none;
  font-size: .6rem;
  text-align: end;
  display: none;
}

.controls li {
  margin-bottom: 1.32rem;
  font-family: montserrat;
}