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

.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: gohereW 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereW {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(400px, 200px) }
  100% { transform: translate(400px, 600px) }
}

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

@keyframes gohereE {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(-200px, 200px) }
  100% { transform: translate(400px, 600px) }
}

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

@keyframes gohereL {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(800px, 400px) }
  100% { transform: translate(200px, 400px) }
}

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

@keyframes gohereO {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(-200px, 100px) }
  100% { transform: translate(200px, 400px) }
}

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

@keyframes gohereV {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(-600px, 200px) }
  100% { transform: translate(-400px, 300px) }
}

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

@keyframes gohereE2 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-600px, 0px) }
  100% { transform: translate(-400px, 0px) }
}





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

@keyframes gohereB {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(0px, -220px) }
  100% { transform: translate(400px, -220px) }
}

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

@keyframes gohereE3 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(0px, 350px) }
  100% { transform: translate(-200px, 350px) }
}

.A {
  grid-column: 3;
  grid-row: 2;
  color: white;
  animation: gohereA 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereA {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(0px, 40px) }
  100% { transform: translate(100px, 400px) }
}

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

@keyframes gohereT {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(150px, 40px) }
  100% { transform: translate(200px, 400px) }
}

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

@keyframes gohereS {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(0px, -150px) }
  100% { transform: translate(200px, -200px) }
}

.T2 {
  grid-column: 6;
  grid-row: 2;
  color: white;
  animation: gohereT2 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereT2 {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(-600px, 200px) }
  100% { transform: translate(-400px, 300px) }
}




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

@keyframes gohereO2 {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(700px, 0px) }
  100% { transform: translate(400px, -200px) }
}

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

@keyframes gohereO3 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(0px, 220px) }
  100% { transform: translate(700px, 220px) }
}

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

@keyframes gohereW2 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-400px, 100px) }
  100% { transform: translate(-600px, -400px) }
}

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

@keyframes gohereE4 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-100px, 100px) }
  100% { transform: translate(-0px, -300px) }
}

.L2 {
  grid-column: 5;
  grid-row: 3;
  color: white;
  animation: gohereL2 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereL2 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-600px, 0px) }
  100% { transform: translate(-800px, -300px) }
}

.O4 {
  grid-column: 6;
  grid-row: 3;
  color: black;
  animation: gohereO4 0.5s infinite alternate, jackson 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereO4 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-200px, -200px) }
  100% { transform: translate(-200px, -400px) }
}




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

@keyframes gohereV2 {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(0px, -200px) }
  100% { transform: translate(100px, -400px) }
}

.E5 {
  grid-column: 2;
  grid-row: 4;
  color: white;
  animation: gohereE5 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereE5 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(50px, -200px) }
  100% { transform: translate(200px, -600px) }
}

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

@keyframes gohereB2 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-500px, 0px) }
  100% { transform: translate(-200px, -300px) }
}

.E6 {
  grid-column: 4;
  grid-row: 4;
  color: white;
  animation: gohereE6 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereE6 {
  10% { transform: translate(0px, 0px) }
  40% { transform: translate(-300px, 0px) }
  100% { transform: translate(0px, -200px) }
}

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

@keyframes gohereA2 {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(-300px, 0px) }
  100% { transform: translate(300px, -400px) }
}

.T3 {
  grid-column: 6;
  grid-row: 4;
  color: white;
  animation: gohereT3 0.5s infinite alternate;
  animation-timing-function: ease-in-out;
}

@keyframes gohereT3 {
  10% { transform: translate(0px, 0px) }
  60% { transform: translate(0px, -600px) }
  100% { transform: translate(-400px, -400px) }
}




h1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  line-height: 0.5;
}

@keyframes jackson {
  from { font-variation-settings: 'wght' 900 }
  to { font-variation-settings: 'wght' 100 }
}