@charset "utf-8";

/* ***************************************
Load the fonts
****************************************/

/* For the body we use EB-Garamond: https://github.com/georgd/EB-Garamond */
@font-face {
  font-family: "EBGaramond";
  src: url("https://chatty-pub-files.hackersanddesigners.nl/files/2/e4/6D0tK3c0U1wJFi3SjneR3yAc/EBGaramond12-Regular.woff2") format(woff);
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EBGaramond";
  src: url( "https://chatty-pub-files.hackersanddesigners.nl/files/2/68/2QuWAig7wMXvhNPyMG43AC-8/EBGaramond12-Italic.woff2") format(woff);
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* And for headlines and quotes use Work Sans, we load only the bold variant:
https://github.com/weiweihuanghuang/Work-Sans */
@font-face {
  font-family: "WorkSans";
  src: url( "https://chatty-pub-files.hackersanddesigners.nl/files//2/e0/txPeHFxmUhxrYcnBlpFfkImX/WorkSans-Bold.otf"
  );
font-weight: bold;
}

/****************************************
Setup variables for the fonts used
****************************************/

:root {
     --headline-font: "WorkSans";
     --body-font: "EBGaramond";
     --main-text-color: #000;
     --main-bg-color: #fff;
     --cover-text-color: #fff;
     --cover-bg-color: #000;
}

/* ***************************************
Pagedjs specific styles
****************************************/

@page {
    size: A5;
    margin: 10mm 15mm 20mm 15mm;

    @bottom-center{
        content: counter(page);
        font-family: var(--headline-font);
        font-size: 120%;
    }
}

@page:first {    
    color: white;
    background-size: cover;  
    background-repeat: no-repeat;
}

/*
Remove page number from first page
*/
@page :first {
  @bottom-center {
    content: none;
  }
}

@page {
    @footnote { float: bottom; }
}

/*
Remove page number from last page
*/
.pagedjs_page.pagedjs_last_page .pagedjs_margin-bottom-center > .pagedjs_margin-content::after {
    content: none;
}

/*
Footnotes
*/
.footnotes {
    font-family:  var(--headline-font);
    font-size: 9px;
}

.pagedjs-end-to-footnote {
  float: footnote;
}

.pagedjs-end-to-footnote > p {
    display: inline;
}

#footnotes {
    display: none;
}

.footnotes > hr {
    display: none;
}

/* ***************************************
General styling
****************************************/
html { font-synthesis: weight; }
strong, b { font-weight: 700; }

body{
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.5;
}

h1, h2, h3, blockquote {
    font-family:  var(--headline-font);
    break-inside: avoid;
}

h1 {
    font-family:  var(--headline-font);
    font-size: 350%;
    line-height: 1.1em;
}

a {
    color: var(--main-text-color);
    text-decoration: none;
}

p {
    orphans: 3;
}

blockquote{
   font-size: 140%;
   line-height: 1.2em;
}

sup {
    font-family:  var(--headline-font);
    font-size: 70%;
    line-height: 1.1em;
    color: var(--text-color);
    text-decoration: none;
}

.cover sup {
    color: var(--cover-text-color);
}

/*
*** alone on a line in markdown will be turned into a <hr>
we use this a way to force a page break, and hide the hr itself.
*/

hr {
    break-after: page;
    border: none;
    margin: 0;
    height: 0;
}

.footnotes hr {
    break-after: unset;
    border: revert;
}

.divider {
    background-color: white;
    height: .5em;
    display: block;
}

/* ***************************************
Cover page specific styles
****************************************/

.cover{
    break-after: always;
    font-family: var(--headline-font);
    margin-top: 50px;
    padding: 15px;
    background-color:  var(--cover-bg-color);
    background-clip: border-box;  
}

.cover h1 {
    font-family:  var(--headline-font);;
    font-size: 350%;
    line-height: 1.1em;
    margin: 2rem 0 1rem;
}

.cover h2 {
    font-family:  var(--headline-font);;
    font-size: 150%;
    line-height: 1.1em;
}

/* ****************************************************
Main section specific styles
****************************************/

.main h2 {
    font-size: 180%;
    line-height: 1.2em;
}

/*
Images are always grayscale in the main content and
are alone on a page
*/
.main img {
    display: block;
    filter: grayscale(100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 100%;
    /*page-break-after: always;
    page-break-before: always;*/
}

/* ***************************************
Custom sections.
You can define your own sections by creating Markdown blocks:
   
::: block-name

your content

:::

which will get converted to <section class="block-name"></section>
and you can target by using .block-name
****************************************/