: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;
}
@page:left{
    margin: 15mm 30mm 17mm 20mm;
}
@page main:right{
    /* running header: contribution title (h2) */
    @top-center{
        content: string(contributiontitle);
        font-size: 8pt;
        text-transform: uppercase;
        margin-top: 5mm;
    }
}
@page main:left{
    /* running header: section title (h1) */
    @top-center{
        content: element(sectiontitle);
        font-size: 8pt;
        text-transform: uppercase;
        margin-top: 5mm;
    }
}
@page section{
    background-color: lightyellow;

    @top-center{
        content: none;
    }
}
@page introduction{
    /* exception running-header for the introduction */
    @top-center{
        content: element(introductiontitle);
    }
}
@page:first{
    background-color: #b89ee6;

    @top-center{
        content: none;
    }
    @bottom-center{
        content: none;
    }
}
@page backcover{
    background-color: #b89ee6;

    @top-center{
        content: none;
    }
    @bottom-center{
        content: none;
    }
}
@page nomarks{

    @top-center{
        content: none;
    }
    @bottom-center{
        content: none;
    }
}
@page:blank{ 

    @top-center{
        content: none;
    }
    @bottom-center{
        content: none;
    }
}

/* sections */

div.section{
    page: main;
    /* force an extra blank page before each section ... */
    page-break-before: always;
}
    div.section.foreword_and_introduction{
        page: main;
        /* reset this extra page break for the foreword + introduction section (does not work?) */
        page-break-before: none !important;
    }
    div.section h1{
        page: section;
        /* ... and make sure that each section starts on the right */
        page-break-before: right;
    }

/* sub-sections -- page flows */
div.multi,
div.foreword, 
div.introduction, 
div.contribution{
    page-break-before: right; 
}
    div.introduction{
        page: introduction;
    }
div.section.nomarks,
div.section.toc{
    page: nomarks;
}
div.cover.second,
div.multi,
div.series{
    page-break-after: always;
}
div.appendix{
    page-break-before: always;
}
div.backcover{
    page-break-before: always;
    page: backcover;
}

/* sub-sections -- lay-out rules */

div.cover,
div.backcover{
    hyphens: none;
    margin: -10mm 0 0 10mm;
}
    div.cover,
    div.cover ul li,
    div.backcover h2{
        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.backcover{
    }
        div.backcover h2{
            margin-left: 0;
        }
        div.backcover p{
            margin-bottom: 1em;
            color: white;
        }
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;
    }

/* Table of Contents */
div.toc *{
    font-size: var(--font-size);
}
    div.toc p:first-of-type{
        font-size: 17pt !important;
        font-family: "bitter_semi";
        line-height: 1.4;
        letter-spacing: 0.025em;
        margin: -10mm 0 1em 10mm !important;
    }
    div.toc a::before{
        content: target-counter(attr(href url), page);
        float: left;
        margin-left: -3em;
    }
    div.toc p{
        margin-top: 1em;
    }
    div.toc ul{
        margin: 1em 0 0 3em;
        /*page-break-inside: avoid;*/
        /*page-break-before: avoid;*/
    }
        div.toc ul li{
            margin-bottom: 0.5em;
        }

div.introduction,
div.contribution{
}
    div.introduction h1{
        display: none;
    }
    div.contribution h2 + p > b{
        font-weight: normal;
    }
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;
}
    /* exceptions of columns */
    div.cover ul,
    div.toc ul{
        columns: unset;
    }
    ul li{
        list-style: none;
        text-indent: -1em;
    }
        div.cover ul li,
        div.toc ul li{
            text-indent: 0;
        }
div.item_index{
}
    div.item_index a::after{
        content: target-counter(attr(href), page);
        float: right;
    }

/* general elements*/

h1{
    /* section titles */
    font-size: 37pt;
    line-height: 1.15;
    margin: 0;
    word-break: normal;
    hyphens: none;
}
    /* h1's are preceded by a <span class="running-header"></span> */
    .running-header{
        position: running(sectiontitle);
    }
h2{
    /* Contribution titles */
    string-set: contributiontitle content(text) !important; /* using data attributes in HTML to save short versions of the title -- edited on the wiki */
    font-family: "bitter_semi";
    font-size: 16pt;
    line-height: 22pt;
    letter-spacing: 0.025em;
    margin: 0 0 1em var(--second-indent);
    hyphens: none;
}
    div.foreword .running-header,
    div.introduction .running-header{
        position: running(introductiontitle);
    }
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;
}
    /* all exceptions on the text-indent */
    div.toc p,
    h2 + p,
    h3 + p,
    div.series p,
    div.cover p,
    div.backcover 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: 200mm;
    margin: 1em 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.15mm;
}
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;
    }
}