:root{
    --font-size: 10pt;
    --line-height: 15.5pt;
    --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-SemiBold.ttf);
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family: "bitter";
    src: url(../fonts/Bitter-Medium.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;

    @top-center{
        content: string(sectiontitle);
        font-size: 8pt;
        text-transform: uppercase;
        margin-top: 5mm;
    }
    @bottom-center{
        content: counter(page);
        font-size: 9pt;
        margin-top: -6mm;
    }
}
@page:right{
    margin: 15mm 20mm 17mm 30mm;
}
@page:left{
    margin: 15mm 30mm 17mm 20mm;
}
@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: "";
    }
}


/* general elements*/
h1{
    string-set: sectiontitle content(text); 
    font-size: 37pt;
    line-height: 1.4;
    margin: 0;
    color: green;
    word-break: normal;
    hyphens: none;
}
h2{
    string-set: contributiontitle content(text); 
    font-size: 16pt;
    line-height: 22pt;
    letter-spacing: 0.025em;
    margin: 0 0 1em var(--second-indent);
    hyphens: none;
}
h3{
    font-size: 100%;
    margin: 1em 0 0 var(--second-indent);
    page-break-after: avoid;
    hyphens: none;
}
h4, h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
    hyphens: none;
}
.thumb{
    /* image caption */
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
}
img{
    position: relative;
    display: block;
    max-width: 100mm;
    height: auto;
    margin: 0 0 8pt 0;
}
pre{
    font-size: 8pt;
    line-height: 1.8;
    white-space: normal;
    margin: 16pt 16pt;
}
table{
    width: 100%;
}
sup{
    line-height: 0;
}
a,
a:visited,
a:active,
a:hover{
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

/* 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;
        line-height: 1.4;
        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;
    }
div.introduction,
div.contribution{
}
    div.introduction p,
    div.contribution p{
        text-indent: var(--first-indent);
        margin: 0;
        padding: 0;
    }
    div.introduction ol.references,
    div.contribution ol.references{
        /* notes and references */
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        columns: 2 auto;
        column-gap: 7mm;
        margin: 1em 0;
        padding: 0;
    }

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