html {
  overflow-y: scroll; 
}

body {
  font-family: "Monotype Corsiva", "Lucida Handwriting", "Brush Script MT", cursive;
}

.scene {
  width: 400px;
  height: 520px;
  margin: 60px 50%;
  perspective: 1200px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center left;
  transition: transform 5s;
}

.animating__front .front,
.animating__front .back,
.animating__back .front,
.animating__back .back {
  cursor: default;
}

.front {
  z-index: 100;
}

.back {
  z-index: 50;
}

.animating__back .back,
.back.back.is-flipped {
  z-index: 150;
}

.front.is-flipped, .back.is-flipped {
  transform: translateX(0%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 10px 2px;
  text-align: center;
  backface-visibility: hidden;
  border: solid 1px black;
}

.card__face--front {
  background-color: white;
}

.card__face--front div {
  padding-top: 40px;
}

.card__face--back, .card__face--inside__back {
  background-color: white;
  transform: rotateY(180deg);
}

.card__face--back > div {
  font-size: 12pt;
  padding: 10px;
  text-align: center;
}

.card__face--back p {
  padding: 0;
  margin: 8px;
}

p.menu {
  font-size: 16pt;
  font-weight: bold;
}

p.menu__heading {
  font-size: 14pt;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 10px;
}

p.menu__footer {
  margin-top: 30px;
  font-size: 10pt;
}

.card__face--inside {
  background-color: white;
  z-index: -1;
}

.card__face--inside > div {
  margin: auto;
  width: 380px;
  padding: 0;
  margin: 0;
}

.card__face--inside p {
  padding: 0;
  margin: 25px;
}

.card__face--inside__back {
  font-size: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card__face--inside__back > div {
  font-size: 14pt;
  padding: 10px;
}

.card__face--inside__back p {
  text-align: left;
  padding: 0;
  margin: 8px;
}

.background {
  width: 100%;
  text-align: center;
}