/* #region ==================== UNITS & VARS */

/*
    Lenovo IdeaPad 510-15ISK: 141 ppi
    Chrome: 1 in = 96 px
    
    1pt  = 0.3528 mm  [ 25.4 * (1/72) ]
    10pt = 3.5278 mm
    
    1pt  =  1.3333 px  [ 96 * (1/72) ]
    10pt = 13.3333 px
    
    1 mm = 2.8345 pt  [ 1 / 0.3528 ]
    1 mm = 3.7795 px  [ 96 / 25.4 ]
    
    210 mm -> 210 / 25.4 = 8.2677 in
    210 mm -> 8.2677 * 96 = 793.6992 px
    297 mm -> 297 / 25.4 = 11.6929 in
    297 mm -> 11.6929 * 96 = 1122.5184 px
*/

:root {
    --page-padding: 1.5cm;
    --page-font-size: 9.5pt;
    --page-a4-width: 21cm;
    --page-a4-height: 29.7cm;
    --page-a4-content-height: calc(
        var(--page-a4-height) - (2 * var(--page-padding))
    );
}

/* #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"; */
    font-family: "Open Sans", sans-serif;
    background-color: gainsboro;
    min-width: fit-content;
}

main {
    overflow: auto;
    min-width: fit-content;
}

.pages {
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cm;
    padding: 1cm;
    padding-bottom: 2cm;
    min-width: fit-content;
    margin: 0;
}

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

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

.overflow-container {
    overflow: auto;
    flex-grow: 1;
}

/* #region ==================== PAGE NUMBER */

.page .page-number {
    position: absolute;
}
.page .page-number.bottom {
    bottom: calc(var(--page-padding) / 2);
    transform: translateY(-50%);
}
.page .page-number.bottom-center {
    bottom: calc(var(--page-padding) / 2);
    left: 50%;
    transform: translateX(-50%);
}
.page .page-number.bottom-right {
    bottom: calc(var(--page-padding) / 2);
    right: var(--page-padding);
}
.page .page-number.bottom-left {
    bottom: calc(var(--page-padding) / 2);
    left: var(--page-padding);
}
.page .page-number.muted {
    color: hsla(0, 0%, 0%, 0.5);
}

/* #endregion */


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

.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;
}
.watermark img {
    max-width: calc(21cm * 0.9);
    max-height: calc(21cm * 0.5);
    transform: rotate(315deg);
    pointer-events: none;
    user-select: none;
}

/* #endregion */


.page-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

p.pre {
    white-space: pre-line;
    margin-bottom: 0;
}

@media print {
    
    @page {
        size: auto; /* silly bootstrap */
    }
    body {
        background-color: transparent;
        min-width: unset !important; /* silly bootstrap */
    }
    main {
        overflow: unset;
    }
    .pages {
        padding: 0 !important;
        gap: 0;
    }
    .page {
        margin: 0;
        box-shadow: none;
        background-color: transparent;
    }
    .overflow-container {
        overflow: hidden;
    }
    /* pre {
        border: none;
        overflow: hidden !important;
    } */
    
}