@charset "UTF-8";
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  src: url("assets/press-start.woff2") format("woff2");
}
@font-face {
  font-family: "Plumbers";
  font-style: normal;
  font-weight: 400;
  src: url("assets/SuperPlumberBrothers.woff2") format("woff2");
}
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' height='50px' viewBox='0 0 50 50' version='1.1'%3E%3Cdefs%3E%3Cstyle%3Epath%7Bstroke-width:0.5 !important; stroke: %23fff !important;%7D.mouse%7Banimation:scroll 1s ease-in-out infinite;%7D@keyframes scroll%7Bto%7Btransform:translateY(5px)%7D%7D%3C/style%3E%3C/defs%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;' d='M 27.640625 31.839844 L 25 34.480469 L 22.359375 31.839844 C 22.039062 31.519531 21.558594 31.519531 21.238281 31.839844 C 20.917969 32.160156 20.917969 32.640625 21.238281 32.960938 L 24.441406 36.160156 C 24.601562 36.320312 24.800781 36.398438 25 36.398438 C 25.199219 36.398438 25.398438 36.320312 25.558594 36.160156 L 28.761719 32.960938 C 29.078125 32.640625 29.078125 32.160156 28.761719 31.839844 C 28.441406 31.519531 27.960938 31.519531 27.640625 31.839844 Z M 27.640625 31.839844 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;' d='M 28.761719 27.441406 C 28.441406 27.121094 27.960938 27.121094 27.640625 27.441406 L 25 30.078125 L 22.359375 27.441406 C 22.039062 27.121094 21.558594 27.121094 21.238281 27.441406 C 20.917969 27.761719 20.917969 28.238281 21.238281 28.558594 L 24.441406 31.761719 C 24.601562 31.921875 24.800781 32 25 32 C 25.199219 32 25.398438 31.921875 25.558594 31.761719 L 28.761719 28.558594 C 29.078125 28.238281 29.078125 27.761719 28.761719 27.441406 Z M 28.761719 27.441406 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;' d='M 32.199219 18 L 32.199219 10.800781 C 32.199219 6.839844 28.960938 3.601562 25 3.601562 C 21.039062 3.601562 17.800781 6.839844 17.800781 10.800781 L 17.800781 18 C 17.800781 21.960938 21.039062 25.199219 25 25.199219 C 28.960938 25.199219 32.199219 21.960938 32.199219 18 Z M 25 23.601562 C 21.921875 23.601562 19.398438 21.078125 19.398438 18 L 19.398438 10.800781 C 19.398438 7.71875 21.921875 5.199219 25 5.199219 C 28.078125 5.199219 30.601562 7.71875 30.601562 10.800781 L 30.601562 18 C 30.601562 21.078125 28.078125 23.601562 25 23.601562 Z M 25 23.601562 '/%3E%3Cpath class='mouse' style=' stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;' d='M 25 8 C 24.558594 8 24.199219 8.359375 24.199219 8.800781 L 24.199219 11.199219 C 24.199219 11.640625 24.558594 12 25 12 C 25.441406 12 25.800781 11.640625 25.800781 11.199219 L 25.800781 8.800781 C 25.800781 8.359375 25.441406 8 25 8 Z M 25 8 '/%3E%3C/svg%3E%0A"), ns-resize;
  image-rendering: pixelated;
  --orange: #e45f12;
  --yellow: #ffddc6;
  --boost: 0px;
  --speed: 0.00001;
  --jump: -225px;
  --flip: 1;
  --animation: stand;
  --progress: 0;
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  height: 600vh;
  overflow-x: hidden;
  font-family: "Press Start 2P", monospace;
}
body:after {
  content: "SCROLL  ";
  position: fixed;
  color: #000;
  width: 12px;
  font-size: 12px;
  height: 100px;
  display: flex;
  left: 45px;
  top: calc(50vh - 75px);
  z-index: 7;
  flex-wrap: wrap;
  word-break: break-all;
  line-height: 1.5;
  justify-content: center;
  align-items: flex-start;
  color: var(--yellow);
  animation: scrollme 2s linear infinite;
  transform: translateX(clamp(-100px, 50px - var(--progress) * 100px, 0px));
}
@keyframes scrollme {
  33% {
    content: "SCROLL  ▼";
  }
  66% {
    content: "SCROLL  ▼▼";
  }
  100% {
    content: "SCROLL  ▼▼▼";
  }
}
body:before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
  background: url("assets/curtain1.png") 0px 100%/35px auto repeat-x, url("assets/curtain2.png") 0px calc(100% - 10px)/35px auto;
  transition: transform 1.5s ease-in-out 1s;
  transform: translateY(0);
}
body.jump #mario {
  animation: none;
  background: url("assets/smb1_mario_sheet.gif") -575px -200px/800px auto no-repeat;
  transform: scaleX(var(--flip)) translateZ(0px) translateY(calc(var(--progress) * var(--jump) + var(--boost)));
}
body.loaded .intro {
  transform: translateY(0px);
}
body.loaded:before {
  transform: translateY(-100%);
}
body.loaded .timeline li:first-of-type > span span.word,
body.loaded .timeline li:first-of-type time span.word {
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier) + 2s);
  transform: translateY(0);
}
body.coin0 .timeline li:nth-of-type(2) > span span.word,
body.coin0 .timeline li:nth-of-type(2) time span.word {
  transform: translateY(0px);
}
body.coin0 .timeline li:nth-of-type(1):before {
  background: linear-gradient(to bottom, #8c1000, #8c1000) 50% 50%/30px 45px no-repeat, url(assets/items.png) -206px 0px/900px auto no-repeat;
  animation: bounce 0.05s ease-in-out 2 alternate;
  --height: -10px;
}
@keyframes bounce {
  to {
    transform: translateY(var(--height));
  }
}
body.coin0 .timeline li:nth-of-type(1):after {
  animation: coin 0.5s steps(3, end) infinite 0.15s, bounce 0.25s ease-in-out 2 alternate;
  transform: translateY(-10px);
  --height: -125px;
}
@keyframes coin {
  50% {
    background-position: -730px -300px;
  }
}
body.coin0 .timeline li:nth-of-type(1):nth-of-type(7):after {
  animation: none;
  transform: none;
}
body.coin0 .timeline li:nth-of-type(1):nth-last-of-type(2):before {
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  animation: bowser 0.5s steps(3, end) infinite;
}
body.coin0 .timeline li:nth-of-type(1):nth-of-type(3n):after {
  animation: flower 0.5s steps(2, end) infinite 0.15s, grow 1s ease-in-out 1 forwards;
}
@keyframes grow {
  to {
    transform: translate(-1.5px, -60.5px);
  }
}
@keyframes flower {
  to {
    background-position: -207.5px -200px;
  }
}
body.loaded .intro {
  transform: translateY(0px);
}
body.loaded:before {
  transform: translateY(-100%);
}
body.loaded .timeline li:first-of-type > span span.word,
body.loaded .timeline li:first-of-type time span.word {
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier) + 2s);
  transform: translateY(0);
}
body.coin1 .timeline li:nth-of-type(3) > span span.word,
body.coin1 .timeline li:nth-of-type(3) time span.word {
  transform: translateY(0px);
}
body.coin1 .timeline li:nth-of-type(2):before {
  background: linear-gradient(to bottom, #8c1000, #8c1000) 50% 50%/30px 45px no-repeat, url(assets/items.png) -206px 0px/900px auto no-repeat;
  animation: bounce 0.05s ease-in-out 2 alternate;
  --height: -10px;
}
@keyframes bounce {
  to {
    transform: translateY(var(--height));
  }
}
body.coin1 .timeline li:nth-of-type(2):after {
  animation: coin 0.5s steps(3, end) infinite 0.15s, bounce 0.25s ease-in-out 2 alternate;
  transform: translateY(-10px);
  --height: -125px;
}
@keyframes coin {
  50% {
    background-position: -730px -300px;
  }
}
body.coin1 .timeline li:nth-of-type(2):nth-of-type(7):after {
  animation: none;
  transform: none;
}
body.coin1 .timeline li:nth-of-type(2):nth-last-of-type(2):before {
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  animation: bowser 0.5s steps(3, end) infinite;
}
body.coin1 .timeline li:nth-of-type(2):nth-of-type(3n):after {
  animation: flower 0.5s steps(2, end) infinite 0.15s, grow 1s ease-in-out 1 forwards;
}
@keyframes grow {
  to {
    transform: translate(-1.5px, -60.5px);
  }
}
@keyframes flower {
  to {
    background-position: -207.5px -200px;
  }
}
body.loaded .intro {
  transform: translateY(0px);
}
body.loaded:before {
  transform: translateY(-100%);
}
body.loaded .timeline li:first-of-type > span span.word,
body.loaded .timeline li:first-of-type time span.word {
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier) + 2s);
  transform: translateY(0);
}
body.coin2 .timeline li:nth-of-type(4) > span span.word,
body.coin2 .timeline li:nth-of-type(4) time span.word {
  transform: translateY(0px);
}
body.coin2 .timeline li:nth-of-type(3):before {
  background: linear-gradient(to bottom, #8c1000, #8c1000) 50% 50%/30px 45px no-repeat, url(assets/items.png) -206px 0px/900px auto no-repeat;
  animation: bounce 0.05s ease-in-out 2 alternate;
  --height: -10px;
}
@keyframes bounce {
  to {
    transform: translateY(var(--height));
  }
}
body.coin2 .timeline li:nth-of-type(3):after {
  animation: coin 0.5s steps(3, end) infinite 0.15s, bounce 0.25s ease-in-out 2 alternate;
  transform: translateY(-10px);
  --height: -125px;
}
@keyframes coin {
  50% {
    background-position: -730px -300px;
  }
}
body.coin2 .timeline li:nth-of-type(3):nth-of-type(7):after {
  animation: none;
  transform: none;
}
body.coin2 .timeline li:nth-of-type(3):nth-last-of-type(2):before {
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  animation: bowser 0.5s steps(3, end) infinite;
}
body.coin2 .timeline li:nth-of-type(3):nth-of-type(3n):after {
  animation: flower 0.5s steps(2, end) infinite 0.15s, grow 1s ease-in-out 1 forwards;
}
@keyframes grow {
  to {
    transform: translate(-1.5px, -60.5px);
  }
}
@keyframes flower {
  to {
    background-position: -207.5px -200px;
  }
}
body.loaded .intro {
  transform: translateY(0px);
}
body.loaded:before {
  transform: translateY(-100%);
}
body.loaded .timeline li:first-of-type > span span.word,
body.loaded .timeline li:first-of-type time span.word {
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier) + 2s);
  transform: translateY(0);
}
body.coin3 .timeline li:nth-of-type(5) > span span.word,
body.coin3 .timeline li:nth-of-type(5) time span.word {
  transform: translateY(0px);
}
body.coin3 .timeline li:nth-of-type(4):before {
  background: linear-gradient(to bottom, #8c1000, #8c1000) 50% 50%/30px 45px no-repeat, url(assets/items.png) -206px 0px/900px auto no-repeat;
  animation: bounce 0.05s ease-in-out 2 alternate;
  --height: -10px;
}
@keyframes bounce {
  to {
    transform: translateY(var(--height));
  }
}
body.coin3 .timeline li:nth-of-type(4):after {
  animation: coin 0.5s steps(3, end) infinite 0.15s, bounce 0.25s ease-in-out 2 alternate;
  transform: translateY(-10px);
  --height: -125px;
}
@keyframes coin {
  50% {
    background-position: -730px -300px;
  }
}
body.coin3 .timeline li:nth-of-type(4):nth-of-type(7):after {
  animation: none;
  transform: none;
}
body.coin3 .timeline li:nth-of-type(4):nth-last-of-type(2):before {
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  animation: bowser 0.5s steps(3, end) infinite;
}
body.coin3 .timeline li:nth-of-type(4):nth-of-type(3n):after {
  animation: flower 0.5s steps(2, end) infinite 0.15s, grow 1s ease-in-out 1 forwards;
}
@keyframes grow {
  to {
    transform: translate(-1.5px, -60.5px);
  }
}
@keyframes flower {
  to {
    background-position: -207.5px -200px;
  }
}
body.loaded .intro {
  transform: translateY(0px);
}
body.loaded:before {
  transform: translateY(-100%);
}
body.loaded .timeline li:first-of-type > span span.word,
body.loaded .timeline li:first-of-type time span.word {
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier) + 2s);
  transform: translateY(0);
}
body.coin4 .timeline li:nth-of-type(6) > span span.word,
body.coin4 .timeline li:nth-of-type(6) time span.word {
  transform: translateY(0px);
}
body.coin4 .timeline li:nth-of-type(5):before {
  background: linear-gradient(to bottom, #8c1000, #8c1000) 50% 50%/30px 45px no-repeat, url(assets/items.png) -206px 0px/900px auto no-repeat;
  animation: bounce 0.05s ease-in-out 2 alternate;
  --height: -10px;
}
@keyframes bounce {
  to {
    transform: translateY(var(--height));
  }
}
body.coin4 .timeline li:nth-of-type(5):after {
  animation: coin 0.5s steps(3, end) infinite 0.15s, bounce 0.25s ease-in-out 2 alternate;
  transform: translateY(-10px);
  --height: -125px;
}
@keyframes coin {
  50% {
    background-position: -730px -300px;
  }
}
body.coin4 .timeline li:nth-of-type(5):nth-of-type(7):after {
  animation: none;
  transform: none;
}
body.coin4 .timeline li:nth-of-type(5):nth-last-of-type(2):before {
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  animation: bowser 0.5s steps(3, end) infinite;
}
body.coin4 .timeline li:nth-of-type(5):nth-of-type(3n):after {
  animation: flower 0.5s steps(2, end) infinite 0.15s, grow 1s ease-in-out 1 forwards;
}
@keyframes grow {
  to {
    transform: translate(-1.5px, -60.5px);
  }
}
@keyframes flower {
  to {
    background-position: -207.5px -200px;
  }
}
body.loaded .intro {
  transform: translateY(0px);
}
body.loaded:before {
  transform: translateY(-100%);
}
body.loaded .timeline li:first-of-type > span span.word,
body.loaded .timeline li:first-of-type time span.word {
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier) + 2s);
  transform: translateY(0);
}
body.coin5 .timeline li:nth-of-type(7) > span span.word,
body.coin5 .timeline li:nth-of-type(7) time span.word {
  transform: translateY(0px);
}
body.coin5 .timeline li:nth-of-type(6):before {
  background: linear-gradient(to bottom, #8c1000, #8c1000) 50% 50%/30px 45px no-repeat, url(assets/items.png) -206px 0px/900px auto no-repeat;
  animation: bounce 0.05s ease-in-out 2 alternate;
  --height: -10px;
}
@keyframes bounce {
  to {
    transform: translateY(var(--height));
  }
}
body.coin5 .timeline li:nth-of-type(6):after {
  animation: coin 0.5s steps(3, end) infinite 0.15s, bounce 0.25s ease-in-out 2 alternate;
  transform: translateY(-10px);
  --height: -125px;
}
@keyframes coin {
  50% {
    background-position: -730px -300px;
  }
}
body.coin5 .timeline li:nth-of-type(6):nth-of-type(7):after {
  animation: none;
  transform: none;
}
body.coin5 .timeline li:nth-of-type(6):nth-last-of-type(2):before {
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  animation: bowser 0.5s steps(3, end) infinite;
}
body.coin5 .timeline li:nth-of-type(6):nth-of-type(3n):after {
  animation: flower 0.5s steps(2, end) infinite 0.15s, grow 1s ease-in-out 1 forwards;
}
@keyframes grow {
  to {
    transform: translate(-1.5px, -60.5px);
  }
}
@keyframes flower {
  to {
    background-position: -207.5px -200px;
  }
}
body span.marker {
  position: absolute;
  height: 33.33vh;
  width: 100vw;
  top: 33.33vh;
  pointer-events: none;
}
body span.marker:nth-of-type(1) {
  top: calc(33.33vh + 0vh);
}
body span.marker:nth-of-type(2) {
  top: calc(33.33vh + 100vh);
}
body span.marker:nth-of-type(3) {
  top: calc(33.33vh + 200vh);
}
body span.marker:nth-of-type(4) {
  top: calc(33.33vh + 300vh);
}
body span.marker:nth-of-type(5) {
  top: calc(33.33vh + 400vh);
}
body span.marker:nth-of-type(6) {
  top: calc(33.33vh + 500vh);
}
body .intro {
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  padding: 30px 0 10px;
  backdrop-filter: blur(4px);
  width: 100vw;
  background: rgba(255, 255, 255, 0.15);
  z-index: 11;
  transition: transform 0.75s ease-in-out 0.5s;
  transform: translateY(-100%);
}
body .intro h1 {
  font-family: "Plumbers", "Press Start 2P", monospace;
  font-size: clamp(20px, 10vh, 80px);
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 10px 0 #000;
  -webkit-text-stroke: 1px var(--orange);
}
body .intro * {
  width: 100%;
  text-align: center;
  margin: 0;
  color: var(--yellow);
  text-shadow: 0 2px var(--orange);
}

body.final .background .inner:after {
  opacity: 1;
}

.background {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
}
.background:before {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  background: url("assets/lakitu.png") 50% 50%/contain no-repeat;
  z-index: 9;
  top: 125px;
  left: 300vw;
  transform: translateX(calc(var(--progress) * -5vw)) translateZ(0px);
  animation: hover 3s ease-in-out infinite alternate;
}
@keyframes hover {
  to {
    transform: translateX(calc(var(--progress) * -5vw + 300px)) translateZ(0px);
  }
}
.background .inner {
  --t: rgba(255, 255, 255, 0.0001);
  position: absolute;
  width: 600vw;
  height: 100vh;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  background: linear-gradient(to right, #5d94fb 100px, var(--t) 100px) calc(400vw - 50px) 50%/100% auto, linear-gradient(to right, #5d94fb 45px, var(--t) 0px) 0% 0%/100% 100% no-repeat, linear-gradient(to bottom, #5d94fb calc(50% + 160px), var(--t) 50%), url("assets/ground.jpg") 50% calc(50% + 35px)/50px 50px;
  transform: translateX(calc(var(--progress) * -5vw)) translateZ(0px);
}
.background .inner:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, #000 calc(50% + 160px), var(--t) calc(50% + 160px)), url("assets/ground.jpg") 50% calc(50% + 35px)/50px 50px;
  filter: saturate(0);
  opacity: 0;
  z-index: 9;
  transition: opacity 0.5s ease-in-out;
}
.background .inner:before {
  content: "";
  opacity: 0.5;
  position: absolute;
  width: calc(100% - 100vw);
  left: 50vw;
  background: repeating-linear-gradient(to right, var(--yellow) 10px, var(--t) 10px, var(--t) 30px, var(--yellow) 30px, var(--yellow) 40px) 0% 50%/calc(var(--progress) * 1%) 50% no-repeat;
  height: 7.5px;
  bottom: calc(50% + 97.5px);
}
.background .inner .mountain {
  position: absolute;
  width: 400px;
  height: 400px;
  top: -70px;
  left: 0;
  background: url("assets/pngkit_hill-png_9681105.png") 50% 100%/contain no-repeat;
  z-index: 3;
}
.background .inner .mountain:before {
  content: "";
  position: absolute;
  width: 300px;
  height: 400px;
  background: inherit;
  left: 25vw;
  transform: translateX(calc(var(--progress) * 1vw)) translateZ(0px);
}
.background .inner .mountain:after {
  content: "";
  position: absolute;
  left: -25vw;
  height: 75px;
  width: 200px;
  background: url("assets/bush.png") 50% 0%/100% auto no-repeat;
  top: 325px;
  transform: translateX(calc(var(--progress) * 2vw)) translateZ(0px);
}
.background .inner .cloud {
  position: absolute;
  width: 200px;
  height: 100px;
  top: calc(50% - 170px);
  z-index: 2;
  background: url("assets/clouds_1.png") 0px 0px/450px auto no-repeat;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(4) .mountain {
  display: none;
}
.background .inner .cloud:before, .background .inner .cloud:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -35vw;
  top: -100px;
  background: url("assets/clouds_1.png") -10px -105px/450px auto no-repeat;
  transform: translateX(calc(var(--progress) * -2vw)) translateZ(0px);
}
.background .inner .cloud:after {
  left: 25vw;
  top: 100px;
  transform: translateX(calc(var(--progress) * 2vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(1) {
  left: calc(100vw - 50vw);
}
.background .inner .cloud:nth-of-type(3n) .mountain {
  left: -12.5vw;
}
.background .inner .cloud:nth-of-type(3n) .mountain:after {
  transform: translateX(calc(var(--progress) * 0.5vw + 10vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even) .mountain:before {
  left: 50vw;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even):before {
  top: -125px;
}
.background .inner .cloud:nth-of-type(even):after {
  top: -200px;
  transform: translateX(calc(var(--progress) * -0.25vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(2) {
  left: calc(200vw - 50vw);
}
.background .inner .cloud:nth-of-type(3n) .mountain {
  left: -12.5vw;
}
.background .inner .cloud:nth-of-type(3n) .mountain:after {
  transform: translateX(calc(var(--progress) * 0.5vw + 10vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even) .mountain:before {
  left: 50vw;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even):before {
  top: -125px;
}
.background .inner .cloud:nth-of-type(even):after {
  top: -200px;
  transform: translateX(calc(var(--progress) * -0.25vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(3) {
  left: calc(300vw - 50vw);
}
.background .inner .cloud:nth-of-type(3n) .mountain {
  left: -12.5vw;
}
.background .inner .cloud:nth-of-type(3n) .mountain:after {
  transform: translateX(calc(var(--progress) * 0.5vw + 10vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even) .mountain:before {
  left: 50vw;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even):before {
  top: -125px;
}
.background .inner .cloud:nth-of-type(even):after {
  top: -200px;
  transform: translateX(calc(var(--progress) * -0.25vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(4) {
  left: calc(400vw - 50vw);
}
.background .inner .cloud:nth-of-type(3n) .mountain {
  left: -12.5vw;
}
.background .inner .cloud:nth-of-type(3n) .mountain:after {
  transform: translateX(calc(var(--progress) * 0.5vw + 10vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even) .mountain:before {
  left: 50vw;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even):before {
  top: -125px;
}
.background .inner .cloud:nth-of-type(even):after {
  top: -200px;
  transform: translateX(calc(var(--progress) * -0.25vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(5) {
  left: calc(500vw - 50vw);
}
.background .inner .cloud:nth-of-type(3n) .mountain {
  left: -12.5vw;
}
.background .inner .cloud:nth-of-type(3n) .mountain:after {
  transform: translateX(calc(var(--progress) * 0.5vw + 10vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even) .mountain:before {
  left: 50vw;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even):before {
  top: -125px;
}
.background .inner .cloud:nth-of-type(even):after {
  top: -200px;
  transform: translateX(calc(var(--progress) * -0.25vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(6) {
  left: calc(600vw - 50vw);
}
.background .inner .cloud:nth-of-type(3n) .mountain {
  left: -12.5vw;
}
.background .inner .cloud:nth-of-type(3n) .mountain:after {
  transform: translateX(calc(var(--progress) * 0.5vw + 10vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even) .mountain:before {
  left: 50vw;
  transform: translateX(calc(var(--progress) * 0.5vw)) translateZ(0px);
}
.background .inner .cloud:nth-of-type(even):before {
  top: -125px;
}
.background .inner .cloud:nth-of-type(even):after {
  top: -200px;
  transform: translateX(calc(var(--progress) * -0.25vw)) translateZ(0px);
}

#mario {
  z-index: 1;
  width: 160px;
  height: 160px;
  background: url("assets/smb1_mario_sheet.gif") 50px -200px/800px auto no-repeat;
  animation: var(--animation) clamp(0.125s, (5 - var(--speed) / 2000) * 0.025s, 0.5s) steps(3, start) infinite;
  position: fixed;
  left: calc(50% - 80px);
  top: calc(50% + 5px);
  transform: scaleX(var(--flip)) translateZ(0px);
  transform-origin: 90px 50%;
}
@keyframes run {
  from {
    background-position: -427.5px -200px;
  }
  to {
    background-position: -75px -200px;
  }
}

.timeline {
  padding: 0;
  margin: 0;
  z-index: 3;
  position: fixed;
  width: 600vw;
  height: 100vh;
  transform: translateX(calc(var(--progress) * -5vw)) translateZ(0px);
  list-style-type: none;
}
.timeline li {
  height: 150px;
  width: 400px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  position: absolute;
  font-size: 16px;
  padding: 2rem;
  box-sizing: border-box;
  background: linear-gradient(to right, #fff, #fff) 5px 5px/5px 5px no-repeat, linear-gradient(to right, #000, #000) 5px 5px/8px 8px no-repeat, linear-gradient(to right, #fff, #fff) calc(100% - 5px) 5px/5px 5px no-repeat, linear-gradient(to right, #000, #000) calc(100% - 2px) 5px/8px 8px no-repeat, linear-gradient(to right, #fff, #fff) 5px calc(100% - 5px)/5px 5px no-repeat, linear-gradient(to right, #000, #000) 5px calc(100% - 2px)/8px 8px no-repeat, linear-gradient(to right, #fff, #fff) calc(100% - 5px) calc(100% - 5px)/5px 5px no-repeat, linear-gradient(to right, #000, #000) calc(100% - 2px) calc(100% - 2px)/8px 8px no-repeat, var(--orange);
  bottom: 50%;
  z-index: 9;
  color: #fcddcc;
  box-shadow: -3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #000, 3px 0 0 #000, -3px 3px 0 #000;
  text-shadow: 0 4px 0 #000;
}
.timeline li:nth-of-type(3n):after {
  background: url(assets/items.png) 0px -200px/900px auto no-repeat;
  transform: translate(-1.5px, -7.5px);
}
.timeline li:nth-of-type(7):after {
  background: url(assets/pipe.gif) 50% 100%/contain no-repeat;
  width: 300px;
  height: 175px;
  transform: none;
  left: calc(50vw + 50% - 150px);
  top: calc(50% + 135px);
  clip-path: polygon(0 0, 100% 0, 100% 57.5%, 0 57.5%);
}
.timeline li:nth-of-type(7):before {
  display: none;
}
.timeline li:nth-last-of-type(2):before {
  animation: none;
  left: calc(50vw + 50% - 42.5px);
  background: url(assets/bowser.gif) 0px 0px/auto 125px no-repeat;
  top: calc(50% + 115px);
  height: 125px;
  width: 125px;
  animation: bowser 0.5s steps(3, end) infinite;
  transition: transform 0.5s ease-in-out;
}
@keyframes bowser {
  to {
    background-position: -360px 0px;
  }
}
.timeline li:nth-last-of-type(2):after {
  display: none;
}
.timeline li:last-of-type:before {
  animation: none;
  left: calc(100% + 85px);
  background: url(assets/items.png) -825px 0px/900px auto no-repeat;
  top: calc(50% + 151.5px);
}
.timeline li:last-of-type:after {
  display: none;
}
.timeline li:before, .timeline li:after {
  content: "";
  position: absolute;
  background: url("assets/items.png") 0px 0px/900px auto no-repeat;
  height: 85px;
  width: 85px;
  z-index: 9;
  left: calc(50vw + 50% - 42.5px);
  top: calc(50% - 70px);
  animation: flash 1s steps(1, end) infinite;
}
@keyframes flash {
  50% {
    background-position: -103px 0px;
  }
}
.timeline li:after {
  animation: none;
  transform: translateY(-10px);
  background: url("assets/items.png") -415px -300px/900px auto no-repeat;
  z-index: 8;
  left: calc(50vw + 50% - 40px);
}
.timeline li time,
.timeline li > span {
  position: absolute;
  display: flex;
  height: 50%;
  justify-content: center;
  align-items: center;
  top: 0%;
  line-height: 1;
  overflow: hidden;
  max-width: 100%;
  flex-wrap: wrap;
}
.timeline li time .word,
.timeline li > span .word {
  display: inline-block;
  margin: 0 0.5rem;
  transition: transform cubic-bezier(1, 0, 0, 1) 0.75s;
  transition-delay: calc(var(--word-index) * 0.02s + var(--modifier));
}
.timeline li time {
  color: #fff;
  --modifier: 0.15s;
}
.timeline li time .word {
  transform: translateY(-200px);
}
.timeline li > span {
  top: 50%;
  align-items: flex-start;
  --modifier: 0s;
}
.timeline li > span .word {
  transform: translateY(200px);
}
.timeline li:nth-of-type(1) {
  left: calc(0vw + 50vw - 200px);
}
.timeline li:nth-of-type(2) {
  left: calc(100vw + 50vw - 200px);
}
.timeline li:nth-of-type(3) {
  left: calc(200vw + 50vw - 200px);
}
.timeline li:nth-of-type(4) {
  left: calc(300vw + 50vw - 200px);
}
.timeline li:nth-of-type(5) {
  left: calc(400vw + 50vw - 200px);
}
.timeline li:nth-of-type(6) {
  left: calc(500vw + 50vw - 200px);
}

body::-webkit-scrollbar {
  width: 5px;
}

body::-webkit-scrollbar-track {
  background: var(--yellow);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--orange);
  outline: 1px solid var(--yellow);
}