:root {
  font-size: 800%;
  font-family: "WHOA";
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  Justify-items: center;
  align-items: center;
}

body {
  background-color: rgb(105, 195, 230);
  /* overflow: hidden; */
}



.W {
  grid-column: 1;
  grid-row: 1;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.E {
  grid-column: 2;
  grid-row: 1;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.L {
  grid-column: 3;
  grid-row: 1;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.O {
  grid-column: 4;
  grid-row: 1;
  color: black;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.V {
  grid-column: 5;
  grid-row: 1;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.E2 {
  grid-column: 6;
  grid-row: 1;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}





.B {
  grid-column: 1;
  grid-row: 2;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.E3 {
  grid-column: 2;
  grid-row: 2;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.A {
  grid-column: 3;
  grid-row: 2;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.T {
  grid-column: 4;
  grid-row: 2;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.S {
  grid-column: 5;
  grid-row: 2;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.T2 {
  grid-column: 6;
  grid-row: 2;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}





.O2 {
  grid-column: 1;
  grid-row: 3;
  color: black;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.O3 {
  grid-column: 2;
  grid-row: 3;
  color: black;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.W2 {
  grid-column: 3;
  grid-row: 3;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.E4 {
  grid-column: 4;
  grid-row: 3;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.L2 {
  grid-column: 5;
  grid-row: 3;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.O4 {
  grid-column: 6;
  grid-row: 3;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}




.V2 {
  grid-column: 1;
  grid-row: 4;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.E5 {
  grid-column: 2;
  grid-row: 4;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.B2 {
  grid-column: 3;
  grid-row: 4;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.E6 {
  grid-column: 4;
  grid-row: 4;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}

.A2 {
  grid-column: 5;
  grid-row: 4;
  color: white;
  animation: brrr 0.25s infinite alternate, bigger 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

.T3 {
  grid-column: 6;
  grid-row: 4;
  color: white;
  animation: booo 0.5s infinite alternate, bigger 1s infinite alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.25s;
}




h1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 0.5;
}

@keyframes brrr {
  from { font-variation-settings: 'vert' -100, 'hrzn' -100 }
  to { font-variation-settings: 'vert' 100, 'hrzn' 100 }
}

@keyframes booo {
  from { font-variation-settings: 'vert' 100, 'hrzn' 500 }
  to { font-variation-settings: 'vert' -100, 'hrzn' -500 }
}

@keyframes bigger {
  from {
    scale: 350%
  }

  to {
    scale: 350%
  }
}