html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

  font-family: Verdana, sans-serif;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;

  z-index: 1;
}

body.bg-gray {
  background: #2d2d2d;
}

body.bg-green {
  background: #02383c;
}

main {
  display: grid;
  place-items: center;
  z-index: 5;
}

.background {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 2;
}

.circle {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}

.circle-1 {
  width: 10vmin;
  height: 10vmin;

  right: 15vw;
  top: calc(
    ((35vw - (15vw + 5vmin)) * tan(25deg) + 5vmin * (1 / cos(25deg) - 1)) +
      10vmin
  );

  background-color: #ffccf9;
}
.circle-1 .container-1 {
  position: relative;

  clip-path: circle(53%);
  transition: transform 0.3s ease;

  width: 100%;
  height: 100%;
}
.container-1 .square-1-1 {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);

  background-color: #2d2d2d;
}
.container-1 .square-1-2 {
  position: absolute;
  top: 75%;
  left: 25%;

  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);

  background-color: #2d2d2d;
}
.circle-1:hover .container-1,
.circle-1 .container-1.active {
  transform: rotate(-90deg);
}

.circle-2 {
  width: 20vmin;
  height: 20vmin;

  right: 35vw;
  top: 10vh;

  background-color: #a79aff;
}
.circle-2 .square-2 {
  position: relative;
  top: 50%;
  left: 50%;

  width: 75%;
  height: 75%;
  transform: translate(-50%, -50%);
  clip-path: circle();

  transition: transform 0.3s ease;

  background-color: #2d2d2d;
}
.circle-2:hover .square-2,
.circle-2 .square-2.active {
  transform: translate(-50%, -50%) scale(0.8);
}

.circle-3 {
  width: 25vmin;
  height: 25vmin;

  top: 30vh;
  left: 30vw;
  transform: translate(-50%, -50%);

  background-color: #ffabab;
}
.circle-3 .square-3 {
  position: relative;
  top: 50%;
  left: 50%;

  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%) rotate(45deg);

  transition: transform 0.3s ease;

  background-color: #2d2d2d;
}
.circle-3:hover .square-3,
.circle-3 .square-3.active {
  transform: translate(-50%, -50%) rotate(90deg);
}

.circle-4 {
  width: 15vmin;
  height: 15vmin;

  left: 20vw;
  bottom: calc(
    ((50vw - (20vw + 7.5vmin)) * tan(25deg) + 7.5vmin * (1 / cos(25deg) - 1)) +
      7vmin
  );

  background-color: #f3ffe3;
}

.circle-5 {
  width: 5vmin;
  height: 5vmin;

  left: 45vw;
  bottom: calc(
    (50vw - (45vw + 2.5vmin)) * tan(25deg) + 2.5vmin * (1 / cos(25deg) - 1)
  );

  background-color: #9effd8;
}

.circle-6 {
  width: 20vmin;
  height: 20vmin;

  right: 35vw;
  bottom: 20vh;
  transform: translate(50%, 50%) rotate(90deg);

  background-color: #6eb5ff;
}

.ramp {
  position: absolute;
  z-index: 4;
}
.ramp.not-found {
  background-color: red;
}

.bottom-left {
  bottom: 0;
  left: 0;

  width: 50vw;
  height: calc(0.5 * 100vw * tan(25deg));
  clip-path: polygon(0% 0%, 100% 100%, 70% 100%, 0% 30%);

  background-color: #c4faf8;
}

.top-right {
  top: 0;
  right: 0;

  width: 35vw;
  height: calc(35vw * tan(25deg));
  clip-path: polygon(100% 0%, 0% 0%, 100% 100%);

  background-color: #ffc8a2;
}