/* body { font-family: sans-serif; } */

.scene {
  display: flex;
  width: 100%;
  height: auto;
  /* border: 1px solid #CCC; */
  margin: 40px 0;
  perspective: 600px;
}

*, ::after, ::before {
  box-sizing: content-box !important;
}


.card{
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
  height:100% !important;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  /* line-height: auto; */

  color: black;
  text-align: center;
  font-weight: bold;
  /* font-size: 1%; */
  backface-visibility: hidden;
}

.card_answer{
   padding-top: 100px;
}

/* .card__face--front { */
  /* background: rgb(138, 138, 138); */
  /* background-image: url('card.png'); */
/* } */

.card__face--back {
  /* background:#9aceae; */
  background:#e5ffef;
  transform: rotateY(180deg);
}