body {
  background: rgb(168, 197, 169);
  background: linear-gradient(
    0deg,
    rgba(168, 197, 169, 1) 0%,
    rgba(135, 200, 192, 1) 48%,
    rgba(61, 153, 192, 1) 100%
  );
  overflow: hidden;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
}

.logo {
  color: #9af0cc;
  mix-blend-mode: screen;
  transform: scale(3);
  opacity: 0.4;
}

.batch-1,
.batch-2,
.batch-3,
.batch-4 {
  font-family: Oddity;
  line-height: 20rem;
  font-variation-settings: "wdth" 120, "wght" 800, "ital" 0;
  font-size: 30rem;
  position: absolute;
  animation-name: logo-animation;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.batch-2 {
  transform: rotate(90deg);
  mix-blend-mode: multiply;
}

.batch-3 {
  transform: rotate(-90deg);
  mix-blend-mode: multiply;
}

.batch-4 {
  transform: rotate(180deg);
  mix-blend-mode: multiply;
}

@keyframes logo-animation {
  from {
    font-variation-settings: "wdth" 80, "wght" 800, "ital" 0;
  }
  to {
    font-variation-settings: "wdth" 80, "wght" 800, "ital" 20;
  }
}