body{
  background:black;
}

.dot {
  width:30px;
  height:30px;
  margin:0 auto;
  margin-top:30%;
  border-radius:50%;
  background:transparent;
  opacity:1;
  box-shadow:0px -37px 1px #40D47E, 37px 0px 1px #3498DB, 0px 37px 1px #F1C40F, -37px 0px 1px #E74C3C; 
  animation: dotMovement 5s ease-in-out infinite;
}

@keyframes dotMovement {
   0% {box-shadow:0px -37px 1px #40D47E, 37px 0px 1px #3498DB, 0px 37px 1px #F1C40F, -37px 0px 1px #E74C3C; }
  25%{box-shadow:0px -37px 20px #40D47E, 87px 0px 20px #3498DB, 0px 37px 20px #F1C40F, -87px 0px 20px #E74C3C;}
  50% {transform:rotate(720deg);box-shadow:0px -37px 1px #40D47E, 37px 0px 1px #3498DB, 0px 37px 1px #F1C40F, -37px 0px 1px #E74C3C; }
  75%{box-shadow:0px -37px 20px #40D47E, 87px 0px 20px #3498DB, 0px 37px 20px #F1C40F, -87px 0px 20px #E74C3C; }
   100% {box-shadow:0px -37px 1px #40D47E, 37px 0px 1px #3498DB, 0px 37px 1px #F1C40F, -37px 0px 1px #E74C3C; }
}