mediaScreen.css

:root {
    --color-background: whitesmoke;
    --color-pageBox: rgb(255, 255, 255);
    --color-paper: white;
    --color-marginBox: transparent;
}

@media screen {
    body {
        background-color: var(--color-background)
    }

    .pagedjs_pages {
        display: flex;
        width: 100vw;
        height: 100vh;
        /* overflow: hidden; */
        flex: 0;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    /* .pagedjs_page.pagedjs_right_page{ */
        /* transform: translate(-1000px, -1290px) scale(0.23); */
        /* width: calc(var(--pagedjs-width-right) / 20); */
        /* height: calc(var(--pagedjs-height-right) / 20); */
    /* } */

    .pagedjs_page {
        /* width: 500px; */
        background-color: var(--color-paper);
        box-shadow: 0 0 0 1px var(--color-pageBox);
        margin: 0;
        flex-shrink: 0;
        flex-grow: 0;
        margin-top: 10mm;
    }

    .pagedjs_first_page {
        /* margin-left: var(--pagedjs-width) */
        /* width: calc(var(--pagedjs-width) / 25); */
        margin-left: calc(var(--pagedjs-width) / 2);
    }

    .pagedjs_page:last-of-type {
        margin-bottom: 10mm;
    }

    .pagedjs_margin-bottom,
    .pagedjs_margin-bottom-center,
    .pagedjs_margin-bottom-left,
    .pagedjs_margin-bottom-left-corner-holder,
    .pagedjs_margin-bottom-right,
    .pagedjs_margin-bottom-right-corner-holder,
    .pagedjs_margin-left,
    .pagedjs_margin-left-bottom,
    .pagedjs_margin-left-middle,
    .pagedjs_margin-left-top,
    .pagedjs_margin-right,
    .pagedjs_margin-right-bottom,
    .pagedjs_margin-right-middle,
    .pagedjs_margin-right-top,
    .pagedjs_margin-top,
    .pagedjs_margin-top-center,
    .pagedjs_margin-top-left,
    .pagedjs_margin-top-left-corner-holder,
    .pagedjs_margin-top-right,
    .pagedjs_margin-top-right-corner-holder {
        box-shadow: 0 0 0 1px inset var(--color-marginBox)
    }
}