html {
    --gui-bg-body: #F3F3F3;
    --gui-bg-page: #FFF;
    --page-height: 240mm;
    --page-margin-inside: 25mm;
    --page-margin-outside: 10mm;
    --page-margin-top: 10mm;
    --page-margin-bottom: 20mm;
}

body {
    margin: 0;
    counter-reset: pages;
    background: var(--gui-bg-body);
}

.page {
    margin: 2em;
    outline: 1px solid;
    width: calc(var(--page-width) - var(--page-margin-inside) - var(--page-margin-outside));
    height: calc(var(--page-height) - var(--page-margin-top) - var(--page-margin-bottom));
    padding-top: var(--page-margin-top);
    padding-bottom: var(--page-margin-bottom);
    background: var(--gui-bg-page);
}

.page:nth-of-type(odd) {
    padding-left: var(--page-margin-inside);
    padding-right: var(--page-margin-outside);
}

.page:nth-of-type(even) {
    padding-left: var(--page-margin-outside);
    padding-right: var(--page-margin-inside);
}

@media print {
    @page {
        margin: 0;
        padding: 0;
    }
    .page {
        margin: 0;
        outline: none;
    }
}