body {
  background-color: rgb(17, 34, 51);
}

#ball {
  width: 25px;
  height: 25px;
  position: relative;
  background-color: rgb(100, 100, 100);
  border-radius: 50%;
  border: 1px solid white;
  z-index: 2;
  -webkit-animation: bounceBall 2s linear infinite;
  animation: bounceBall 2s linear infinite;
}

.ball-small {
  width: 7px;
  height: 7px;
  position: relative;
  background-color: rgb(75, 75, 75);
  border-radius: 50%;
  border: 1px solid white;
  -webkit-animation: bounceSmallBall 2s linear infinite;
  animation: bounceSmallBall 2s linear infinite;
}

#delay {
  -webkit-animation-delay: -99s;
  animation-delay: -99s;
}

#box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  overflow: hidden;
}

.box-small {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.box-tiny {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: colorPulse 2s infinite;
  animation: colorPulse 2s infinite;
}

.small-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: colorPulse 2s infinite;
  animation: colorPulse 2s infinite;
}

#one, #one-small, #one-tiny {
  top: 0px;
  left: 0px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#two, #two-small, #two-tiny {
  top: 0px;
  right: 0px;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#three, #three-small, #three-tiny {
  bottom: 0px;
  right: 0px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#four, #four-small, #four-tiny {
  bottom: 0px;
  left: 0px;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

@-webkit-keyframes bounceBall {
  0% {
    left: 0px;
    top: 0px;
  }
  
  25% {
    left: 171px;
    top: 0px;
  }
  
  50% {
    top: 171px;
    left: 171px;
  }
  
  75% {
    left: 0px;
    top: 171px;
  }
  
  100% {
    top: 0px;
    left: 0px;
  }
}

@keyframes bounceBall {
  0% {
    left: 0px;
    top: 0px;
  }
  
  25% {
    left: 171px;
    top: 0px;
  }
  
  50% {
    top: 171px;
    left: 171px;
  }
  
  75% {
    left: 0px;
    top: 171px;
  }
  
  100% {
    top: 0px;
    left: 0px;
  }
}

@-webkit-keyframes bounceSmallBall {
  0% {
    left: 0px;
    top: 0px;
  }
  
  25% {
    left: 90px;
    top: 0px;
  }
  
  50% {
    top: 90px;
    left: 90px;
  }
  
  75% {
    left: 0px;
    top: 90px;
  }
  
  100% {
    top: 0px;
    left: 0px;
  }
}

@keyframes bounceSmallBall {
  0% {
    left: 0px;
    top: 0px;
  }
  
  25% {
    left: 90px;
    top: 0px;
  }
  
  50% {
    top: 90px;
    left: 90px;
  }
  
  75% {
    left: 0px;
    top: 90px;
  }
  
  100% {
    top: 0px;
    left: 0px;
  }
}

@-webkit-keyframes colorPulse {
  from, to {
    background-color: rgba(200, 200, 200, 1);
  }
  
  50% {
    background-color: rgba(200, 200, 200, 0.2);
  }
}

@keyframes colorPulse {
  from, to {
    background-color: rgba(200, 200, 200, 1);
  }
  
  50% {
    background-color: rgba(200, 200, 200, 0.2);
  }
}