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


body {
  background-color: black;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 60px;
  height: 60px;
}




.textB {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* line-height: 50px; */
}


.textB:nth-child(1) {
  top: -100px;
  left: -200px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.25s infinite alternate;
}

.textB:nth-child(2) {
  top: -100px;
  left: -250px;
  color: rgb(105, 195, 230);
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.3s infinite alternate;
}

.textB:nth-child(3) {
  top: -100px;
  left: -200px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}

.textB:nth-child(4) {
  top: -180px;
  left: -400px;
  color: black;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.25s infinite alternate;
}

.textB:nth-child(5) {
  top: -180px;
  left: -600px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}




.textE {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* line-height: 50px; */
}


.textE:nth-child(6) {
  top: -150px;
  left: 500px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.25s infinite alternate;
}

.textE:nth-child(7) {
  top: -150px;
  left: 400px;
  color: rgb(105, 195, 230);
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.3s infinite alternate;
}

.textE:nth-child(8) {
  top: -200px;
  left: 200px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}

.textE:nth-child(9) {
  top: -150px;
  left: 50px;
  color: black;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.25s infinite alternate;
}

.textE:nth-child(10) {
  top: -50px;
  left: 50px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}




.textA {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* line-height: 50px; */
}


.textA:nth-child(11) {
  top: 0px;
  left: -400px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.25s infinite alternate;
}

.textA:nth-child(12) {
  top: 0px;
  left: -450px;
  color: rgb(105, 195, 230);
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.3s infinite alternate;
}

.textA:nth-child(13) {
  top: 0px;
  left: -400px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}

.textA:nth-child(14) {
  top: 0px;
  left: -400px;
  color: black;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.25s infinite alternate;
}

.textA:nth-child(15) {
  top: 100px;
  left: -400px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}




.textT {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* line-height: 50px; */
}


.textT:nth-child(16) {
  top: 200px;
  left: -100px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.25s infinite alternate;
}

.textT:nth-child(17) {
  top: 200px;
  left: -550px;
  color: rgb(105, 195, 230);
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.3s infinite alternate;
}

.textT:nth-child(18) {
  top: 200px;
  left: -550px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}

.textT:nth-child(19) {
  top: 200px;
  left: -100px;
  color: black;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.25s infinite alternate;
}

/* .textT:nth-child(20) {
  top: 200px;
  left: -100px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.2s infinite alternate;
} */






.textS {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* line-height: 50px; */
}


.textS:nth-child(21) {
  top: 100px;
  left: 200px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.25s infinite alternate;
}

.textS:nth-child(22) {
  top: 100px;
  left: 150px;
  color: rgb(105, 195, 230);
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: hulk 0.3s infinite alternate;
}

.textS:nth-child(23) {
  top: 100px;
  left: 200px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}

.textS:nth-child(24) {
  top: 100px;
  left: 200px;
  color: black;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.25s infinite alternate;
}

.textS:nth-child(25) {
  top: 200px;
  left: 600px;
  color: white;
  font-size: 1500%;
  letter-spacing: -0.4rem;
  animation: jackson 0.3s infinite alternate;
}




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

@keyframes hulk {
  from { font-variation-settings: 'ital' 0 }
  to { font-variation-settings: 'ital' 12 }
}