.spinner {
  position: relative;
  width: 3em;
  height: 3em;
  transform: rotate(165deg); }
  .spinner:before, .spinner:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.25em;
    transform: translate(-50%, -50%); }
  .spinner:before {
    animation: before 2s infinite; }
  .spinner:after {
    animation: after 2s infinite; }

@keyframes before {
  0% {
    width: 0.5em;
    box-shadow: 1.25em -0.75em rgba(225, 20, 98, 0.75), -1.25em 0.75em rgba(111, 202, 220, 0.75); }
  35% {
    width: 3em;
    box-shadow: 0 -0.75em rgba(225, 20, 98, 0.75), 0 0.75em rgba(111, 202, 220, 0.75); }
  70% {
    width: 0.5em;
    box-shadow: -1.25em -0.75em rgba(225, 20, 98, 0.75), 1.25em 0.75em rgba(111, 202, 220, 0.75); }
  100% {
    box-shadow: 1.25em -0.75em rgba(225, 20, 98, 0.75), -1.25em 0.75em rgba(111, 202, 220, 0.75); } }
@keyframes after {
  0% {
    height: 0.5em;
    box-shadow: 0.75em 1.25em rgba(61, 184, 143, 0.75), -0.75em -1.25em rgba(233, 169, 32, 0.75); }
  35% {
    height: 3em;
    box-shadow: 0.75em 0 rgba(61, 184, 143, 0.75), -0.75em 0 rgba(233, 169, 32, 0.75); }
  70% {
    height: 0.5em;
    box-shadow: 0.75em -1.25em rgba(61, 184, 143, 0.75), -0.75em 1.25em rgba(233, 169, 32, 0.75); }
  100% {
    box-shadow: 0.75em 1.25em rgba(61, 184, 143, 0.75), -0.75em -1.25em rgba(233, 169, 32, 0.75); } }
/**
 * Attempt to center the whole thing!
 */
html, body {
  height: 100%; }

.spinner {
  position: absolute;
  top: calc(50% - 1.5em);
  left: calc(50% - 1.5em); }