.artboard
  .overlay
    .button


















footer
  .content
    .top
      a(target="_blank",href="https://www.instagram.com/akshaycodes/?hl=en") #[i.fab.fa-instagram]
      a(target="_blank",href="https://twitter.com/akshaycodes/") #[i.fab.fa-twitter]
      a(target="_blank",href="http://akshaycodes.com/youtube") #[i.fab.fa-youtube]
      a(target="_blank",href="https://codepen.io/akshaycodes/") #[i.fab.fa-codepen]
    .bottom
      a made with #[i.fas.fa-heart.beat] by #[a(target="_blank",href="https://codepen.io/akshaycodes/") Akshaycodes]

// sass
//Var
//colors
$base: #02182B
$primary: #D7263D
$accent: #ffffff
$secondary: #a9a9a9

//mixins
=fhover($color)
  &:hover
    transition: 350ms ease-in-out
    color:  $color
    transform: scale(1.4)
=flex()
  display: flex
  align-items: center
  justify-content: center
  flex-direction: row
  flex-wrap: wrap
   
=center()
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  
=align()
  top: 50%
  transform: translateY(-50%)

// reset
*
  margin: 0
  box-sizing: border-box
  padding: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
h1,h2,h3,h4,h5,h6,a,p,span
  //margin: 10px 10px 0 0
  padding-bottom: 0.714em !important
  padding-top: 0.714em !important
  text-transform: uppercase
  letter-spacing: 0.1em
  font-weight: 400
  color: $accent
  font-weight: bold
  text-align: center
  
footer
  bottom: 0
  right: 0
  left: 0
  margin: 0 auto
  position: fixed
  width: 100%
  background: $base
  text-align: center
  //padding: 10px 20px
  
  .content
    border-radius: 5px
    +flex
    //flex-direction: column
    justify-content: space-evenly
    //background-color: $primary
    height: 80px
    .bottom
      padding: 0
      margin: 0
      top: 10%
      .beat
        color: red
        animation: beat .30s infinite alternate
        
    .top
      font-size: 25px
      .fa-twitter
        +fhover(#55acee)
      .fa-youtube
        +fhover(#cd201f)
      .fa-instagram
        +fhover(#e4405f)
      .fa-codepen
        +fhover(#FFDD40)
        
      a
        padding: 10px
      i
        transition: 500ms ease-in-out
      
    
body
  background: $base
  font-family: 'Raleway', sans-serif
  text-align: center
  
.noselect
  user-select: none

  

//animation
@keyframes beat
  to 
    transform: scale(1.4)
.artboard
  width: 100%
  height: 100%
  +flex()
  position: absolute
  .overlay 
      width: 100px
      height: 100px
      transition: 0.4s linear 
      +flex
      &:hover
        border-color: $primary
        cursor: pointer
        .button
          &:before,&:after  
            width: 35px
  .button
    width:  70px
    height: 10px
    background: $accent
    transition: 900ms 175ms cubic-bezier(.6,-0.46,.21,1.3)
    &:before,&:after
      content: ''
      transition:  400ms cubic-bezier(1,-0.81,.17,1.2)
    
      width: 70px
      height: 10px 
      display: flex
      background: $accent
      position: relative
    &:before
      transform-origin: right
      top: -35px
    
    &:after
      bottom: -24px
      transform-origin:  left
      float: right
      
      
  .active
    background: $primary
    border-color: $primary
    transform: rotate(270deg)
    .button  
      transform: rotate(-45deg)
      &:before,&:after  
        width: 35px
        transform: rotate(-90deg)
     

//tested on Safari,chrome 
//No Script
//total time: 2 hours 
//You Can Find Me On Instagram: @akshaycodes 
//if you have questions feel free to ask
var menu = $('.overlay');
menu.on('click', function() {
  $(this).toggleClass('active');
})