.book {
  position: relative;
  transform-style: preserve-3d;
  margin: 30px 0 30px -70px;
}

.page {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  /* left: 50%; */
  left: 60%;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  /* width: 70%; */
  width: 98%;
  height: 95%;
  transform-style: preserve-3d;
}

.side0 {
  transform: none;
}

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

.flip {
  /*do nothing, its used by js*/
}

/* 
  preserntaiton
  */

.book {
  /* width: 88vw;
    height: 92vh; */
  width: 75vw;
  height: 90vh;
  perspective: 800px;
}

.OFEV-dialog .book {
  height: 66vh;
}

.page {
  transition: transform 1s;
  transform-origin: left center;
}

.side0 {
  /* background: linear-gradient(to right, rgba(0, 0, 0, 0.1), lemonchiffon 0.5em); */
  padding: 1em;
  box-sizing: border-box;
}

.side1 {
  /* background: linear-gradient(to left, rgba(0, 0, 0, 0.1), powderblue 0.8em); */
  padding: 1em;
  box-sizing: border-box;
}

.page:first-of-type .side0 {
  box-shadow: -10px 0 10px -6px rgba(0, 0, 0, 0.3);
}

.page:last-of-type .side1 {
  box-shadow: 10px 0 10px -6px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 1280px) and (max-width: 1800px) {
  .side {
    width: 80%;
  }
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
  .book {
    margin: 35px 0 -10px -50px;
    width: 85vw;
    height: 40vh;
  }

  .side {
    width: 80%;
  }

  .side0,
  .side1 {
    padding: 0em;
  }
}

@media only screen and (min-width: 350px) and (max-width: 600px) {
  .book {
    margin: 35px 0 15px -88px;
    width: 110vw;
    height: 35vh;
  }

  .side {
    width: 80%;
  }

  .side0,
  .side1 {
    padding: 0em;
  }
}