/* General Reset */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* Container for the book and buttons */

.flipbook-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    width: 100%;

    max-width: 100%;

    background-color:white;

}







/* Button Styles */

button {

    border: none;

    background-color: transparent;

    cursor: pointer;

    transition: transform 0.3s, background 0.2s;

}



    button:focus {

        outline: none;

    }



    button:hover i {

        color: rgb(102, 102, 102);

    }



i {

    color: gray;

    font-size: 2.5em;

}



#prev-btn, #next-btn {

    font-size: 24px;

    background: rgba(255,255,255,0.8);

    border: 2px solid #ccc;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 1000;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}



    #prev-btn:hover:not(:disabled),

    #next-btn:hover:not(:disabled) {

        background: rgba(255,255,255,1);

    }



#fullscreen-btn {

    margin-top: 15px;

    padding: 8px 16px;

    background: rgba(255,255,255,0.8);

    border: 2px solid #ccc;

    border-radius: 20px;

    font-size: 14px;

    cursor: pointer;

    z-index: 1000;

}



    #fullscreen-btn:hover {

        background: rgba(255,255,255,1);

    }



/* Book - Normal View */

.book {

    width: 90vw;

    max-width: 350px;

    aspect-ratio: 0.7; /* Maintains width/height = 0.7 */

    position: relative;

    transition: transform 0.3s;

    will-change: transform;

}



/* Full-screen adjustments */

.fullscreen .book {

    /*    width: 90vw;

    max-width: 500px;*/

    max-width: 35vw;

    height: auto;

    aspect-ratio: 0.7;

}





.fullscreen .flipbook-container,

.maximized .flipbook-container {

    gap: 20px;

}



.fullscreen #prev-btn,

.fullscreen #next-btn

 {

    width: 50px;

    height: 50px;

    font-size: 30px;

}







/* Page Styles */

.paper {

    height: 100%;

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

    perspective: 1500px;

    

}



.front {

    backface-visibility: hidden;

    border-left: 3px solid #dac400;

}



.front,

.back {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: white;

    transform-origin: left;

    transition: transform 0.5s;

    box-shadow: 0 10px 10px rgba(0,0,0,0.2);

}



.front {

    z-index: 1;

}



.back {

    z-index: 0;

}



.front-content,

.back-content {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.back-content {

    transform: rotateY(180deg);

    box-shadow: inset -5px 0 10px -5px rgba(0,0,0,0.3);

}



/* Flipping */

.flipped .front,

.flipped .back {

    transform: rotateY(-180deg);

}









/* Mobile Portrait */

@media only screen and (max-width: 767px) and (orientation: portrait) {

    .book {

        width: 50vw;

        max-width: 300px;

        /* Let the aspect ratio dictate the ideal height. We also cap it with the dynamic viewport height */

        height: auto;

        max-height: calc(var(--vh, 1vh) * 100); /* 100% of viewport height */

        aspect-ratio: 0.7;

    }



    /* Full view adjustments in portrait */

    .fullscreen .book {

        /* For full view in portrait, using more of the available width & height */

        max-width: 90vw;

        height: auto;

        max-height: calc(var(--vh, 1vh) * 90); /* e.g., 90% of visible height */

        aspect-ratio: 0.7;

    }



    #prev-btn, #next-btn {

        width: 26px;

        height: 26px;

        font-size: 12px;

    }



    #fullscreen-btn {

        font-size: 12px;

    }



    .fullscreen .flipbook-container {

        gap: 15px;

    }

}



/* Mobile Landscape */

@media only screen and (max-width: 767px) and (orientation: landscape) {

    .book {

        /* Use the dynamic viewport variable for the height (here, 30% of the viewport height) */

        /*        height: calc(var(--vh, 1vh) * 30);*/

        height: calc(var(--vh, 1vh) * 1);

        width: auto; /* width will follow from the aspect ratio */

        aspect-ratio: 0.7;

    }



    /* Full view in landscape uses more vertical space */

    .fullscreen .book {

        /*height: calc(var(--vh, 1vh) * 80);*/ /* 80% of the viewport height */

        /*height: calc(var(--vh, 1vh) * 60);*/ /* 80% of the viewport height */

        /*width: auto;

        aspect-ratio: 0.7;*/

        height: calc(var(--vh, 1vh) * 70); /* 70% of the viewport height for the book */

        margin-top: calc(var(--vh, 1vh) * 5); /* 5% gap on top */

        margin-bottom: calc(var(--vh, 1vh) * 5); /* 5% gap on bottom */

        width: auto;

        aspect-ratio: 0.7;

    }



    #prev-btn, #next-btn {

        width: 36px;

        height: 36px;

        font-size: 20px;

    }



    #fullscreen-btn {

        font-size: 12px;

    }



    .fullscreen .flipbook-container {

        gap: 15px;

    }

}