.header
  h1 Magic Line Menu
  
.menu
  .menu-item.current-menu-item
    h6 Home
    .wee
  .menu-item
    h6 Short
  .menu-item
    h6 Longer Navigation
  .menu-item
    h6 Random
  .menu-item
    h6 Follow
    
.me
  a(href="https://github.com/cmdeveloped" target="_blank")
    <i class="fab fa-github"></i>
  a(href="https://twitter.com/collinscode_" target="_blank")
    <i class="fab fa-twitter"></i>
  a(href="https://codepen.io/collinscode" target="_blank")
    <i class="fab fa-codepen"></i>
  a(href="https://linkedin.com/in/cmdeveloped" target="_blank")
    <i class="fab fa-linkedin-in"></i>

primaryfont = 'Montserrat', sans-serif

html
  body
    position relative
    background #ECE9E6  /* fallback for old browsers */
    background -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6)  /* Chrome 10-25, Safari 5.1-6 */
    background linear-gradient(to right, #FFFFFF, #ECE9E6) /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family primaryfont
    height 100vh
    display flex
    align-items center
    justify-content center
    .header
      position absolute
      top 2rem
      left 50%
      transform translateX(-50%)
      color #002b75
    .menu
      width 100%
      display flex
      align-items center
      justify-content center
      .menu-item
        position relative
        cursor pointer
        .wee
          height 2px
          width 100%
          background-color #002b75
          position absolute
          left 0
          bottom 0
          transition 0.75s
        h6
          margin 0
          padding 0 1rem 1.5rem
          font-size 1rem
          color #232323
          transition 0.75s
        &:hover
          h6
            color #002b75
      .current-menu-item
        h6
          color #002b75
          
.me
  position absolute
  bottom 5rem
  left 50%
  transform translateX(-50%)
  a
    display inline-block
    padding 0.25rem
    margin 0 0.25rem
    color #232323
    font-size 1.5rem
    transition 0.75s
    &:hover
      color #002b75

$(document).ready(function() {
  // cool nav menu
  $(window).on('load resize', function() {
    var $thisnav = $('.current-menu-item').offset().left;

    $('.menu-item').hover(function() {
      var $left = $(this).offset().left - $thisnav;
      var $width = $(this).outerWidth();
      var $start = 0;
      $('.wee').css({ 'left': $left , 'width': $width });
    }, function() {
      var $initwidth = $('.current-menu-item').width();
      $('.wee').css({ 'left': '0' , 'width': $initwidth });
    });
  });

});