.outline
  .card(onclick=true)
    .inner
      .front
        h1 Akshay Codes
      .back 
        img(src='https://avatars2.githubusercontent.com/u/38903662?s=460&v=4')
        h1 Akshay M
        p full-stack developer

// sass
//Var
//colors
$base: linear-gradient(to right, #2bc0e4, #eaecc6)
$primary: #232A3F
$accent: white
$secondary: #8F98B3

//mixins
=flex()
  display: flex
  justify-content: center
  flex-direction: row
  flex-wrap: wrap
   
=center()
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -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
  
  

body, .inner
  height: 100%
  width: 100%
  position: absolute
  background:  url('https://images.unsplash.com/photo-1539141278536-63a0f98360a7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=00e144bdf5b82ca9e097bcf3f36b2442&auto=format&fit=crop&w=1350&q=80')
  background-repeat: no-repeat
  background-position: center center
  background-attachment: fixed
  background-size: cover
  font-family: 'Raleway', sans-serif
  text-align: center
  
.noselect
  user-select: none
.outline
  +center

.card
  background-color: transparent
  width: 500px
  height: 300px
  perspective: 5000px
  &:hover
    .inner
      transform: rotateY(180deg) translateZ(5px)
      backface-visibility: visible
    
.inner
  position: relative
  width: 100%
  height: 100%
  transform-style: preserve-3d
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  text-align: center
  &:after
    content: ""
    background: inherit
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    filter: blur(8px)
  
  
.front, .back
  position: fixed
  width: 100%
  height: 100%
  z-index: 10
  padding: 20px
  backface-visibility: hidden
   
  
  transform: rotateY(0deg) translateZ(0px)
.front
  text-align: center
  background-color: rgba(0,0,0,0.8)
  color: black
  h1
    text-align: center
    +center
.back
  background-color: rgba(255,255,255,0.3)
  color: white
  transform: rotateY(-180deg) 
 
  h1
    padding-bottom: 0 !important
    padding-top: 0.714em !important
  p
    padding-top: 0 !important
  img
    top: 10px
    position: relative
    width:  110px
    height: 110px
    border-radius: 100%


@media screen and (max-width: 900px)
  .inner
    background-size: 200% 200%
  

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