.fog {
  position: fixed;
  left: -2em;
  width: calc(100% + 4em);
  max-height: 16em;
}
.fog.fog--1 {
  bottom: 7em;
}
.fog.fog--2 {
  bottom: 12em;
}
@media (min-width: 33.75em) {
  .fog.fog--1 {
    bottom: 18em;
  }
  .fog.fog--2 {
    bottom: 30em;
  }
}

.saturn,
.saturn-outline {
  position: fixed;
  right: 10vw;
  bottom: 16em;
  width: clamp(5em, 50vw, 50em);
  height: auto;
}
.saturn {
  opacity: .40;
}
@media (min-width: 67em) {
  .saturn,
  .saturn-outline {
    bottom: 30em;
  }
}

.mountain-view {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: auto;
}

.landscape-surface {
  font-size: calc(2vw + .015rem);
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: auto;
}
.landscape-surface > img {
  display: block;
  filter: brightness(.9) saturate(1.1);
  width: 100%;
  height: auto;
}

.figure {
  cursor: pointer;
  position: absolute;
}
.figure > img:first-child {
  transition: filter 400ms ease;
}
.figure:hover > img:first-child,
.figure.highlight > img:first-child {
  filter: hue-rotate(90deg);
  transition: filter 400ms ease;
}
.figure > img {
  position: absolute;
  width: auto;
  height: 100%;
}
.figure .pen {
  right: -2em;
  bottom: -2.1em;
}

.figure--tobi {
  bottom: 2.7em;
  left: 5em;
  width: auto;
  height: 10em;
}
.figure--tobi .pen {
  transform: scale(1.1);
}
.hero-tobi {
  right: -3.2em;
  bottom: -3em;
}

.figure--jan {
  bottom: 4.4em;
  left: 19.5em;
  width: auto;
  height: 9.3em;
}
.figure--jan .pen {
  transform: scale(.94);
}
.hero-jan {
  right: -2.5em;
  bottom: -3.6em;
}

.figure--britta {
  bottom: 1.3em;
  left: 30.2em;
  width: auto;
  height: 12em;
}
.figure--britta .pen {
  transform: scale(.95);
}
.hero-britta {
  right: -2em;
  bottom: -4em;
}

.figure--nico {
  bottom: 4.7em;
  left: 35em;
  width: auto;
  height: 7.7em;
}
.figure--nico .pen {
  transform: scale(.98);
}
.hero-nico {
  right: -2.2em;
  bottom: -3.2em;
}

.figure--timo {
  bottom: 2.8em;
  left: 43.5em;
  width: auto;
  height: 9.7em;
}
.figure--timo .pen {
  transform: scale(.97);
}
.hero-timo {
  right: -2.5em;
  bottom: -3.5em;
}

#background {
  background-color: black;
  position: fixed;
  inset: 0;
  z-index: -100;
}

#supernova {
  background-color: transparent;
  position: fixed;
  inset: 0;
  z-index: -10;
}

#pacman {
  background-color: transparent;
  position: fixed;
  inset: 0;
  z-index: -1;
}