html {
    overflow: hidden;
}

body {
    margin: 0;

    background: #333;

    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
    overflow: hidden;
}

h1 {
    font-family: sans-serif;
    font-size: 20pt;
    font-family: "Fuzzy Bubbles", system-ui;
    font-weight: 800;
}
h2 {
    color:#e398de;
    font-family: "Fuzzy Bubbles", system-ui;
    font-weight: 200;
    font-size: 12pt;
}

.caption {
    font-size: 10pt;
    color: #999;
    font-family: "Sniglet", system-ui;
    font-style: italic;
    text-align: center;
    padding: 0 30px;
    box-sizing: border-box;

}

.book {
    position: relative;

    width: 600px;
    height: 800px;

    perspective: 1500px;

    /* body centers this box, which centers the spine's left edge - but
       once open, pages fan out to both sides of the spine, so it's the
       spine that should sit at center, not the box. Shift right by half
       the book's own width to move the spine there. */
    transform: translateX(50%);
}

.sheet {
    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    transform-origin: left center;
    transform-style: preserve-3d;

    transition: transform 1s ease;
}

#sheet1 {
    z-index: 3;
}
#sheet2 {
    z-index: 2;
}
#sheet3 {
    z-index: 1;
}

.sheet.flipped {
    transform: rotateY(-180deg);
}

.page {
    /* .front's spine is its own left edge, matching the sheet's hinge. .back
       is rotated 180deg *inside* the sheet, which is itself rotated 180deg
       when flipped - the two don't share a pivot (the sheet hinges on its
       left edge, .back on its own center), so .back ends up mirrored
       relative to .front rather than landing back the way it started. The
       spine-shadow direction has to flip to match. */
    --spine-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60px);

    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    /* A spine-side crease painted INTO the background, rather than a
       box-shadow around the page. box-shadow bleeds outside the page's own
       box, and every stacked page shares that exact box, so with a shadow
       each hidden page underneath would still add its own halo at the same
       pixels - the more pages in the book, the darker it gets. A background
       gradient never paints outside its box, so only the one visible page's
       gradient ever shows, no matter how many are stacked beneath it. */
    background: var(--spine-shadow), #f5f0df;

    backface-visibility: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page.back {
    --spine-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60px);
}

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

/* Covers are slightly larger than the pages on every edge but the spine
   (left), so a sliver of thicker "binding" always peeks out around the
   page stack. */
.cover {
    position: absolute;

    left: 0;
    width: calc(100% + 16px);
    height: calc(100% + 24px);
    top: -12px;

    z-index: -1;
}

.front-cover {
    z-index: 1000;
}

.cover-face {
    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    backface-visibility: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 40px;

    border-radius: 4px 16px 16px 4px;
    box-shadow: 0 12px 30px #0009;
}

.cover-outer {
    background: linear-gradient(155deg, #8a5a35 0%, #5b3620 55%, #40260f 100%);
    border: 6px solid #3a2211;
}

.cover-inner {
    background: #e8ddc4;
}

.cover-title {
    margin: 0;

    font-family: "Fuzzy Bubbles", system-ui;
    font-weight: 400;
    font-size: 42pt;
    color: #f5e6c8;
    text-shadow: 0 3px 6px #0007;
}

.cover-subtitle {
    margin: 0;

    font-family: "Fuzzy Bubbles", system-ui;
    font-weight: 400;
    font-size: 34pt;
    color: #f5e6c8;
    text-shadow: 0 3px 6px #0007;
}

.cover-hint {
    margin: 0;

    font-family: "Sniglet", system-ui;
    font-size: 9pt;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f5e6c8;
    opacity: 0.7;
}

.photo {
    border: 10px solid #fff;
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.2);
}

.blank-page-mark {
    font-size: 24pt;
    opacity: 0.35;
}

.chapter-page {
    background: var(--spine-shadow), linear-gradient(155deg, #f7ecd4 0%, #ecd9ad 100%);
    gap: 16px;
}

.chapter-page h1 {
    padding: 0 40px;

    font-size: 32pt;
    text-align: center;
    color: #5b3620;
}

.chapter-page h2 {
    font-family: "Sniglet", system-ui;
    font-size: 24pt;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a5a35;
}

#lightbox {
    display: none;
    position: absolute;
    z-index: 9999;
    /* top: 0%; */
    /* left: 0%; */
    height: 80vh;
    /*  height: auto; */
    background-size: 100% 100%;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: black;
    border: 10px solid #fff;
    box-shadow: 0px 0px 10px 3px #fff;
}