#asdfg
  -16.times do
    .circle

/* I did use sass but I wasn't sure if we could submit it using sass so I copy and pasted the compiled css */
body {
  background: #77c4d3;
}
#asdfg {
  width: 209px;
  height: 110px;
  margin: 20px auto;
  transform: scale(0.6);
}
#asdfg > .circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  box-sizing: border-box;
  position: absolute;
}
#asdfg > .circle:nth-of-type(odd) {
  animation: spinodd 5s linear infinite;
  left: 0px;
}

#asdfg > .circle:nth-of-type(even) {
  animation: spineven 5s linear infinite;
  left: 100px;
}
#asdfg > .circle:after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  top: -5px;
  left: 45px;
  animation: after 5s linear infinite;
}
#asdfg > .circle:nth-of-type(1), #asdfg > .circle:nth-of-type(1):after {
  animation-delay: -0.3125s;
}
#asdfg > .circle:nth-of-type(2), #asdfg > .circle:nth-of-type(2):after {
  animation-delay: -0.625s;
}
#asdfg > .circle:nth-of-type(3), #asdfg > .circle:nth-of-type(3):after {
  animation-delay: -0.9375s;
}
#asdfg > .circle:nth-of-type(4), #asdfg > .circle:nth-of-type(4):after {
  animation-delay: -1.25s;
}
#asdfg > .circle:nth-of-type(5), #asdfg > .circle:nth-of-type(5):after {
  animation-delay: -1.5625s;
}
#asdfg > .circle:nth-of-type(6), #asdfg > .circle:nth-of-type(6):after {
  animation-delay: -1.875s;
}
#asdfg > .circle:nth-of-type(7), #asdfg > .circle:nth-of-type(7):after {
  animation-delay: -2.1875s;
}
#asdfg > .circle:nth-of-type(8), #asdfg > .circle:nth-of-type(8):after {
  animation-delay: -2.5s;
}
#asdfg > .circle:nth-of-type(9), #asdfg > .circle:nth-of-type(9):after {
  animation-delay: -2.8125s;
}
#asdfg > .circle:nth-of-type(10), #asdfg > .circle:nth-of-type(10):after {
  animation-delay: -3.125s;
}
#asdfg > .circle:nth-of-type(11), #asdfg > .circle:nth-of-type(11):after {
  animation-delay: -3.4375s;
}
#asdfg > .circle:nth-of-type(12), #asdfg > .circle:nth-of-type(12):after {
  animation-delay: -3.75s;
}
#asdfg > .circle:nth-of-type(13), #asdfg > .circle:nth-of-type(13):after {
  animation-delay: -4.0625s;
}
#asdfg > .circle:nth-of-type(14), #asdfg > .circle:nth-of-type(14):after {
  animation-delay: -4.375s;
}
#asdfg > .circle:nth-of-type(15), #asdfg > .circle:nth-of-type(15):after {
  animation-delay: -4.6875s;
}
#asdfg > .circle:nth-of-type(16), #asdfg > .circle:nth-of-type(16):after {
  animation-delay: -5s;
}
@keyframes spinodd {
  0% {transform: rotate(90deg);}
  100% {transform: rotate(450deg);}
}
@keyframes spineven {
  0% {transform: rotate(-90deg);}
  100% {transform: rotate(-450deg);}
}
@keyframes after {
  0% {background: #f8b9c2;}
  5% {background: #f8b9c2;}
  40% {background: white;}
  60% {background: white;}
  95% {background: #f8b9c2;}
  100% {background: #f8b9c2;}
}