body {
  background-color: var(--black);
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}
.logo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100vw;
  height: 100vh;
  font-family: Handjet;
  color: var(--red);
  font-size: 20rem;
}

.grid-item {
  overflow: hidden;
  box-shadow: rgba(114, 2, 25, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  letter-spacing: 10px;
}

.form-1 {
  font-variation-settings: "wght" 200, "ELGR" 2, "ELSH" 2;
  animation: number-animation-1 2s infinite ease-in-out alternate;
  transform: translateY(400px);
  filter: blur(1px);
}

.equalizer-1 {
  font-family: adobe;
  font-variation-settings: "wdth" 0, "HGHT" 609;
  font-size: 24rem;
  transform: rotate(-90deg) translateX(-260px);
  animation: equalizer-1 2s infinite ease-in-out alternate;
  filter: blur(1px);
}

@keyframes equalizer-1 {
  from {
  }
  to {
    font-variation-settings: "wdth" 500, "HGHT" 609;
  }
}

@keyframes number-animation-1 {
  from {
  }
  to {
    transform: translateY(-300px);
  }
}

/* Form 2 */

.form-2 {
  font-variation-settings: "wght" 200, "ELGR" 2, "ELSH" 2;
  animation: number-animation-2 2s infinite ease-in-out alternate;
  transform: translateY(405px);
  filter: blur(1px);
}

.equalizer-2 {
  font-family: adobe;
  font-variation-settings: "wdth" 0, "HGHT" 609;
  font-size: 24rem;
  transform: rotate(-90deg) translateX(-260px);
  animation: equalizer-2 2s infinite ease-in-out alternate;
  filter: blur(1px);
}

@keyframes equalizer-2 {
  from {
  }
  to {
    font-variation-settings: "wdth" 500, "HGHT" 609;
  }
}

@keyframes number-animation-2 {
  from {
  }
  to {
    transform: translateY(-100px);
  }
}

/* Form 3 */

.form-3 {
  font-variation-settings: "wght" 200, "ELGR" 2, "ELSH" 2;
  animation: number-animation-3 2s infinite ease-in-out alternate;
  transform: translateY(405px);
  filter: blur(1px);
}

.equalizer-3 {
  font-family: adobe;
  font-variation-settings: "wdth" 0, "HGHT" 609;
  font-size: 24rem;
  transform: rotate(-90deg) translateX(-260px);
  animation: equalizer-3 2s infinite ease-in-out alternate;
  filter: blur(1px);
}

@keyframes equalizer-3 {
  from {
  }
  to {
    font-variation-settings: "wdth" 500, "HGHT" 609;
  }
}

@keyframes number-animation-3 {
  from {
  }
  to {
    transform: translateY(210px);
  }
}

/* Form 4 */

.form-4 {
  font-variation-settings: "wght" 200, "ELGR" 2, "ELSH" 2;
  animation: number-animation-4 2s infinite ease-in-out alternate;
  transform: translateY(405px);
  filter: blur(1px);
}

.equalizer-4 {
  font-family: adobe;
  font-variation-settings: "wdth" 0, "HGHT" 609;
  font-size: 24rem;
  transform: rotate(-90deg) translateX(-260px);
  animation: equalizer-4 2s infinite ease-in-out alternate;
  filter: blur(1px);
}

@keyframes equalizer-4 {
  from {
  }
  to {
    font-variation-settings: "wdth" 500, "HGHT" 609;
  }
}

@keyframes number-animation-4 {
  from {
  }
  to {
    transform: translateY(-200px);
  }
}

.digital-background {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 0.2;
  background-image: url("./martin-good-42/img/digital_bg.jpg");
  background-size: cover;
  background-color: aqua;
  filter: blur(1px);
}