.main
  .social(onClick="return true")
     a.fab.fa-2x.fa-twitter(href="https://twitter.com/akshaycodes")
     a.fab.fa-2x.fa-medium-m(href="https://medium.com/@akshaycodes")
     a.fab.fa-2x.fa-instagram(href="https://www.instagram.com/akshaycodes/")
     a.fab.fa-2x.fa-codepen(href="https://codepen.io/akshaycodes/")
     .btn: a Follow Me
       

//imports
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400')
//var
$primary: #fb3
$secondary: #fff
$accent: #252525
$num: 4
$delay: 85ms
$multiplier: $delay

//mixins
=flex()
  display: flex
  justify-content: center
  flex-direction: row
  flex-wrap: wrap
    //position: absolute
=center()
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  
//globle
*
  margin: 0
  box-sizing: border-box
  padding: 0
h1,h2,h3,h4,h5,h6,a,p
  padding-bottom: 0.714em !important
  padding-top: 0.714em !important
  text-transform: uppercase
  letter-spacing: 0.1em
  font-weight: 400
body
  background: $primary
  font-family: 'Raleway', sans-serif
  font: 100%/1.5 
//main sass
.social
  +flex()
  justify-content: space-evenly
  
  a
    padding: 15px
    transition: 700ms
    color: $accent
    text-align: center
    transform: scale(0)
    opacity: 0
    text-decoration: none
    @while $num > 0
      &:nth-child(#{$num})
        transition-delay:  (#{$delay})
      $delay: $delay + $multiplier 
      $num: $num - 1
      
    


.main
  width: 300px
  height: 80px
  +flex()
  +center()
  background: $secondary
  border-radius: 60px
  text-align: center
  font-weight: bold
  overflow: hidden
  color: $accent
  .btn
      +flex()
      width: 300px
      height: 80px
      position: absolute
      top: 0em
      left: 0em
      background: $accent
      border-radius: 60px
      color: $secondary
      transition:   950ms cubic-bezier(.89,.03,.06,1.50)
      a
        transform: scale(1)
        +flex()
        opacity: 1
        padding: 0
        margin: auto
        color: $secondary
        font-size: 20px
//effects  
.main:hover 
  .social a
    transform: scale(1)
    transition-timing-function: cubic-bezier(1,-0.03,0,1.85)
    opacity: 1
  
      
  .btn
    transform: translateX(-500px)


.social a:hover
  color: $primary
  transition-timing-function: ease-in-out!important
  transition-delay:  1ms!important
  

// find me on 
//instagram: https://www.instagram.com/akshaycodes/