@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");

* {
  margin: 0%;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

body {
  background-color: black;

  height: 100vh;
  display: grid;
  place-content: center;
}

.loader {
  display: flex;
}

ul li {
  display: inline;
  font-size: 5rem;
  text-transform: uppercase;
  letter-spacing: 1rem;
  color: #484848;
  animation: pre-loading 3s linear infinite;
  font-family: "Indie Flower", cursive;
}

@keyframes pre-loading {
  0% {
    color: #484848;
    text-shadow: none;
  }

  20% {
    color: #484848;
    text-shadow: none;
  }

  40% {
    color: #fff900;
    text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
  }

  60% {
    color: #484848;
    text-shadow: none;
  }

  80% {
    color: #484848;
    text-shadow: none;
  }

  100% {
    color: #484848;
    text-shadow: none;
  }
}

ul li:nth-child(1) {
  animation-delay: 0.2s;
}
ul li:nth-child(2) {
  animation-delay: 0.4s;
}
ul li:nth-child(3) {
  animation-delay: 0.6s;
}
ul li:nth-child(4) {
  animation-delay: 0.8s;
}
ul li:nth-child(5) {
  animation-delay: 1s;
}
ul li:nth-child(6) {
  animation-delay: 1.2s;
}
ul li:nth-child(7) {
  animation-delay: 1.4s;
}