body {
  margin: 0 auto;
}
body,
html {
  height: 100%;
}
body {
  background-color: black;
  color: #ff0066;
  font-family: sans-serif;
}
main {
  width: 800px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  margin-top: -25vh;
}
main h1 {
  position: absolute;
  top: -3.5em;
  width: 100%;
  text-align: center;
}
main h1 .dot1 {
  -webkit-animation: 3s fade1 infinite;
  animation: 3s fade1 infinite;
}
main h1 .dot2 {
  -webkit-animation: 3s fade2 infinite;
  animation: 3s fade2 infinite;
}
main h1 .dot3 {
  -webkit-animation: 3s fade3 infinite;
  animation: 3s fade3 infinite;
}
@keyframes fade1 {
  0%,
  20% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}
@keyframes fade2 {
  0%,
  40% {
    opacity: 0;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes fade3 {
  0%,
  60% {
    opacity: 0;
  }
  80%,
  100% {
    opacity: 1;
  }
}
#balls {
  height: 50vh;
}
#balls > div {
  background-color: #ff0066;
  border-radius: 100%;
  width: 26.66666667px;
  height: 26.66666667px;
  float: left;
  margin: 0 3.33333333px;
  margin-top: -13.33333333px;
  position: relative;
}
#balls > div:nth-child(24) {
  -webkit-animation: 2.14285714s moving ease-in-out infinite alternate;
  animation: 2.14285714s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(23) {
  -webkit-animation: 1.93548387s moving ease-in-out infinite alternate;
  animation: 1.93548387s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(22) {
  -webkit-animation: 1.76470588s moving ease-in-out infinite alternate;
  animation: 1.76470588s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(21) {
  -webkit-animation: 1.62162162s moving ease-in-out infinite alternate;
  animation: 1.62162162s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(20) {
  -webkit-animation: 1.5s moving ease-in-out infinite alternate;
  animation: 1.5s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(19) {
  -webkit-animation: 1.39534884s moving ease-in-out infinite alternate;
  animation: 1.39534884s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(18) {
  -webkit-animation: 1.30434783s moving ease-in-out infinite alternate;
  animation: 1.30434783s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(17) {
  -webkit-animation: 1.2244898s moving ease-in-out infinite alternate;
  animation: 1.2244898s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(16) {
  -webkit-animation: 1.15384615s moving ease-in-out infinite alternate;
  animation: 1.15384615s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(15) {
  -webkit-animation: 1.09090909s moving ease-in-out infinite alternate;
  animation: 1.09090909s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(14) {
  -webkit-animation: 1.03448276s moving ease-in-out infinite alternate;
  animation: 1.03448276s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(13) {
  -webkit-animation: 0.98360656s moving ease-in-out infinite alternate;
  animation: 0.98360656s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(12) {
  -webkit-animation: 0.9375s moving ease-in-out infinite alternate;
  animation: 0.9375s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(11) {
  -webkit-animation: 0.89552239s moving ease-in-out infinite alternate;
  animation: 0.89552239s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(10) {
  -webkit-animation: 0.85714286s moving ease-in-out infinite alternate;
  animation: 0.85714286s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(9) {
  -webkit-animation: 0.82191781s moving ease-in-out infinite alternate;
  animation: 0.82191781s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(8) {
  -webkit-animation: 0.78947368s moving ease-in-out infinite alternate;
  animation: 0.78947368s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(7) {
  -webkit-animation: 0.75949367s moving ease-in-out infinite alternate;
  animation: 0.75949367s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(6) {
  -webkit-animation: 0.73170732s moving ease-in-out infinite alternate;
  animation: 0.73170732s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(5) {
  -webkit-animation: 0.70588235s moving ease-in-out infinite alternate;
  animation: 0.70588235s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(4) {
  -webkit-animation: 0.68181818s moving ease-in-out infinite alternate;
  animation: 0.68181818s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(3) {
  -webkit-animation: 0.65934066s moving ease-in-out infinite alternate;
  animation: 0.65934066s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(2) {
  -webkit-animation: 0.63829787s moving ease-in-out infinite alternate;
  animation: 0.63829787s moving ease-in-out infinite alternate;
}
#balls > div:nth-child(1) {
  -webkit-animation: 0.6185567s moving ease-in-out infinite alternate;
  animation: 0.6185567s moving ease-in-out infinite alternate;
}
@-webkit-keyframes moving {
  from {
    top: 0%;
  }
  to {
    top: 100%;
  }
}
@keyframes moving {
  from {
    top: 0%;
  }
  to {
    top: 100%;
  }
}