/* .body{
    background-image: url(https://i.pinimg.com/originals/e2/97/8c/e2978ca3d3a608d8f3e3dac5c083f3cb.jpg);
    background-size: cover;
    background-attachment: fixed;
    }  
    .content {
    width: 50%;
    padding: 40px;
    margin: 100px auto;
    
    }   */
/* #start-adventure {
      width: 200px;
      height: 190px;
      position: absolute;
      background: url(/media/images/transparent_button_normal.png.pagespeed.ce._PQuVSQuHh.png) no-repeat;
  } */

.card{
  box-shadow: 0 20px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#btm-right-gif{

  background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  height: 125px;
  width: 125px;
  background-image: url("https://media3.giphy.com/media/psmJf376CrS92Dy5wf/source.gif");
}

#btm-left-gif {
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  height: 125px;
  width: 125px;
  background-image: url("https://media0.giphy.com/media/woPVIVFoEBkuMTM8FF/source.gif");
}

.instructions {
  font-size: large;
  font-weight: 600;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.card-flip > div {
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  width: 240px;
  height: 240px;
  margin: 0;
  display: flex;
}
/*
flip card
*/
.card-flip > div {
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
}

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

.card-flip:hover .card-back {
  transform: rotateY(0deg);
}