@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Petemoss&display=swap");

.book {
    --book-height: 750px;
    /*--book-height: 537px;*/
    --book-ratio: 1.8;
    --scroll-handle-padding-top: 50px;
    --scroll-padding-left: 25px;
    --scroll-hadles-height: 20px;
    --scroll-hadles-padding-left: -25px;
    --scroll-width: calc((var(--book-height) / var(--book-ratio)) - var(--scroll-padding-left) * 2);
}

.book {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    display: flex;
    justify-content: center;
}

@media (min-width: 1200px) {
    .book {
        --book-height: 750px;
        --book-ratio: 1.8;
        --scroll-handle-padding-top: 70px;
        --scroll-padding-left: 25px;
        --scroll-hadles-height: 20px;
        --scroll-hadles-padding-left: -25px;
        --scroll-width: calc((var(--book-height) / var(--book-ratio)) - var(--scroll-padding-left) * 2);
    }
}

@media (max-width: 1200px) {
    .book {
        --book-height: 550px;
        --book-ratio: 1.8;
        --scroll-handle-padding-top: 70px;
        --scroll-padding-left: 25px;
        --scroll-hadles-height: 12px;
        --scroll-hadles-padding-left: -25px;
        --scroll-width: calc((var(--book-height) / var(--book-ratio)) - var(--scroll-padding-left) * 2);
    }

    #rsvp_form {
        min-height: 530px;
    }
}

@media (max-width: 991px) {
    .book {
        --book-height: 550px;
        --book-ratio: 1.8;
        --scroll-handle-padding-top: 70px;
        --scroll-padding-left: 25px;
        --scroll-hadles-height: 13px;
        --scroll-hadles-padding-left: -25px;
        --scroll-width: calc((var(--book-height) / var(--book-ratio)) - var(--scroll-padding-left) * 2);
    }
}

@media (max-width: 767px) {

}

/*@media (max-width: 480px)*/
@media (max-width: 320px) {
    .sm-hidden {
        display: none;
    }

    .book {
        --book-height: 520px;
        --book-ratio: 1.8;
        --scroll-handle-padding-top: 70px;
        --scroll-padding-left: 25px;
        --scroll-hadles-height: 10px;
        --scroll-hadles-padding-left: -25px;
        --scroll-width: calc((var(--book-height) / var(--book-ratio)) - var(--scroll-padding-left) * 2);
    }

    #invitation-card-anchor {
        padding: 0px;
    }
}


    .book > div {
        height: var(--book-height);
        width: calc(var(--book-height) / var(--book-ratio));
        overflow: auto;
        /* background-color: #0a0a0a; */
        border-radius: 0px;
        transform-origin: left;
    }

    .book-cover {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 9;
        text-align: center;
        background-size: calc(var(--book-height) / var(--book-ratio));
        background-image: url("./../img-invitation-card/card-01-cutout.png");
    }

    .book-content {
        background-size: calc(var(--book-height) / var(--book-ratio));
        background-image: url('./../img-invitation-card/card-03-base.png');

        transition: all 0.3s 1s;
        position: relative;;
    }

    .book-content > .scroll-paper {
        background-image: url('./../img-invitation-card/scroll-paper.png');
        height: 30px;
        z-index: 8;
        background-size: var(--scroll-width);
        position: absolute;
        top: var(--scroll-handle-padding-top);
        left: var(--scroll-padding-left);
        width: var(--scroll-width);
    }

    .book-content > .scroll-paper::before {
        background-image: url('./../img-invitation-card/scroll.png');
        content: " ";
        display: block;
        height: var(--scroll-hadles-height);
        width: calc(var(--book-height) / var(--book-ratio));
        background-size: calc(var(--book-height) / var(--book-ratio)) var(--scroll-hadles-height);
        position: absolute;
        top: -8px;
        left: var(--scroll-hadles-padding-left);
    }

    .book-content > .scroll-paper::after {
        background-image: url('./../img-invitation-card/scroll.png');
        content: " ";
        display: block;
        height: var(--scroll-hadles-height);
        width: calc(var(--book-height) / var(--book-ratio));
        background-size: calc(var(--book-height) / var(--book-ratio)) var(--scroll-hadles-height);
        position: absolute;
        bottom: -8px;
        left: var(--scroll-hadles-padding-left);
    }


    .book-cover > div {
        transition: opacity 0s 0.6s;
    }


    .book:hover > .book-cover > div {
        opacity: 0;
    }

    .book:hover > .book-content h3,
    .book:hover > .book-content p {
        opacity: 1;
    }