body {
  background-color: var(--red);
  overflow: hidden;
  animation: back-animation 3s infinite alternate;
}

@keyframes back-animation {
  from {
    background-color: var(--red);
  }
  to {
    background-color: var(--black);
  }
}

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

.batch-1,
.batch-2,
.batch-3,
.batch-4 {
  font-family: Handjet;
  line-height: 20rem;
  font-size: 50rem;
  position: absolute;
  animation-name: logo-animation;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  font-variation-settings: "wght" 900, "ELGR" 0, "ELSH" 14;
}

.batch-2 {
  transform: translateX(-400px);
}

.batch-3 {
  transform: translateX(400px);
}

.batch-4 {
  transform: translateY(400px);
}

@keyframes logo-animation {
  from {
    font-variation-settings: "wght" 800, "ELGR" 0, "ELSH" 1;
  }
  to {
    font-variation-settings: "wght" 100, "ELGR" 0, "ELSH" 6;
    transform: translateX(-100px);
    color: var(--red);
  }
}