.base {
  width: 300px;
  height: 300px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.circ {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 10px solid white;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.base .circ:nth-child(1) {
  transform: translate(75px, 0);
}
.base .circ:nth-child(2) {
  transform: translate(0, 75px);
}
.base .circ:nth-child(3) {
  transform: translate(-75px, 0);
}
.base .circ:nth-child(4) {
  transform: translate(0, -75px);
}
.base .circ:nth-child(5) {
  transform: translate(53.0325px, 53.0325px);
}
.base .circ:nth-child(6) {
  transform: translate(53.0325px, -53.0325px);
}
.base .circ:nth-child(7) {
  transform: translate(-53.0325px, 53.0325px);
}
.base .circ:nth-child(8) {
  transform: translate(-53.0325px, -53.0325px);
}

.base:nth-child(2) {
  transform: rotate(0.1turn);
}

.base:nth-child(2) {
  transform: rotate(0.2turn);
  animation: turn-2 6s ease-in-out infinite alternate;
  animation-duration: 3s;
}
@keyframes turn-2 {
  to {
    transform: rotate(0.25urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(2) .circ {
  background: rgba(0, 0, 0, 0.05);
}

.base:nth-child(3) {
  transform: rotate(0.3turn);
  animation: turn-3 6s ease-in-out infinite alternate;
  animation-duration: 4.5s;
}
@keyframes turn-3 {
  to {
    transform: rotate(0.375urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(3) .circ {
  background: rgba(0, 0, 0, 0.05);
}

.base:nth-child(4) {
  transform: rotate(0.4turn);
  animation: turn-4 6s ease-in-out infinite alternate;
  animation-duration: 6s;
}
@keyframes turn-4 {
  to {
    transform: rotate(0.5urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(4) .circ {
  background: rgba(0, 0, 0, 0.05);
}

.base:nth-child(5) {
  transform: rotate(0.5turn);
  animation: turn-5 6s ease-in-out infinite alternate;
  animation-duration: 7.5s;
}
@keyframes turn-5 {
  to {
    transform: rotate(0.625urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(5) .circ {
  background: rgba(0, 0, 0, 0.05);
}

.base:nth-child(6) {
  transform: rotate(0.6turn);
  animation: turn-6 6s ease-in-out infinite alternate;
  animation-duration: 9s;
}
@keyframes turn-6 {
  to {
    transform: rotate(0.75urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(6) .circ {
  background: rgba(0, 0, 0, 0.05);
}

.base:nth-child(7) {
  transform: rotate(0.7turn);
  animation: turn-7 6s ease-in-out infinite alternate;
  animation-duration: 10.5s;
}
@keyframes turn-7 {
  to {
    transform: rotate(0.875urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(7) .circ {
  background: rgba(0, 0, 0, 0.05);
}

.base:nth-child(8) {
  transform: rotate(0.8turn);
  animation: turn-8 6s ease-in-out infinite alternate;
  animation-duration: 12s;
}
@keyframes turn-8 {
  to {
    transform: rotate(1urn);
  }
  from {
    transform: rotate(0);
  }
}
.base:nth-child(8) .circ {
  background: rgba(0, 0, 0, 0.05);
}

/*# sourceMappingURL=styles.css.map */