page.css

/* #region ==================== UNITS */

/*
    inch  = 25.4 mm
    point = 1/72 * inch = 0.353 mm
    
    1pt  = 0.352778 mm
    10pt = 3.52778 mm
    
            in      mm
    10 pt   0.14    3.53
    
    mac = 72 ppi
    win = 96 ppi
    
    1pt  = 1.333335 px
    10pt = 13.33335 px
    
    1 mm = 2.8346438836888925 pt
    
    210 mm -> 210 / 25.4 = 8.267716535433072 in
    210 mm -> 8.267716535433072 * 72 = 595.2755905511812 px
    297 mm -> 297 / 25.4 = 11.692913385826772 in
    297 mm -> 11.692913385826772 * 72 = 841.8897637795276 px
    
                in      pt
    210 mm      8.27    595.28
    297 mm      11.69   841.89
    
    chrome
    210 mm = 793.69 px
    297 mm = 1122.52 px
    
*/

/* #endregion */


/* #region ==================== VARS */

:root {
    --page-padding: 1.5cm;
    --page-font-size: 10pt;
    --page-a4-width: 21cm;
    --page-a4-height: 29.7cm;
    --page-a4-content-height: calc(
        var(--page-a4-height) - (2 * var(--page-padding))
    );
    --page-margin: 0.5cm;
    --page-number-color: inherit;
    --page-number-color: hsl(0, 0%, 50%);
    --page-content-color: hsl(0, 0%, 0%);
    --screen-bg-color: gainsboro;
}

/* #endregion */


body {
    margin: 0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    background-color: var(--screen-bg-color);
}

main {
    overflow: auto;
    padding: 1cm;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--page-margin);
}


/* #region ==================== SIZE */

.page {
    background-color: white;
    box-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.2);
    overflow: auto;
    display: flex;
    font-size: var(--page-font-size);
    padding: var(--page-padding);
    box-sizing: border-box;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.page-a4 {
    width: var(--page-a4-width);
    height: var(--page-a4-height);
}

/* #endregion */


/* #region ==================== HEADER & FOOTER */

.page :is(.page-header, .page-footer) {
    display: flex;
    height: var(--page-padding);
    position: absolute;
    left: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.page .page-header {
    top: 0;
}
.page .page-footer {
    bottom: 0;
}

/* #endregion */


/* #region ==================== NUMBERING */

.page .page-number {
    color: var(--page-number-color);
}

/* #endregion */


/* #region ==================== WATERMARK */

.page-watermark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-watermark img {
    max-width: calc(21cm * 0.9);
    max-height: calc(21cm * 0.5);
    transform: rotate(315deg);
    pointer-events: none;
    user-select: none;
}

/* #endregion */


/* #region ==================== CONTENT */

.page-content {
    flex-grow: 1;
    z-index: 1;
    overflow: auto;
    color: var(--page-content-color);
}

.page-content > :first-child {
    margin-top: 0;
}
.page-content > :last-child {
    margin-bottom: 0;
}

/* #endregion */


/* #region ==================== MEDIA: PRINT */

@media print {
    
    body {
        background-color: transparent;
    }
    main {
        padding: 0;
        gap: 0;
    }
    .page {
        margin: 0;
        box-shadow: none;
        background-color: transparent;
    }
    .page-content {
        overflow: hidden;
    }
    
}

/* #endregion */