@import url('https://fonts.googleapis.com/css?family=Bangers');
*,*::before,*::after{
  margin:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
  width:100%;
}

body{
  font-size:5vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: 'Bangers', cursive;
}

.card{
  height:15rem;
  width:15rem;
  transform-style:preserve-3d;
  position: relative;
  transition: all 1s ease-in-out;
  backface-visibility: hidden;
  margin:10px;
}

.front, .back{
  position: absolute;
  backface-visibility: hidden;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height:100%;
  width:100%;
  border-radius:1em;
  display:flex;
  justify-content: center;
  align-items:center;
  transform-style:preserve-3d;
  color: #fff;
  perspective: 1000px;
  box-shadow: 2px 4px 8px 1px rgba(black,0.4);
}


.back{
  transform: rotateY( 180deg );
}

.front > p , .back > p {
  transform:translateZ(120px);
}

.card:hover{
  transform:rotateY(180deg);
}