* {
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(42, 41, 41);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 600;
  font-size: 130px;
}

.text {
  display: flex;
  flex-wrap: nowrap;
  gap: 0px 25px;
}

.text span {
  display: flex;
  border-radius: 15%;
}

.text span:nth-child(1) {
  animation-name: light1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light1 {
  0% {
    color: rgb(255, 0, 0);
    text-shadow:
      0 0 25px rgb(255, 0, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  9% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(2) {
  animation-name: light2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light2 {
  0% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  9% {
    color: rgb(255, 132, 0);
    text-shadow:
      0 0 25px rgb(255, 132, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  18% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(3) {
  animation-name: light3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light3 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  18% {
    color: rgb(234, 255, 0);
    text-shadow:
      0 0 25px rgb(234, 255, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  27% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(4) {
  animation-name: light4;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light4 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  27% {
    color: rgb(0, 255, 0);
    text-shadow:
      0 0 25px rgb(0, 255, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  36% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(5) {
  animation-name: light5;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light5 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  36% {
    color: rgb(0, 255, 234);
    text-shadow:
      0 0 25px rgb(0, 255, 234),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  45% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(6) {
  animation-name: light6;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light6 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  45% {
    color: rgb(0, 0, 255);
    text-shadow:
      0 0 25px rgb(0, 0, 255),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  54% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  63% {
    color: rgb(78, 79, 78);
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(7) {
  animation-name: light7;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light7 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  54% {
    color: rgb(174, 0, 255);
    text-shadow:
      0 0 25px rgb(174, 0, 255),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  63% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  72% {
    color: rgb(78, 79, 78);
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(8) {
  animation-name: light8;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light8 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  63% {
    color: rgb(255, 0, 0);
    text-shadow:
      0 0 25px rgb(255, 0, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  72% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  81% {
    color: rgb(78, 79, 78);
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(9) {
  animation-name: light9;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light9 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  72% {
    color: rgb(255, 0, 0);
    text-shadow:
      0 0 25px rgb(255, 0, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  81% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  90% {
    color: rgb(78, 79, 78);
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(10) {
  animation-name: light10;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light10 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  72% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  81% {
    color: rgb(255, 132, 0);
    text-shadow:
      0 0 25px rgb(255, 132, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  90% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  100% {
    color: rgb(78, 79, 78);
  }
}

.text span:nth-child(11) {
  animation-name: light11;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes light11 {
  0% {
    color: rgb(78, 79, 78);
  }
  9% {
    color: rgb(78, 79, 78);
  }
  18% {
    color: rgb(78, 79, 78);
  }
  27% {
    color: rgb(78, 79, 78);
  }
  36% {
    color: rgb(78, 79, 78);
  }
  45% {
    color: rgb(78, 79, 78);
  }
  54% {
    color: rgb(78, 79, 78);
  }
  63% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  72% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  81% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
  90% {
    color: rgb(234, 255, 0);
    text-shadow:
      0 0 25px rgb(234, 255, 0),
      20px 20px 20px rgb(255, 0, 0),
      40px 40px 20px rgb(0, 255, 0),
      60px 60px 20px rgb(0, 0, 255);
  }
  100% {
    color: rgb(78, 79, 78);
    text-shadow: none;
  }
}