.book-container {
  position: relative;
  height: 1200px;
  width: 1800px;
}

.page-container {
  height: 1120px;
  width: 900px;
  position: absolute;
  top: 0;
  right: 0;
  /* backface-visibility: hidden; */
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  transform-origin: left;
}

.page {
  padding: 36px;
  height: 100%;
  overflow: hidden;
  background-color: #e3d0b5; /* hsl(35, 45%, 80%) */
  color: #785e3a; /* hsl(35, 35%, 35%) */
  border: solid 1px #9c8263; /* hsl(35, 20%, 50%) */
}

.page.page-cover-top {
  box-shadow: inset 0px 0 30px 0px #240a0380, -2px 0 5px 2px #00000066;
}

.page.page-cover-bottom {
  box-shadow: inset 0px 0 30px 0px #240a0380, 10px 0 8px 0px #00000066;
}

.page-container.left {
  transform: rotateY(180deg);
}
.page-container.right {
  transform: rotateY(0deg);
}

.page-container.left .page {
  transform: rotateY(180deg);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .book-container.mobile {
    width: 100%;
    height: 100%;
    max-width: none;
    perspective: 2000px;
  }

  .book-container.mobile .page-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 0.6s ease-in-out;
    backface-visibility: hidden;
  }

  .book-container.mobile .page-container.flipped {
    transform: rotateY(-180deg);
  }
}