@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body { background: rgba(31, 40, 48, 1); }

.c {
  @include centerer;
}

$s_s: .25;
.s {
  $s: 1;
  @while $s < 100 {
    &:nth-child(#{$s}) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -1 * (($s_s + ($s / 4)) / 2) + em;
      margin-left: -1 * (($s_s + ($s / 4)) / 2) + em;
      border: 1px solid rgba(random(255), random(255), random(255), 1);
      width: ($s_s + ($s / 4)) + em;
      height: ($s_s + ($s / 4)) + em;
      @if $s % 2 == 0 {
        animation: rotate_cw_#{$s} 6s infinite linear;
      }
      @else {
        animation: rotate_ccw_#{$s} 6s infinite linear;
      }
      animation-delay: ($s * .1) + s;
    }
    $s: $s + 1;
  }
}

$a: 1;
@while $a < 100 {
  @if $a % 2 == 0 {
    @keyframes rotate_cw_#{$a} {
      25%{
        border: 1px solid orange;
      }
      50% {
        border: 1px solid rgba(random(255), random(255), random(255), (random(10) / 10));
      }
      75%{
        border: 1px solid red;
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
  @else {
    @keyframes rotate_ccw_#{$a} {
      25%{
        border: 1px solid purple;
      }
      50% {
        border: 2px solid rgba(random(255), random(255), random(255), (random(10) / 10));
      }
      75%{
        border: 1px solid cyan;
      }
      100% {
        transform: rotate(-360deg);
      }
    }
  }
  $a: $a + 1;
}