%ul#content
  %li L
  %li O
  %li A
  %li D
  %li I
  %li N
  %li G

@import 'compass';
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html { background-color: black; }

// Can set all color values from here
$glow: rgba(255, 255, 255, 1);
$glow-font: rgba(255, 255, 255, 0.7);
$glow-bounce: rgba(255, 255, 255, 0.26);
$glass: rgba(255, 255, 255, 0.5);

// Will increase / decrease animation duration
$dur : 4.5;

@mixin on-state()
{
  color: $glow-bounce;
  -webkit-text-stroke-color: $glow;
  text-shadow: 0 0 80px $glow, 0 0 40px $glow;
}

@mixin super-on-state()
{
  color: $glow-font;
  -webkit-text-stroke-color: $glow;
  text-shadow: 0 0 400px $glow, 0 0 100px $glow, 0 0 80px $glow, 0 0 40px $glow;
}

@mixin off-state()
{
  color: black;
  -webkit-text-stroke-color: $glass;
  text-shadow: none;
}

@mixin animation-timing($order)
{
  animation-delay: ($order * 0.25s);
  animation-duration: $dur * 1s;
}

@mixin animation-common()
{
  0% { @include off-state(); }

  #{1.0/$dur * 100%} { @include off-state(); }
  #{1.08/$dur * 100%} { @include on-state(); }
  #{1.081/$dur * 100%} { @include off-state(); }
  #{1.161/$dur * 100%} { @include on-state(); }
  #{1.162/$dur * 100%} { @include off-state(); }
  #{1.242/$dur * 100%} { @include on-state();}
  #{1.243/$dur * 100%} { @include off-state(); }
  #{1.323/$dur * 100%} { @include on-state(); }
}

@keyframes flickerL
{
  @include animation-common();
  100% { @include on-state(); }
}

@keyframes flickerO
{
  @include animation-common();

  #{3.27/$dur * 100% } { @include super-on-state(); }
  #{3.30/$dur * 100% } { @include off-state(); }
  #{3.33/$dur * 100% } { @include super-on-state(); }
  #{3.36/$dur * 100% } { @include off-state(); }
  #{3.39/$dur * 100% } { @include super-on-state(); }
  #{3.41/$dur * 100% } { @include off-state(); }
  
  #{($dur - 0.25)/$dur * 100%} { @include off-state(); }
  100% { @include off-state(); }
}

@keyframes flickerA
{
  @include animation-common();

  #{($dur - 0.501)/$dur * 100%} { @include on-state(); }
  #{($dur - 0.5)/$dur * 100%} { @include off-state(); }
  100% { @include off-state(); }
}

@keyframes flickerD
{
  @include animation-common();

  #{($dur - 0.751)/$dur * 100%} { @include on-state(); }
  #{($dur - 0.75)/$dur * 100%} { @include off-state(); }
  100% { @include off-state(); }
}

@keyframes flickerI
{
  @include animation-common();

  #{($dur - 1.001)/$dur * 100%} { @include on-state(); }
  #{($dur - 1.0)/$dur * 100%} { @include off-state(); }
  100% { @include off-state(); }
}

@keyframes flickerN
{
  @include animation-common();

  #{($dur - 1.251)/$dur * 100%} { @include on-state(); }
  #{($dur - 1.25)/$dur * 100%} { @include off-state(); }
  100% { @include off-state(); }
}

@keyframes flickerG
{
  @include animation-common();

  #{($dur - 1.501)/$dur * 100%} { @include on-state(); }
  #{($dur - 1.5)/$dur * 100%}{ @include off-state(); }
  100% { @include off-state(); }
}

#content
{
  position: absolute;
    top: 50%;
  left: 0;
  right: 0;
  width: auto;
  height: 5vw;
    transform: translateY(-50%);
  margin: 0 auto;
  text-align: center;

  li 
  { 
    display: inline-block;
    position: relative;
    padding: 0 1%;
    margin: 0 0.5%;
    width: 5vw;
    height: 5vw;
    list-style: none;
    font-family: 'Varela Round';
    font-weight: bolder;
    font-size: 5vw;
    color: black;

    -webkit-text-stroke-width: 0.045vw;
    -webkit-text-stroke-color: $glass;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }

  li:nth-child(1) { animation-name: flickerL; @include animation-timing(0); }
  li:nth-child(2) { animation-name: flickerO; @include animation-timing(1); }
  li:nth-child(3) { animation-name: flickerA; @include animation-timing(2); }
  li:nth-child(4) { animation-name: flickerD; @include animation-timing(3); }
  li:nth-child(5) { animation-name: flickerI; @include animation-timing(4); }
  li:nth-child(6) { animation-name: flickerN; @include animation-timing(5); }
  li:nth-child(7) { animation-name: flickerG; @include animation-timing(6); }
}