#map {
  height: 80vw;
}

#map canvas {
  cursor: pointer;
}

#scroll {
  position: relative;
}

.scroll__before {
  bottom: 20%;
}

.scroll__after {
  top: 10%;
  right: 0;
}

.scroll__before,
.scroll__after {
  pointer-events: none;
  position: absolute;
  width: 50%;
  height: 50%;
}

.scroll__before img,
.scroll__after img {
  width: 100%;
  height: auto;
}

.number-animation {
  position: absolute;
  top: 28.5%;
  left: -4%;
  width: 100%;
  height: 10%;
}

body > canvas {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 22px;
  pointer-events: none;
  font-family: als_direct;
}

@media(min-width: 1244px) {
  body > canvas {
    left: calc(50vw - 600px)
  }
}

.task,
.credits {
  background: none;
}

.perspective-container {
  position: relative;
}

.perspective-container img {
  transform-origin: 50% 100%;
}

.perspective-image__absolute {
  position: absolute;
  top: 207px;
  margin: 0px auto;
  left: 60px;
  z-index: 19
}

.perspective-image {
  will-change: transform;
}

#after-scroll {
  position: relative;
  z-index: 2;
  margin-top: -20vh;
}