body {
    margin: 0;
    overflow: hidden;
}

main {
    padding: 5rem 0;
}

.book {

    margin: auto;
    height: 70vh;
    width: 50vh;

    font-family: Montserrat, sans-serif;

    .title {
        font-weight: bold;

        h2 {
            margin: 0;
        }
    }

    /* page container that allows 3 dimensional movement of children => perspective */
    .content {
        position: relative;
        /* overflow: hidden; */
        height: 90%;
        perspective: 1000px;
    }

    .page {
        
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        /* use inverted page number as z-index, meaning: 
        higher page numbers get stacked BELOW lower page number. Like in a book */
        z-index: calc(var(--pId) * -1);
        /* overflow: auto; */

        /* images handling */
        img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* only use padding on content pages / no image  */
        &:not(&:has(img)) {
            padding: 5px 20px;
        }

        border: 2px solid #ccc;
        box-shadow: 2px 2px 3px rgba(0,0,0, 0.3);

        background-color: white;

        /* mobile font size */
        p {
            font-size: clamp(12px, 2vw, 1.3rem);
        }

        /* wide font size (narrow down, because book container size stays limited!) */
        @media screen and (min-width: 700px) {
            p {
                font-size: clamp(12px, 2vw, 0.8rem);
            }
        }

        /* animation */
        transition: 1s;
        transform-origin: 0%;
        transform-style: preserve-3d;
        backface-visibility: hidden;

        /* active page is on top of ALL pages  */
        .active {
            z-index: 100;
        }

        /* center contents of first & lage page */
        &:first-child, &:last-child {
            display: grid;
            place-items: center;
        }

        /* stand out first page of each page */
        p:nth-of-type(1)::first-letter {
            font-size: 2rem;
            font-family: "serif";
            color: #8A2BE2;
        }

        /* backface of page */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: whitesmoke;
            rotate: y 180deg;
            backface-visibility: hidden;
        }
    }


    /* navigate buttons */
    .navigate {
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

@keyframes turnPage {

    /* rotate around Y axis */
    100% {
        rotate: y -135deg;
    }
}