*, *:before, *:after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}


html, body {
  margin: 0;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.ipad-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  max-width: 100%;
  user-select: none;
}

.ipad-frame .ipad-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.book-wrapper {
  position: absolute;
  top: 26%;
  left: 14.3%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.book-cover {
  display: none;
}

.book-wrapper img {
      filter: drop-shadow(15px 5px 5px #494338);
}
.pages-container {
    position: absolute;
    top: 4%;
    left: 3%;
    right: 0;
    bottom: 0;
    width: 91.5%;
    height: 91%;
}


.pages [class^="page-num-"] {

  position: relative;
}


.pages-content {
    text-align: center;
      position: absolute;
    width: 100%;
    height: 100%;
    display: table;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10%;
}

.content-inner {
      text-align: center;
    display: table-cell;
    vertical-align: middle;
}


.book-wrapper {
   user-select: none;
}


.page-num-1 .pages-background {
    background: linear-gradient( rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(https://openclipart.org/image/2400px/svg_to_png/242093/Vintage-Floral-Texture-Background.png);
    background-size: cover;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}