.container
  .tl
  .tc
  .tr
  .cl
  .cc
  .cr
  .bl
  .bc
  .br
  .hl#highlight
  input#check(type="checkbox")
  label(for="check")
  .card
    .front
      h2 Andrej Sharapov
      h4 UX/UI Designer, Frontend Developer
      .links
        a(href="#")
          span.fab.fa-html5
        a(href="#")
          span.fab.fa-css3
        a(href="#")
          span.fab.fa-js
        a(href="#")
          span.fab.fa-bootstrap
        a(href="#")
          span.fab.fa-sass
        a(href="#")
          span.fab.fa-node-js
        a(href="#")
          span.fab.fa-git
        a(href="#")
          span.fab.fa-gulp
        a(href="#")
          span.fab.fa-php
        a(href="#")
          span.fab.fa-figma
    .back
      h2 social networks
      .links
        a(href="#")
          span.fab.fa-github
        a(href="#")
          span.fab.fa-twitter
        a(href="#")
          span.fab.fa-instagram
        a(href="#")
          span.fab.fa-behance
        a(href="#")
          span.fab.fa-codepen
        a(href="#")
          span.fab.fa-vk
        a(href="#")
          span.fab.fa-dribbble
        a(href="#")
          span.fab.fa-medium-m
        a(href="#")
          span.fab.fa-linkedin-in
        a(href="#")
          span.fab.fa-google-plus-g

@import url("https://fonts.googleapis.com/css?family=Montserrat");

$col1: #88daf7;
$col2: #0172b0;
$col3: #2a394f;
$col4: #212e41;
$cubic-1: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$cubic-2: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$grad: linear-gradient(135deg, $col1, $col2);
$shadow: 0 6px 16px darken($col2, 10%);

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  background-color: $col1;
  // background: url(https://picsum.photos/1920/1080?random)
  background: url(https://i.picsum.photos/id/1042/3456/5184.jpg?hmac=5xr8Veg2D_kEQQO6rvGj_Yk8s_N4iq3-eZ9_KclSXNQ)
    no-repeat center center / cover;
}

.hl {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  margin-top: -400px;
  margin-left: -400px;
  width: 800px;
  height: 800px;
  background: radial-gradient(
    circle closest-side at 50%,
    rgba($col1, .7),
    transparent
  );
  transition: all 200ms linear;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  perspective: 1000px;

  .tl:hover {
    ~ .card {
      transform: rotateX(25deg) rotateY(-5deg);
    }
    ~ .hl {
      transform: translate(-40%, -15%);
    }
  }

  .tc:hover {
    ~ .card {
      transform: rotateX(35deg);
    }
    ~ .hl {
      transform: translate(0, -15%);
    }
  }

  .tr:hover {
    ~ .card {
      transform: rotateX(25deg) rotateY(5deg);
    }
    ~ .hl {
      transform: translate(40%, -15%);
    }
  }

  .cl:hover {
    ~ .card {
      transform: rotateY(-25deg);
    }
    ~ .hl {
      transform: translate(-40%, 0%);
    }
  }

  .cr:hover {
    ~ .card {
      transform: rotateY(25deg);
    }
    ~ .hl {
      transform: translate(40%, 0%);
    }
  }

  .bl:hover {
    ~ .card {
      transform: rotateX(-25deg) rotateY(-15deg);
    }
    ~ .hl {
      transform: translate(-40%, 15%);
    }
  }

  .bc:hover {
    ~ .card {
      transform: rotateX(-35deg);
    }
    ~ .hl {
      transform: translate(0, 15%);
    }
  }

  .br:hover {
    ~ .card {
      transform: rotateX(-25deg) rotateY(15deg);
    }
    ~ .hl {
      transform: translate(40%, 15%);
    }
  }
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -120px -200px;
  perspective: 150rem;
  width: 400px;
  height: 240px;
  cursor: pointer;
  transition: all 500ms $cubic-1;

  .front,
  .back {
    position: absolute;
    margin: auto;
    padding: 2em;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: white;
    transition: 500ms $cubic-2;

    h2 {
      margin: 0;
      text-transform: uppercase;
      font-size: 1.75rem;
    }

    h4 {
      margin: 0.5em 0 1em;
      font-size: 1rem;
    }

    .links {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
    }

    a {
      margin: 0.25em 0.5em;
      text-decoration: none;
      font-size: 2rem;
      color: white;
    }
  }

  .front {
    z-index: 1;
    align-items: center;
    background-image: $grad;
    box-shadow: $shadow, inset 0 0 15px $col1;
  }

  .back {
    align-items: center;
    background-image: $grad;
    transform: rotateY(180deg);
  }
}

#check {
  display: none;

  + label {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -120px -200px;
    z-index: 2;
    width: 400px;
    height: 240px;
    cursor: pointer;
  }

  &:checked + label {
    ~ .card {
      .front {
        z-index: 0;
        box-shadow: none;
        transform: rotateY(-180deg);
      }
      .back {
        box-shadow: $shadow, inset 0 0 15px $col1;
        transform: rotateY(0deg);
      }
    }
  }
}

// follow me:
// https://dribbble.com/andrejsharapov
// https://twitter.com/andrejsharapov
// https://www.instagram.com/andrej.sharapov