@font-face {
  font-family: 'Pixeldown';
  src: url(pixeldown.ttf);
}

@font-face {
  font-family: 'Daydream';
  src: url(Daydream.ttf);
}

@font-face {
  font-family: 'Edit Undo';
  src: url(edunline.ttf);
}

@keyframes rainbow {
  0% {
    transform: translate(0, 0em);
    text-shadow:
      0em 0em 0 #FF0000,
      0em 0em 0 #FFAA00,
      0em 0em 0 #FFFF00,
      0em 0em 0 #00FF00,
      0em 0em 0 #00AAFF,
      0em 0em 0 #AA00FF;
  }
  25%, 75% {
    transform: translate(0, -0.583em);
    text-shadow:
      0em 0.083em 0 #FF0000,
      0em 0.166em 0 #FFAA00,
      0em 0.25em 0 #FFFF00,
      0em 0.333em 0 #00FF00,
      0em 0.5em 0 #00AAFF,
      0em 0.583em 0 #AA00FF;
  }
  100% {
    transform: translate(0, 0em);
    text-shadow: 
      0em 0em 0 #FF0000,
      0em 0em 0 #FFAA00,
      0em 0em 0 #FFFF00,
      0em 0em 0 #00FF00,
      0em 0em 0 #00AAFF,
      0em 0em 0 #AA00FF;
  }
}

#logo .shader b {
  display: inline-block;
  font-family: 'Daydream';
  color: white;
  text-transform: uppercase;
  filter:
    drop-shadow(0px 0.04em 0px black)
    drop-shadow(0px -0.04em 0px black)
    drop-shadow(0.04em 0px 0px black)
    drop-shadow(-0.04em 0px 0px black);

  animation-duration: 3s;
  animation-name: rainbow;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

#logo .shader b:nth-child(1) {
  animation-delay: 0s;
}
#logo .shader b:nth-child(2) {
  animation-delay: 0.15s;
}
#logo .shader b:nth-child(3) {
  animation-delay: 0.3s;
}
#logo .shader b:nth-child(4) {
  animation-delay: 0.45s;
}
#logo .shader b:nth-child(5) {
  animation-delay: 0.6s;
}
#logo .shader b:nth-child(6) {
  animation-delay: 0.75s;
}


@keyframes grow {
  0% {
    transform: translate(0, 0em);
    text-shadow:
      0em 0em 0 #ADB5BD,
      0em 0em 0 #6C757D,
      0em 0em 0 #495057,
      0em 0em 0 #343A40,
      0em 0em 0 #212529;
  }
  100% {
    transform: translate(0, -0.25em);
    text-shadow:
      0em 0.05em 0 #ADB5BD,
      0em 0.1em 0 #6C757D,
      0em 0.15em 0 #495057,
      0em 0.2em 0 #343A40,
      0em 0.25em 0 #212529;
  }
}

@keyframes bump {
  0%, 45% {
    transform: translate(0, -0.25em);
    text-shadow:
      0em 0.05em 0 #ADB5BD,
      0em 0.1em 0 #6C757D,
      0em 0.15em 0 #495057,
      0em 0.2em 0 #343A40,
      0em 0.25em 0 #212529;
  }
  50% {
    transform: translate(0, -0.1em);
    text-shadow:
      0em 0.0em 0 #ADB5BD,
      0em 0.0em 0 #6C757D,
      0em 0.0em 0 #495057,
      0em 0.05em 0 #343A40,
      0em 0.1em 0 #212529;
  }
  55%, 100% {
    transform: translate(0, -0.25em);
    text-shadow:
      0em 0.05em 0 #ADB5BD,
      0em 0.1em 0 #6C757D,
      0em 0.15em 0 #495057,
      0em 0.2em 0 #343A40,
      0em 0.25em 0 #212529;
  }
}

#logo {
  display: inline-block;
}

#logo .stacker {
  float: right;
}

#logo .stacker b {
  display: inline-block;
  font-family: 'Edit Undo';
  font-size: 1.25em;
  line-height: 0.5em;
  color: white;
  text-transform: uppercase;
  filter:
    drop-shadow(0px 0.04em 0px black)
    drop-shadow(0px -0.04em 0px black)
    drop-shadow(0.04em 0px 0px black)
    drop-shadow(-0.04em 0px 0px black);
  
  animation-duration: 0.5s, 3s;
  animation-name: grow, bump;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275), ease-in-out;
  animation-delay: 1.5s, 3.25s;
}