:root {
  background: oklch(0.19 0.012 200.12);
  color: #b5b5b5;
}
body {
  font-family: monospace;
  font-size: 2rem;
  background: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.2rem;
  }
}

ul#poem {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}
.poem {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
}
body:has(.poem) {
  transition: background var(--duration);
  color: var(--text);
  overflow: hidden;
}

@keyframes lift {
  from {
    transform: translateY(200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fall {
  from {
    transform: translateY(-200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes run {
  from,
  50%,
  to {
    transform: translate3D(0, 0, 0);
  }
  20% {
    transform: translate3D(-50%, -100%, 0);
  }
  40% {
    transform: translate3D(50%, -100%, 0);
  }
  60% {
    transform: translate3D(50%, 100%, 0);
  }
  80% {
    transform: translate3D(-50%, 100%, 0);
  }
}
@keyframes spun {
  from {
    transform: rotate(0 deg) rotateY(0deg);
  }
  to {
    transform: rotate(360deg) rotateY(-360deg);
  }
}
@keyframes small {
  from,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(0.25);
  }
}
@keyframes big {
  from,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lift {
  display: inline-block;
  animation: lift var(--duration) ease-in;
}
.fall {
  display: inline-block;
  animation: fall var(--duration) ease-in;
}
.run {
  display: inline-block;
  animation: run var(--duration) ease-in;
}
.spun {
  display: inline-block;
  animation: spun var(--duration) ease-in;
}
.small {
  display: inline-block;
  animation: small var(--duration) ease-in;
}
.big {
  display: inline-block;
  animation: big var(--duration) ease-in;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}