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

html{
  font-size:16px;
}

body{
  overflow:hidden;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  background:
    radial-gradient(circle at top,
    #38344d 0%,
    #17151d 35%,
    #0c0b10 75%,
    #050507 100%);
  font-family:"Cormorant Garamond", serif;
  color:#efe8d7;
}

.room{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.dust{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
      radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1px),
      radial-gradient(circle, rgba(255,255,255,.25) .8px, transparent .8px);
  background-size: 170px 170px, 250px 250px;
  background-position: 0 0, 70px 120px;
}

.table{
  position:absolute;
  bottom:0;
  width:100%;
  height:260px;
  pointer-events:none;
}

.table-top{
  position:absolute;
  top:0;
  width:100%;
  height:45px;
  background: linear-gradient(to bottom, #3a261c, #24160f);
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,.6),
    inset 0 6px 10px rgba(255,255,255,.03);
}

/*BOOK CONTAINER */

.book-container{
  position:absolute;
  bottom:90px;
  left:50%;
  transform:translateX(-50%);
  width:1100px;
  height:560px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  perspective:2400px;
  z-index:5;
}

.book-container:hover .book{
  transform:translateY(-6px) rotateX(2deg);
  transition:0.6s ease;
}

/* nav arrows */
.pageNavBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  width:50px;
  height: 80px;
  border-radius: 20%;
  border:1px solid rgba(214,179,106,.4);
  background:rgba(20,12,10,.6);
  color:#d6b36a;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}
.pageNavBtn:hover{
  background:rgba(125,17,40,.5);
  border-color:#d6b36a;
}
.pageNavBtn:disabled{
  opacity:.25;
  cursor:default;
}
.pageNavBtn.left{ left:5px; }
.pageNavBtn.right{ right:5px; }



.book{
  position:relative;
  width:820px;
  height:500px;
  transform-style:preserve-3d;
}

.cover-shadow{
  position:absolute;
  inset:0;
  border-radius:14px;
  background:black;
  filter:blur(35px);
  opacity:.35;
  transform: translateY(18px) scale(.97);
}

.book-cover{
  position:absolute;
  inset:0;
  border-radius:16px;
  background:
    radial-gradient(circle at 20% 30%, #3a1f1e, #1e0f0f 60%, #120909 100%);
  box-shadow:
      inset 0 0 60px rgba(0,0,0,.8),
      inset 0 0 10px rgba(255,255,255, 5),
      0 30px 80px rgba(0,0,0,.7);
}

.book-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-radial-gradient(circle at 30% 40%,
      rgba(255,255,255,.03) 0px,
      rgba(0,0,0,.03) 2px,
      transparent 4px);
  opacity:.35;
  mix-blend-mode:overlay;
}



.pageArea{
  position:absolute;
  top:34px;
  left:34px;
  right:34px;
  bottom:34px;
  display:flex;
  background:#fffdf7;
  border-radius:4px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.5),
    inset 0 0 2px rgba(0,0,0,.15);
  transform-style:preserve-3d;
  overflow:visible; /* the flap needs to rotate beyond the flat plane */
}


/* =========================================================
   STATIC PAGE LAYERS (always show the SETTLED current page)
========================================================= */

.page{
  position:relative;
  width:50%;
  height:100%;
  overflow:hidden;
  margin: 4px;
}

.page.left{
  border-right:1px solid rgba(0,0,0,.06);
}
.page.right{
  border-left:1px solid rgba(0,0,0,.06);
}

.paper{
  position:absolute;
  inset:0;
  padding:52px 46px;
  background:#fffdf7;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) 0px, transparent 60%);
  overflow-y:auto;
  overflow-x:hidden;
}

.page.left .paper{
  box-shadow: inset -22px 0 25px rgba(0,0,0,.08);
}
.page.right .paper{
  box-shadow: inset 22px 0 25px rgba(0,0,0,.07);
}

/* =========================================================
   THE FLIPPING LEAF
   One reusable element. Positioned over the right half to
   flip forward, or the left half to flip backward.
========================================================= */

.flap{
  position:absolute;
  top:0;
  height:100%;
  transform-style:preserve-3d;
  z-index:10;
  transition: transform .7s cubic-bezier(.6,.1,.25,1);
  pointer-events:none;
}

.flap.from-right{
  left:50%;
  width:50%;
  transform-origin: left center;
}
.flap.from-left{
  left:0;
  width:50%;
  transform-origin: right center;
}

.flapFace{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  overflow:hidden;
}

.flapFace .paper{
  position:absolute;
  inset:0;
}

/* back face needs to be pre-rotated so its content reads
   the correct way once the flap finishes its turn */
.flap.from-right .flapBack{
  transform: rotateY(180deg);
}
.flap.from-left .flapBack{
  transform: rotateY(-180deg);
}

/* subtle shadow that travels with the flap while it turns,
   for a touch of depth */
.flap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.18), transparent 70%);
  opacity:.6;
  pointer-events:none;
}

/*text*/

h1, h2, h3, p, li{
  text-rendering:optimizeLegibility;
}

h1{
  font-family:"UnifrakturCook", serif;
  font-size:3rem;
  text-align:center;
  margin-top:35px;
  color:#381919;
}

h2{
  font-family:"Cinzel", serif;
  font-size:2rem;
  margin-bottom:30px;
  color:#311414;
  letter-spacing:1px;
}

h3{
  margin-bottom:15px;
  font-size:1.4rem;
  color:#472424;
}

.subtitle{
  text-align:center;
  margin-top:25px;
  font-style:italic;
  font-size:1.2rem;
  color:#2f2520;
}

p, li{
  font-size:1.15rem;
  line-height:1.6;
  color:#2f2520;
}

ul, ol{
  margin-left:25px;
}

/* contents menu */

.contents{
  width:200px;
  background:rgba(20,12,10,.55);
  border:1px solid rgba(214,179,106,.2);
  border-radius:8px;
  padding:20px;
  align-self:center;
}

.contents h4{
  font-family:"Cinzel", serif;
  font-size:1rem;
  letter-spacing:1px;
  color:#d6b36a;
  margin-bottom:14px;
  text-transform:uppercase;
}

.contents button{
  display:block;
  width:100%;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  color:rgba(239,232,215,.8);
  font-size:1.05rem;
  font-family:"Cormorant Garamond", serif;
  padding:6px 0;
  transition:.2s;
}

.contents button:hover{
  color:#d6b36a;
  transform:translateX(6px);
}

.contents button.active{
  color:#8b1e2f;
}

@media (max-width:1100px){
  .book-container{
      transform:translateX(-50%) scale(.78);
  }
}