#experiment-color-spiral {
  position: relative;
  padding: 50%;
  border-radius: 100%;
  max-width: 100%;
  overflow: hidden;
}
#experiment-color-spiral div {
  position: absolute;
  border-radius: 100%;
  border-top: 1px solid #444;
}
#experiment-color-spiral div:nth-child(1) {
  -webkit-animation: derp-1 10s infinite;
  animation: derp-1 10s infinite;
}
@keyframes derp-1 {
  0% {
    background: #00f500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 1%;
    left: 1%;
    right: 1%;
    bottom: 1%;
  }
  50% {
    background: #00f5ff;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 4%;
    left: 4%;
    right: 4%;
    bottom: 4%;
  }
  100% {
    background: #00f500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 1%;
    left: 1%;
    right: 1%;
    bottom: 1%;
  }
}
@-webkit-keyframes derp-1 {
  0% {
    background: #00f500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 1%;
    left: 1%;
    right: 1%;
    bottom: 1%;
  }
  50% {
    background: #00f5ff;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 4%;
    left: 4%;
    right: 4%;
    bottom: 4%;
  }
  100% {
    background: #00f500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 1%;
    left: 1%;
    right: 1%;
    bottom: 1%;
  }
}
#experiment-color-spiral div:nth-child(2) {
  -webkit-animation: derp-2 10s infinite;
  animation: derp-2 10s infinite;
}
@keyframes derp-2 {
  0% {
    background: #00eb00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 3%;
    left: 3%;
    right: 3%;
    bottom: 3%;
  }
  50% {
    background: #00ebff;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
  }
  100% {
    background: #00eb00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 3%;
    left: 3%;
    right: 3%;
    bottom: 3%;
  }
}
@-webkit-keyframes derp-2 {
  0% {
    background: #00eb00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 3%;
    left: 3%;
    right: 3%;
    bottom: 3%;
  }
  50% {
    background: #00ebff;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
  }
  100% {
    background: #00eb00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 3%;
    left: 3%;
    right: 3%;
    bottom: 3%;
  }
}
#experiment-color-spiral div:nth-child(3) {
  -webkit-animation: derp-3 10s infinite;
  animation: derp-3 10s infinite;
}
@keyframes derp-3 {
  0% {
    background: #00e100;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
  }
  50% {
    background: #00e1ff;
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
    top: 14%;
    left: 14%;
    right: 14%;
    bottom: 14%;
  }
  100% {
    background: #00e100;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
  }
}
@-webkit-keyframes derp-3 {
  0% {
    background: #00e100;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
  }
  50% {
    background: #00e1ff;
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
    top: 14%;
    left: 14%;
    right: 14%;
    bottom: 14%;
  }
  100% {
    background: #00e100;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
  }
}
#experiment-color-spiral div:nth-child(4) {
  -webkit-animation: derp-4 10s infinite;
  animation: derp-4 10s infinite;
}
@keyframes derp-4 {
  0% {
    background: #00d700;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 7%;
    left: 7%;
    right: 7%;
    bottom: 7%;
  }
  50% {
    background: #00d7ff;
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
    top: 19%;
    left: 19%;
    right: 19%;
    bottom: 19%;
  }
  100% {
    background: #00d700;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 7%;
    left: 7%;
    right: 7%;
    bottom: 7%;
  }
}
@-webkit-keyframes derp-4 {
  0% {
    background: #00d700;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 7%;
    left: 7%;
    right: 7%;
    bottom: 7%;
  }
  50% {
    background: #00d7ff;
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
    top: 19%;
    left: 19%;
    right: 19%;
    bottom: 19%;
  }
  100% {
    background: #00d700;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 7%;
    left: 7%;
    right: 7%;
    bottom: 7%;
  }
}
#experiment-color-spiral div:nth-child(5) {
  -webkit-animation: derp-5 10s infinite;
  animation: derp-5 10s infinite;
}
@keyframes derp-5 {
  0% {
    background: #00cd00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
  }
  50% {
    background: #00cdff;
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg);
    top: 24%;
    left: 24%;
    right: 24%;
    bottom: 24%;
  }
  100% {
    background: #00cd00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
  }
}
@-webkit-keyframes derp-5 {
  0% {
    background: #00cd00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
  }
  50% {
    background: #00cdff;
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg);
    top: 24%;
    left: 24%;
    right: 24%;
    bottom: 24%;
  }
  100% {
    background: #00cd00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
  }
}
#experiment-color-spiral div:nth-child(6) {
  -webkit-animation: derp-6 10s infinite;
  animation: derp-6 10s infinite;
}
@keyframes derp-6 {
  0% {
    background: #00c300;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 11%;
    left: 11%;
    right: 11%;
    bottom: 11%;
  }
  50% {
    background: #00c3ff;
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    top: 29%;
    left: 29%;
    right: 29%;
    bottom: 29%;
  }
  100% {
    background: #00c300;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 11%;
    left: 11%;
    right: 11%;
    bottom: 11%;
  }
}
@-webkit-keyframes derp-6 {
  0% {
    background: #00c300;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 11%;
    left: 11%;
    right: 11%;
    bottom: 11%;
  }
  50% {
    background: #00c3ff;
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    top: 29%;
    left: 29%;
    right: 29%;
    bottom: 29%;
  }
  100% {
    background: #00c300;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 11%;
    left: 11%;
    right: 11%;
    bottom: 11%;
  }
}
#experiment-color-spiral div:nth-child(7) {
  -webkit-animation: derp-7 10s infinite;
  animation: derp-7 10s infinite;
}
@keyframes derp-7 {
  0% {
    background: #00b900;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 13%;
    left: 13%;
    right: 13%;
    bottom: 13%;
  }
  50% {
    background: #00b9ff;
    -webkit-transform: rotate(1260deg);
    transform: rotate(1260deg);
    top: 34%;
    left: 34%;
    right: 34%;
    bottom: 34%;
  }
  100% {
    background: #00b900;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 13%;
    left: 13%;
    right: 13%;
    bottom: 13%;
  }
}
@-webkit-keyframes derp-7 {
  0% {
    background: #00b900;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 13%;
    left: 13%;
    right: 13%;
    bottom: 13%;
  }
  50% {
    background: #00b9ff;
    -webkit-transform: rotate(1260deg);
    transform: rotate(1260deg);
    top: 34%;
    left: 34%;
    right: 34%;
    bottom: 34%;
  }
  100% {
    background: #00b900;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 13%;
    left: 13%;
    right: 13%;
    bottom: 13%;
  }
}
#experiment-color-spiral div:nth-child(8) {
  -webkit-animation: derp-8 10s infinite;
  animation: derp-8 10s infinite;
}
@keyframes derp-8 {
  0% {
    background: #00af00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
  }
  50% {
    background: #00afff;
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
    top: 39%;
    left: 39%;
    right: 39%;
    bottom: 39%;
  }
  100% {
    background: #00af00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
  }
}
@-webkit-keyframes derp-8 {
  0% {
    background: #00af00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
  }
  50% {
    background: #00afff;
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
    top: 39%;
    left: 39%;
    right: 39%;
    bottom: 39%;
  }
  100% {
    background: #00af00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
  }
}
#experiment-color-spiral div:nth-child(9) {
  -webkit-animation: derp-9 10s infinite;
  animation: derp-9 10s infinite;
}
@keyframes derp-9 {
  0% {
    background: #00a500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 17%;
    left: 17%;
    right: 17%;
    bottom: 17%;
  }
  50% {
    background: #00a5ff;
    -webkit-transform: rotate(1620deg);
    transform: rotate(1620deg);
    top: 44%;
    left: 44%;
    right: 44%;
    bottom: 44%;
  }
  100% {
    background: #00a500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 17%;
    left: 17%;
    right: 17%;
    bottom: 17%;
  }
}
@-webkit-keyframes derp-9 {
  0% {
    background: #00a500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 17%;
    left: 17%;
    right: 17%;
    bottom: 17%;
  }
  50% {
    background: #00a5ff;
    -webkit-transform: rotate(1620deg);
    transform: rotate(1620deg);
    top: 44%;
    left: 44%;
    right: 44%;
    bottom: 44%;
  }
  100% {
    background: #00a500;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 17%;
    left: 17%;
    right: 17%;
    bottom: 17%;
  }
}
#experiment-color-spiral div:nth-child(10) {
  -webkit-animation: derp-10 10s infinite;
  animation: derp-10 10s infinite;
}
@keyframes derp-10 {
  0% {
    background: #009b00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 19%;
    left: 19%;
    right: 19%;
    bottom: 19%;
  }
  50% {
    background: #009bff;
    -webkit-transform: rotate(1800deg);
    transform: rotate(1800deg);
    top: 49%;
    left: 49%;
    right: 49%;
    bottom: 49%;
  }
  100% {
    background: #009b00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 19%;
    left: 19%;
    right: 19%;
    bottom: 19%;
  }
}
@-webkit-keyframes derp-10 {
  0% {
    background: #009b00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 19%;
    left: 19%;
    right: 19%;
    bottom: 19%;
  }
  50% {
    background: #009bff;
    -webkit-transform: rotate(1800deg);
    transform: rotate(1800deg);
    top: 49%;
    left: 49%;
    right: 49%;
    bottom: 49%;
  }
  100% {
    background: #009b00;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 19%;
    left: 19%;
    right: 19%;
    bottom: 19%;
  }
}