ul
  li: a(href="https://twitter.com/mds") Twitter
  li: a(href="https://instagram.com/mds") Instagram
  li: a(href="https://dribbble.com/mds") Dribbble
  li: a(href="https://github.com/mds") Github
  li: a(href="https://youtube.com/mattdsmith") YouTube
  li: a(href="https://medium.com/@mds") Medium
  

$neon-green: #39ff14 // the color we're using in three different places. aren't variables great!?

body
  background: black // black background
  font-family: sans-serif // because who ever wants times new roman?
  padding: 2rem 4rem // makes it not all crammed against the edge

li
  padding: .5rem 0 // gives a little vertical space between the text
  font-size: 1.25rem // font size 🤓
  list-style-type: none // removes the default bullets on the left

a
  color: $neon-green // color variable
  text-decoration: none // remove the default underline on links
  position: relative // necessary so we can absolutely position the before/after elements
  padding: 2px 2px // gives a teensy bit of breathing room around the text
  transition: all .2s ease-out // for smooth transitions

  // this is the underline
  &:after 
    content: " " // this makes the pseudo element show up for some reason
    width: 100% // full width underline
    height: 1px // because it's a 1px tall line
    background: $neon-green // color variable
    position: absolute // this gives us the ability to position in within its relative container
    right: 0 // when we change the width it will go where it's anchored, so we set it on the right 
    bottom: 0 // because it's on the bottom
    transition: all .2s ease-out // smooth transition

  // this is the blinking block
  &:before
    content: " " // this makes the pseudo element show up for some reason
    width: 4px // this is how wide we want the block
    height: 4px // this is how tall we want the block
    background: $neon-green // color variable
    position: absolute // gives us the ability to position in it relative to the parent
    right: -4px // it's 4px wide so we're offsetting the position by the same amount of its width
    bottom: 0 // position at the bottom
    opacity: 0 // we want to hide it by default

  // the stuff we want to happen when we hover the link
  &:hover
    background: rgba($neon-green, .1) // subtle bg color transition
    transition: all .1s ease-out // smooth transition
    padding: 2px 8px // animates negative space on the left and right of the text
    &:after
      width: 0px // animates the line to zero width to the right
      transition: all .1s ease-out // smooth transition
    &:before
      opacity: 1
      animation: blink .4s infinite .1s // sets the animation on the blinking square
      transition: all .1s ease-out // smooth transition

// the animation for the blinking before element
@keyframes blink
  0%
    opacity: 1 // start off showing
  50%
    opacity: 0 // then go invisible
  100%
    opacity: 1 // then show again