:root {
  --slider-value: 0;
  --base-landscape-duration: 15s;
}

.checkbox {
  display: flex;
  align-items: center;
  position: fixed;
  top: 40px;
  left: 50%;
  z-index: 100;
}

section {
  height: 100dvh;
  background: skyblue;
  background-image: url("https://assets.codepen.io/159218/clouds.svg");
  background-size: auto 200vh;
  animation: landscape
    calc(var(--base-landscape-duration) / (var(--slider-value) * 0.5 + 1))
    linear infinite;

  filter: url(#blurYHard);
}

.wrapper {
  height: 100dvh;
  &::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 20px solid black;
    content: "";
  }
}

:root:has(input[type="checkbox"]:checked) section {
  animation-name: landscape-reverse;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}

.speed {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 3;
}

#slider {
  rotate: -90deg;
  accent-color: rebeccapurple;
  scale: 2;
}

svg[aria-hidden="true"] {
  position: absolute;
  height: 0;
  width: 0;
  visibility: hidden;
}

@keyframes landscape {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 200%;
  }
}

@keyframes landscape-reverse {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: -200%;
  }
}

label {
  padding-left: 30px;
  cursor: pointer;
}

input[type="checkbox"] {
  scale: 3;
  accent-color: rebeccapurple;
}

/* hamster */

.head,
.eyes,
.feet,
.hands,
.mouth {
  &::before,
  &::after {
    content: "";
  }
}

.mouth {
  position: absolute;
  top: 30%;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  &::before {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    aspect-ratio: 1;
    background: black;
    width: calc(var(--base-width) / 40);
  }
}

.mouth div {
  width: calc(var(--base-width) / 8);
  aspect-ratio: 1;
  border-radius: 50%;
  border-bottom: 5px solid black;
}

.hamster-and-parachute {
  position: fixed;
  top: 20%;
  left: 50%;
  animation: updown calc(20s / (var(--slider-value) * 0.5 + 1)) linear infinite;
  transform: translateX(-50%);
}

.parachute {
  width: 40vmin;
  display: block;
  z-index: 1;
}

@keyframes updown {
  0%,
  100% {
    translate: 0 0;
    rotate: 0;
  }
  33% {
    translate: -2% -2%;
    rotate: -5deg;
  }
  66% {
    translate: 2% 2%;
    rotate: 5deg;
  }
}

.hamster {
  --base-width: 20vmin;
  --body: calc(var(--base-width) * 1.3);
  --color: BurlyWood;
  --secondary-color: sienna;
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  z-index: 2;
}

.head {
  position: relative;
  width: var(--base-width);
  aspect-ratio: 1;
  background: var(--color);
  border-radius: 48%;
  background: radial-gradient(
    farthest-corner circle at 100% 0%,
    var(--secondary-color) 32% 0%,
    31%,
    var(--color) 100%
  );
  &::before,
  &::after {
    position: absolute;
    width: calc(var(--base-width) / 5);
    aspect-ratio: 5/ 4;
    border-radius: 50%;
    background: var(--color);
    top: -5%;
    left: calc(var(--base-width) / 7);
    rotate: -30deg;
    z-index: -1;
  }
  &::after {
    inset-inline: auto calc(var(--base-width) / 7);
    rotate: 30deg;
    background: var(--secondary-color);
  }
}

.eyes {
  position: absolute;
  top: 20%;
  width: 60%;
  left: 20%;
  display: grid;
  grid-template-columns: calc(var(--base-width) / 8) auto calc(
      var(--base-width) / 8
    );
  z-index: 1;
  &::before,
  &::after {
    width: calc(var(--base-width) / 10);
    aspect-ratio: 1;
    border-radius: 50%;
    background: black;
  }
}

.body {
  position: relative;
  width: var(--body);
  aspect-ratio: 8/6.5;
  background: var(--color);
  border-radius: 48%;
  margin-top: calc(var(--base-width) / -1.6);
}

.hands {
  position: absolute;
  top: 38%;
  width: 60%;
  left: 15%;
  display: grid;
  grid-template-columns: calc(var(--base-width) / 8) auto calc(
      var(--base-width) / 8
    );
  z-index: 1;
  &::before,
  &::after {
    border-right: calc(var(--base-width) / 30) solid black;
    border-bottom: calc(var(--base-width) / 30) solid black;
    width: calc(var(--body) / 6);
    aspect-ratio: 1;
    rotate: -45deg;
    transform: skew(20deg, 20deg);
  }
  &::after {
    rotate: 135deg;
  }
}

.feet {
  &::before,
  &::after {
    position: absolute;
    width: calc(var(--base-width) / 7);
    aspect-ratio: 3/4;
    border-radius: 50%;
    background: var(--color);
    bottom: -4%;
    left: calc(var(--base-width) / 3);
    rotate: 20deg;
    z-index: -1;
  }
  &::after {
    inset-inline: auto calc(var(--base-width) / 3);
    rotate: -20deg;
  }
}