body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  flex:1;
}



/*Stolen from https://codepen.io/RuudBurger/pen/bwjry*/

label.flip{
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: block;
    width: 300px;
    height: 200px;
    position: absolute;
    /*left: 50%;
    top: 50%;*/
    /*-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    cursor: pointer;
}

.flashcard {
    position: relative;
    height: 100%;
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    z-index: 20;
}

  .flashcard div {
      position: absolute;
      height: 100%;
      width: 100%;
      line-height: 200px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 2px;
  }

  .flashcard .back {
      -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg);
  }

label:hover .flashcard {
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
    box-shadow: 0 20px 20px rgba(50,50,50,.2);
}

:checked + .flashcard {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

label:hover :checked + .flashcard {
    transform: rotateX(160deg);
    -webkit-transform: rotateX(160deg);
    box-shadow: 0 20px 20px rgba(255,255,255,.2);
}