body {
  background-color: #525252;
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.logo {
  font-size: 20rem;
  top: -80px;
  left: 300px;
  position: absolute;
  font-family: Oddity;
  z-index: -999;
  mix-blend-mode: screen;
  color: var(--white);
  filter: blur(1.4px);
}

.pos-1 {
  top: -80px;
  left: -200px;
}

.pos-2 {
  top: 160px;
  left: 400px;
}

.pos-3 {
  top: 400px;
  left: 800px;
}

.pos-4 {
  top: 640px;
  left: 200px;
}

.pos-5 {
  top: 870px;
  left: 900px;
}

.logo-01 {
  font-size: 20rem;
  top: -80px;
  left: 300osx;
  position: absolute;
  font-family: Oddity;
  z-index: -999;
  mix-blend-mode: multiply;
  filter: blur(1.4px);
}

.black-block {
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: -999;
  opacity: 1;
  transform: skewX(-20deg);
  mix-blend-mode: multiply;
  color: rgb(51, 51, 51);
}

.block {
  font-size: 32.3rem;
  font-family: Adobe;
  font-variation-settings: "wdth" 40, "HGHT" 900 !important;
  letter-spacing: 10px;
  filter: blur(3px);
  animation: bar-animation 10s ease-in-out alternate infinite;
}

@keyframes bar-animation {
  from {
  }
  to {
    font-variation-settings: "wdth" 60, "HGHT" 100 !important;
    color: rgb(51, 51, 51);
    transform: translateX(200px);
  }
}

.block-pos-1 {
  position: absolute;
  top: 460px;
  left: 300px;
  transform: rotate(180deg) skewX(-20deg);
}

.block-pos-2 {
  position: absolute;
  top: -20px;
  left: -300px;
}

.block-pos-3 {
  position: absolute;
  top: 940px;
  left: 0px;
  transform: rotate(180deg) skewX(-20deg);
}

.move {
  transform: translateX(2px);
}

.fat {
  font-variation-settings: "wdth" 40, "HGHT" 500 !important;
}

.lines {
  width: 3000px;
  font-size: 30rem;
  font-family: Adobe;
  letter-spacing: 10px;
  font-variation-settings: "wdth" 28, "HGHT" 500;
  filter: blur(3px);
  line-height: 15rem;
}