%section
  %h1 Inline Link Styles
  %p Instead of sticking with the boring old  <a class="underline" href="#">underline</a> and <a class="color" href="#">color switching</a> hover effects, why not go all out?
  %p Maybe try using a <a href="#" class="threed">3D link style</a>, or a <a href="#" class="highlight">highlighter</a> effect. What if you want to keep <a href="#" class="animated-underline">links animating</a> while you're hovered over them, or give them a <a href="#" class="pulse">pulse</a>? You can! You can even go full <a href="#" class="chameleon">chameleon</a> all over your links. You can <a href="#" class="flip">flip</a> or <a href="#" class="spin">spin</a> them, or separate the <a href="#" class="shimmer"><span>l</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>s</span></a> for some cool <a href="#" class="wave"><span>e</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span><span>s</span></a> if you really want to. Honestly, though, the best one is <a href="#" class="chameleon3d">3D chameleon</a>.
  %p And, if you're feeling really crazy, you combine many effects <a href="#" class="threed chameleon highlight flip">like this</a>, but don't.

$l: #ECBE13
$bg: #046D8B

@function s($d, $a, $c)
  @return 0px #{$d}px 0 darken($c, $a)

body
  padding: 25px 50px
  background: $bg
  font-family: 'Bitter', serif
section
  margin-bottom: 50px
h1
  text-align: center
  color: #fff
  font-size: 6vw
  text-shadow: s(1,10%,#fff), s(2,25%,#fff), s(3,40%,#fff)
h2
  color: #fff
  font-size: 4vw
  margin-bottom: 0
  text-shadow: s(1,20%,#fff), s(2,25%, #fff)
p
  font-size: 2.5vw
  color: #fff
  line-height: 1.5
  margin-bottom: 25px
  text-align: justify
  transition: line-height 0.5s
a
  color: #fff
  line-height: 1
  text-decoration: none
  transition: all 0.25s
  
a.underline
  text-decoration: underline
  &:hover
    text-decoration: none
a.color
  color: $l
  transition: none
  &:hover
    transition: none
    color: #fff
a.threed
  position: relative
  bottom: 0
  color: $l
  font-weight: 700
  text-decoration: none
  text-shadow: 0 0 0 $l
  transition: all 0.1s
  &:hover
    bottom: 3px
    text-shadow: s(1,10%,$l), s(2,12%,$l), s(3,14%,$l)
    transition: all 0.1s
  &:active
    bottom: 0
    text-shadow: 0 0 0 $l
    transition: all 0.15s
a.highlight
  color: darken($bg, 20%)
  position: relative
  &:before
    position: absolute
    left: 0
    top: 0
    bottom: 0
    right: 100%
    background: $l
    z-index: -1
    content: ''
    transition: right 0.25s
  &:hover:before
    right: 0
  
a.animated-underline
  position: relative
  color: darken($bg, 10%)
  &:hover
    color: darken($bg, 20%)
    &:before
      height: 2px
      bottom: -5px
      position: absolute
      background: darken($bg, 20%)
      content: ''
      animation: brickbreaker 2s infinite

a.chameleon
  color: $l
  font-weight: 700
  &:hover
    animation: chameleon 4s infinite
a.chameleon3d
  color: $l
  font-weight: 700
  position: relative
  &:hover
    animation: colorChameleon 4s infinite
a.pulse
  font-style: italic
  letter-spacing: 0.5px
  &:hover
    animation: pulse 1.5s infinite

a.flip, a.spin
  color: darken($bg, 20%)
  padding: 1px 3px
  transform: rotateX(0deg)
  &:hover
    color: #fff
    transform: rotateX(360deg)
    background: darken($bg, 20%)
    transition: all 1s
a.spin
  &:hover
    transform: rotateY(360deg)
a.shimmer
  color: $l
  &:hover span
    animation: shimmer 2s infinite
    &:nth-child(2)
      animation-delay: 0.25s
    &:nth-child(3)
      animation-delay: 0.50s
    &:nth-child(4)
      animation-delay: 0.75s
    &:nth-child(5)
      animation-delay: 1.00s
    &:nth-child(6)
      animation-delay: 1.25s
    &:nth-child(7)
      animation-delay: 1.50s
a.wave
  color: darken($bg, 20%)
  &:hover span
    animation: wave 1s infinite
    
    &:nth-child(2)
      animation-delay: 0.05s
    &:nth-child(3)
      animation-delay: 0.1s
    &:nth-child(4)
      animation-delay: 0.15s
    &:nth-child(5)
      animation-delay: 0.2s
    &:nth-child(6)
      animation-delay: 0.25s
    &:nth-child(7)
      animation-delay: 0.3s
  
@keyframes brickbreaker
  0%
    left: 0
    right: 25%
  50%
    left: 25%
    right: 0
  100%
    left: 0
    right: 25%
@keyframes chameleon
  0%
    color: $l
  33%
    color: #93A42A
  66%
    color: #2FB8AC
  100%
    color: $l
@keyframes colorChameleon
  0%
    color: $l
    text-shadow: s(1,10%,$l), s(2,12%,$l), s(3,14%,$l)
  33%
    color: #93A42A
    text-shadow: s(1,10%,#93A42A), s(2,12%,#93A42A), s(3,14%,#93A42A)
  66%
    color: #2FB8AC
    text-shadow: s(1,10%,#2FB8AC), s(2,12%,#2FB8AC), s(3,14%,#2FB8AC)  
  100%
    color: $l
    text-shadow: s(1,10%,$l), s(2,12%,$l), s(3,14%,$l)
  
  
@keyframes pulse
  0%
    opacity: 1
  50%
    opacity: 0.5
  100%
    opacity: 1
@keyframes shimmer
  0%
    opacity: 1
  50%
    opacity: 0.25
  100%
    opacity: 1
@keyframes wave
  0%
    transform: translateY(0px)
  50%
    transform: translateY(-5px)
  100%
    transform: translateY(0px)