body {
  margin: 0px;
  padding: 0px;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );

  width: 100dvw;
  height: 100dvh;
  min-height: calc(400px + 70vw / 5 + 4rem);
}

* {
  font-family: "Nanum Myeongjo", serif;
}

@keyframes bounce {
  0% {
    transform: scaleX(1) scaleY(1.3);
  }
  50% {
    transform: scaleX(1.3) scaleY(0.8);
  }
  80% {
    transform: scaleX(1) scaleY(1);
  }
  100% {
    transform: scaleX(1) scaleY(1.3);
  }
}

@keyframes bounce22 {
  0% {
    transform: scaleX(1) scaleY(1.3) translateX(-50%);
  }
  50% {
    transform: scaleX(1.3) scaleY(0.8) translateX(-50%);
  }
  80% {
    transform: scaleX(1) scaleY(1) translateX(-50%);
  }
  100% {
    transform: scaleX(1) scaleY(1.3) translateX(-50%);
  }
}

@keyframes rotation {
  0% {
    rotate: var(--rotation);
  }
  40% {
    rotate: calc(var(--rotation) + 360deg);
  }
  40.01% {
    rotate: var(--rotation);
  }
}

.bounceani {
  animation: bounce 0.4s infinite linear,
    rotation 3s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bounce {
  animation: bounce 0.4s infinite linear;
}

.t1 {
  position: fixed;
  left: 100px;
  top: 100px;
  font-size: 2rem;
  --rotation: -10deg;
  rotate: var(--rotation);

  color: red;
  font-weight: bold;
}

.t2 {
  position: fixed;
  right: 100px;
  top: 200px;
  font-size: 3rem;
  --rotation: 10deg;
  rotate: var(--rotation);

  color: yellow;
  background: red;
  border-radius: 9999px;
  padding: 5px 15px;
  font-weight: bold;

  animation-delay: 0.2s;
}

@keyframes rotation2 {
  0% {
    rotate: var(--rotation);
  }
  25% {
    rotate: calc(var(--rotation) + 360deg);
  }
  25.01% {
    rotate: var(--rotation);
  }
  50% {
    rotate: calc(var(--rotation) + 360deg);
  }
  50.01% {
    rotate: var(--rotation);
  }
}

.t3 {
  position: fixed;
  left: 50%;
  top: calc(400px + 70vw / 5);
  font-size: 2rem;

  color: white;
  background: lime;
  border-radius: 9px;
  padding: 8px 16px;
  font-weight: bold;
  --rotation: 0deg;
  transform: translateX(-50%);
  transform-origin: left;
  animation: rotation2 2s infinite cubic-bezier(0.165, 0.84, 0.44, 1);

  cursor: pointer;
  border: 3px solid black;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.5);
}

.t4 {
  position: fixed;
  top: 350px;
  left: 50%;
  transform: translate(-50%);
  width: 70vw;
  animation: bounce22 0.4s infinite linear;
  transform-origin: left;
}

.t5 {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: max(30vw, min(200px, 100vw));
  animation: bounce 1s infinite linear;
  /* transform-origin: left; */
}