@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #182C61;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: bgcolor 5s infinite linear;
}

@keyframes bgcolor {
  0% {
    background-color: #182C61;
  }
  25% {
    background-color: #2C3A47;
  }
  50% {
    background-color: #2c3e50;
  }
  75% {
    background-color: #006266;
  }
  100% {
    background-color: #182C61;
  }
}
.spinner + h3 {
  color: white;
  font-weight: 300;
  margin-top: 10px;
  user-select: none;
}

.spinner {
  height: 50px;
  width: 50px;
}
.spinner .ball {
  width: 38px;
  height: 38px;
  position: absolute;
  opacity: 0;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform: rotate(225deg);
}
.spinner .ball::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
}

@keyframes rotate {
  0% {
    opacity: 1;
    transform: rotate(225deg);
    animation-timing-function: ease-out;
  }
  7% {
    transform: rotate(345deg);
    animation-timing-function: linear;
  }
  30% {
    transform: rotate(455deg);
    animation-timing-function: ease-in-out;
  }
  39% {
    transform: rotate(690deg);
    opacity: 1;
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(815deg);
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(945deg);
  }
  76% {
    transform: rotate(945deg);
    opacity: 0;
  }
  100% {
    transform: rotate(945deg);
    opacity: 0;
  }
}
.spinner .ball:nth-child(2) {
  animation-delay: 240ms;
}

.spinner .ball:nth-child(3) {
  animation-delay: 480ms;
}

.spinner .ball:nth-child(4) {
  animation-delay: 720ms;
}

.spinner .ball:nth-child(5) {
  animation-delay: 960ms;
}