html {
    height: 100%;
   @include background(linear-gradient( black, #3d3d3d));
} 


svg {
  width: 200px;
  margin:50px auto;
  display : block;
}

$dash: 150;
$time: 2s;

$flash: 2s;
$delay: 0.5s;

@include keyframes(draw){
  0% { stroke:  #42c0ff} 
  100% {stroke-dashoffset: $dash * 2; }
}

@include keyframes(letterflash){
  0% { fill:  #42c0ff} 
  100% {fill: #ffa100}
}

@include keyframes(spinnerflash){
  0% { stroke:  #42c0ff} 
  100% {stroke: #ffa100}
}



.circle {
  stroke-dasharray: $dash;
  @include animation(draw $time linear infinite);
}


.one,.two,.three,.four,.five,.six {
    @include animation(letterflash $flash ease-in-out infinite);
}
  

.six {
  @include animation-delay($delay)
}

.five {
@include animation-delay($delay - 0.1)
}

.four {
@include animation-delay( $delay - 0.2)
}
.three {
@include animation-delay( $delay - 0.3)
}
.two {
@include animation-delay( $delay - 0.4)
}

.one {
@include animation-delay( $delay - 0.5)
}