erroring.scss

$color: #43BBC5;

@function shadow($count, $width, $size, $offset) {
  $bs: ();
  @for $i from 0 through $count {
      $r: $width/2;
      $x: $r*cos($i*2*pi()/$count + $offset) + px;
      $y: $r*sin($i*2*pi()/$count + $offset) + px;
      $bs: $bs, $x $y 0px $size + px $color;
  }
  @return $bs;
}

.silvertech {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: .1em;
  height: .1em;
  margin: auto;
  @include border-radius(50%);
  @include experimental(animation, loading 3s alternate infinite cubic-bezier(0.215, 0.610, 0.355, 1.000));
}

@include keyframes(loading) { 
  0% { box-shadow: shadow(1, 0, 0, 0); @include transform(rotate(0deg)); }
  19% { box-shadow: shadow(1, 0, 0, 0); @include transform(rotate(0deg)); }
  20% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 0, 0); } 
  24% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 0, 0); }
  28% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 0, 4); }
  32% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 0, 0); }
  36% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 9, 0), shadow(1, 170, 0, 0); }
  40% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 9, 0), shadow(1, 170, 11, 0); @include transform(rotate(-405deg)); }
  100% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 9, 0), shadow(1, 170, 11, 0); @include transform(rotate(-405deg)); } 
}

@import 'compass/css3'; 
@import url(http://fonts.googleapis.com/css?family=Roboto:500);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);

body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Libre Baskerville', serif;
  color: #fff;
  background: #F2F2F2;
  
  &:hover {
    #info {
      opacity: 1;
    }
  }
  
  #info {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 20px;
    background: rgba(0,0,0,.75);
    opacity: 0;
    @include transition(opacity .6s cubic-bezier(0.215, 0.610, 0.355, 1.000));
  }
}



h1 {
  margin: 40px 0 10px;
  font: 70px/70px 'Roboto', sans-serif;
  text-align: center;
}

p {
  margin: 0;
  font-size: 12px;
  color: white; 
  text-align: center;
}

a {
  display: block;
  width: 50%;
  max-width: 200px;
  margin: 40px auto;
  padding: 4px 8px;
  font: 20px/24px 'Roboto', sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  background: $color;
  @include transition(background .25s cubic-bezier(0.215, 0.610, 0.355, 1.000), color .25s cubic-bezier(0.215, 0.610, 0.355, 1.000));
  
  &:hover {
    color: #3b3b3b;
    background: #9FDADC;
  }
}