<article>
  <pre class="error_404"> ## :::::::::::: ##### ::::: ## :::::
 ## :: ## ::::: ## . ## :::: ## :: ##
 ## :: ## :::: ## ::: ## ::: ## :: ##
 ## :: ## :::: ## ::: ## ::: ## :: ##
 ######### ::: ## ::: ## ::: #########
 ..... ## ::::. ## : ## ::::...... ## 
 ::::: ## :::::. ##### ::::::::::: ## </pre>
</article>

@import "compass/css3";

$color-alpha: #000;

$list-alpha: 
  #e10821, 
  #f1950d,
  #e1dc14,
  #97bf13,
  #33a9dc,
  #096db1
;

$unit-alpha: length($list-alpha);
$unit-beta: 1.25s;
$unit-gamma: 100% / ($unit-alpha);

html {
  overflow: hidden;
}

article {
  @extend %center;
}

.error_404 {
  font-weight: bold;
  font-size: 2em;
  
  span {   
    @for $i from 1 through $unit-alpha {
      &:nth-child(#{$unit-alpha}n+#{$i}) {
        @include animation(candy linear $unit-beta infinite forwards (-$unit-beta / $unit-alpha * $i));
      }
    }
  }
}

@include keyframes(candy) {
    @for $i from 1 through ($unit-alpha + 1) {
      #{$unit-gamma * ($i - 1)} {
        color: darken(nth($list-alpha, ($i % $unit-alpha) + 1), 15%);
      }
    }
}

/**
 *
 * synoa 404
 * 
 *
 * An animated 404 ascii text for the synoa.de
 * 404 error page. 
 *
 *
 * "nth-letter"-something is provided by lettering.js
 * -> every letter is wrapped into a span!
 * http://letteringjs.com
 *
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */


/* Lettering.JS 0.6.1 by Dave Rupert  - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);  


$(".error_404").lettering();