//=== VARIABLES ===

$color1: red;
$color2: orange;
$color3: yellow;
$color4: green;
$color5: blue;

//=== LAYOUT ===

body {
  background: #666; /* === the most EVIL gray === */
  padding: 3em; /* 48px/16px */
}

//=== THE X ===

.x {
  width: 5em; /* 48px/16px */
  height: 5em; /* 48px/16px */
  margin: 0 auto;
  position: relative;
  @include border-radius(50%);
  @include animation(spin 1s cubic-bezier(0,1,1,0) infinite);
  
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0.5em; /* 8px/16px */
    left: 2.25em; /* 36px/16px */
    width: 0.5em; /* 8px/16px */
    height: 75%;
    background: teal;
    @include border-radius(0.1875em); /*4px/16px*/
    @include animation(thecolorsduke 5s cubic-bezier(0,1,1,0) infinite);
  }
  
  &:before {
    @include rotate(45deg);
  }
  
  &:after {
    @include rotate(315deg);
  }
}

//=== ANIMATIONS ===

@include keyframes(spin) {
  from {  @include rotate(0deg);  }
  to {  @include rotate(360deg);  }
}

@include keyframes(thecolorsduke) {
  0% { background: $color1; }
  20% { background: $color1; }
  40% { background: $color2; }
  60% { background: $color3; }
  80% { background: $color4; }
  100% { background: $color5; }
}