:root{
    --font-size: 9pt;
    --line-height: 14pt;
    --small-font-size: 7.5pt;
    --small-line-height: 1.55;
    --first-indent: 7mm;
    --second-indent: 20mm;
}

@font-face{
    font-family: "bitter";
    src: url(../fonts/Bitter-Medium.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: "bitter";
    src: url(../fonts/Bitter-MediumItalic.ttf);
    font-weight: normal;
    font-style: italic;
}
@font-face{
    font-family: "bitter";
    src: url(../fonts/Bitter-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family: "bitter";
    src: url(../fonts/Bitter-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

@font-face{
    font-family: "bitter_semi";
    src: url(../fonts/Bitter-SemiBold.ttf);
    font-weight: normal;
    font-style: normal;
}

html, body{
    hyphens: auto;
    font-family: "bitter";
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: 0.01em;
    /*orphans: 2;*/
    /*widows: 2;*/
}

@page{
    /*size: 152.4mm 228.6mm;*/ /* Size of the online PDF */
    /*size: 152mm 229mm;*/ /* Size listed in cover generator of Lightning Source */
    size: 164mm 237mm; /* Size of the printed DB06 book */

    @bottom-center{
        content: counter(page);
        font-size: 9.5pt;
        margin-top: -6mm;
    }
}
@page:right{
    margin: 15mm 20mm 17mm 30mm;

    @top-center{
        content: string(contributiontitle);
        font-size: 8pt;
        text-transform: uppercase;
        margin-top: 5mm;
    }
}
@page:left{
    margin: 15mm 30mm 17mm 20mm;

    @top-center{
        content: string(sectiontitle);
        font-size: 8pt;
        text-transform: uppercase;
        margin-top: 5mm;
    }
}
@page:first{
    background-color: #b89ee6;

    @top-left{
        content: "";
    }
    @top-center{
        content: "";
    }
    @bottom-center{
        content: "";
    }
}
@page nomarks{
    @top-left{
        content: "";
    }
    @top-center{
        content: "";
    }
    @bottom-center{
        content: "";
    }
}
@page:blank{    
    @top-left{
        content: "";
    }
    @top-center{
        content: "";
    }
    @bottom-center{
        content: "";
    }
}

/* sections */

div.section{
    page-break-before: right;
}

/* sub-sections */
div.introduction, 
div.contribution{
    page-break-before: right; 
}
    div.introduction h1{
        display: none;
    }
div.cover.second,
div.multi,
div.series{
    page: nomarks;
}
div.cover.second,
div.multi,
div.series{
    page-break-after: always;
}
div.appendix{
    page-break-before: always;
}

div.cover{
    hyphens: none;
    margin: -10mm 0 0 10mm;
}
    div.cover,
    div.cover ul li{
        font-size: 17pt;
        font-family: "bitter_semi";
        line-height: 1.4;
        letter-spacing: 0.025em;
        color: white;
        font-weight: bold;
    }
    div.cover ul{
        padding: 0;
        margin: 2em 0;
    }
    div.cover ul li{
        list-style: none;
        margin-bottom: 0.5em;
    }
    div.cover.second,
    div.cover.second ul li{
        color: black;
    }
div.series{
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}
    div.series.about{
        width: 55%;
    }      
    div.series.colophon{
        columns: 2 auto;
        column-gap: 5mm;
        column-fill: auto;
    }
div.index{
}
    div.index h3{
        margin: 1em 0 !important;
    }
div.introduction,
div.contribution{
}
    /* author names */
    div.contribution h2 + p > b{
        font-weight: normal;
        margin-left: var(--second-indent);
    }
ol.references,
ul /* This is tricky as it has no class, so these styles are applied to ALL ul elements */{
    /* notes and references */
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    columns: 2 auto;
    column-gap: 7mm;
    margin: 0 1em;
    padding: 0;
}
    div.cover ul,
    div.index ul{
        columns: unset;
    }
    ul li{
        list-style: none;
        text-indent: -1em;
    }
        div.cover ul li,
        div.index ul li{
            text-indent: 0;
        }

/* general elements*/

h1{
    string-set: sectiontitle content(text); 
    font-size: 37pt;
    line-height: 1.15;
    margin: 0;
    word-break: normal;
    hyphens: none;
}
h2{
    /* Contribution titles */
    string-set: contributiontitle content(text);
    font-family: "bitter_semi";
    font-size: 16pt;
    line-height: 22pt;
    letter-spacing: 0.025em;
    margin: 0 0 1em var(--second-indent);
    hyphens: none;
}
h3{
    /* Sub-headers + Notes/References sections + TOC headers*/
    font-size: 100%;
    page-break-after: avoid;
    margin: 1em 0 0 var(--second-indent);
    letter-spacing: 0.05em;
    hyphens: none;
}
    /*This is for the Notes sections only, but how to apply it? */
    /*h3{
        margin: 1em 0 0 10px;
    }*/
h4{
    /* Sub-sub-headers */
    font-size: 100%;
    page-break-after: avoid;
    margin: 1em 0 0 var(--second-indent);
    hyphens: none;
    /*font-style: italic;*/
    font-weight: normal;
    text-decoration: underline;
}
h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
    hyphens: none;
}
p{
    text-indent: var(--first-indent);
    margin: 0;
    padding: 0;
}
    div.series p,
    div.cover p,
    blockquote p{
        text-indent: unset !important;
    }
    div.series p{
        margin-bottom: 1em;
    }
img{
    position: relative;
    display: block;
    width: 115mm; /* estimation of the full text width */
    /*height: auto;*/
    max-height: 220mm;
    margin: 0 0 1em 0;
}
    .thumb{
        /* sometimes wrapper of img + image caption */
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        margin: 1em var(--first-indent);
        page-break-inside: avoid;
        hyphens: none;
    }
    .thumb img{
        margin-left: -7mm !important; /* same as first-indent but inverted */
    }
pre{
    font-size: 8pt;
    line-height: 1.8;
    white-space: normal;
    margin: 1em var(--first-indent);
}
blockquote{
    margin: 0 0 0 var(--second-indent);
    font-style: italic;
}
table{
    width: 100%;
}
sup{
    line-height: 0;
    font-size: 7pt;
    padding-left: 0.5mm;
}
canvas{
    position: absolute;
    top: -15mm; /* invert the main margin */
    left: -30mm; /* invert the main margin */
    border: 1px solid magenta;
    width: 164mm;  
    height: 237mm;
}
a,
a:visited,
a:active,
a:hover{
    color: inherit;
    text-decoration: none;
}

/* specific details, uitzonderingen */
a.external{
    word-break: break-all;
}

@media print{
    html, body{
        background-color: transparent;
    }
    div#nav{
        display: none !important;
    }
}