/* Book logic for pages and navigation */

.book-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: brown;

    overflow: auto;
}


.book {
    margin: 50px;
    width: 2500px;
    background-color: white;
    box-shadow: 3px 3px 30px rgba(0,0,0, 0.5);

    zoom: 0.87;
}


    .book .spread {
        display: flex;
        width: 2500px;
        overflow: hidden;
    }

        .book.magazine .spread .page {
            position: relative;
            width: 1250px;
            height: 1600px;   
        }

            .book .spread .page .page-gradient {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                pointer-events: none;
            }

                .book .spread .page .page-gradient.left {
                    background: linear-gradient(90deg, rgba(0,0,0, 0.1) 0%, rgba(0,0,0, 0) 20%, rgba(0,0,0, 0.1) 80% , rgba(0,0,0, 0.2) 90%, rgba(0,0,0, 0.4) 100%);
                    border-right: 1px solid rgba(0,0,0, 0.35);
                }

                .book .spread .page .page-gradient.right {
                    background: linear-gradient(90deg, rgba(0,0,0, 0.4) 0%, rgba(0,0,0, 0.2) 10%, rgba(0,0,0, 0.1) 20%, rgba(0,0,0, 0) 80%, rgba(0,0,0,0.1) 100% );
                }
            

            .book.magazine .spread .page .layout {
                position: relative;
                height: 1600px;
                box-sizing: border-box;
            }