@media print{

  /* format and pagedjs polyfill */
  @page {
    /* A5 */
    size: 148mm 210mm;
    margin: 1cm;
  }
  @page cover{
    margin: .75cm;
  }
  
  /* only for the page in the flowing section */
  @page flowing{
      @bottom-right{
          --b: .4em;
          content: "page " counter(page);
          text-align: center;
        }
    }
    @page flowing:left{
        margin-right: 2cm;
        /* @right-middle{
            content: "";
            display: block;
            border-image: url(/img/tile_1_grey_l.png);
            border-image-slice: 8;
            border-image-width: var(--side);
            border-image-repeat: repeat;
            image-rendering: crisp-edges;
        } */

    }
    @page flowing:right{
        margin-left: 2cm;
        /* @left-middle{
            content: "";
            display: block;
            border-image: url(/img/tile_1_grey_r.png);
            border-image-slice: 8;
            border-image-width: var(--side);
            border-image-repeat: repeat;
            image-rendering: crisp-edges;
        } */
    }

    /* THOSE PRINTING STYLE APPLY EVERYWHERE */

    /* print colors */
    html{
        font-size: 9pt;
    }
    body{
        --back: white;
        --back-green: white;
        --pink: dimgray;
        --blue: black;
        --text: black;
        --back-text: white;

        --border-image: url('/img/tile_1_grey.png');

        --border-thick-w: 0.4rem;
        --border: 1pt solid currentColor;
        --border-thick: var(--border-thick-w) solid currentColor;

        --card-w: min(8.8cm, 100%);

        --dashed-1: 2pt;
        --dashed-2: 3pt;
        --side: calc(8px * 2.5);
    }

    /* removing a bunch of stuff */
    .palettes{
        display: none;
    }
    body{
        margin: 0;
    }
    body::after, body::before{
        display: none;
    }

    /* reseting a bunch of stuff */
    .img-wrapper::after{
        /* removing mask-image layer */
        content: none;
    }
    img{
        /* and just show the image */
        opacity: 1 !important;
    }
    .card:hover{
        bottom: 0;
        border-color: var(--text);
    }

    /* add a shadow to the card :) */
    .card{
        box-shadow: 1em .5em gainsboro;
    }

    /* show image and cancel left space */
    :root{
        --split: auto;
    }
    .image-back{
        position: relative;
        inset: 0;
        max-width: 36rem;
        margin: 0 auto;
    }
    .image-back img{
        margin-top: -10%;
    }
    main{
        padding: 0 1rem;
        margin: auto !important;
    }
    .inside-nav, .main-nav{
        padding: 1rem;
        margin: auto;
    }

    /* don't break inside */
    blockquote, li{
        break-inside: avoid;
    }

    /* SPECIFIC PRINTING STYLES */

    /* printing the blockquote */
    blockquote{
        background: initial;
        outline-color: var(--grey);
    }

    /* make links href visible */
    a:not(.card, .permalink)::before{
        content: attr(href);
        float: right;
        font-weight: normal;
        margin-left: 1em;
        font-size: 8pt;
        margin-top: 2pt;
        background-color: lightgray;
        clear: both;
    }
    .permalink{
        background-color: lightgray;
        border: 0;
        display: inline-block;
        margin-left: 1em;
    }
    main h2 {
        font-size: 12pt;
    }
}

/* page number thing! */
.pagedjs_margin-content{
    width: fit-content !important;
    margin: 0 auto;
    padding: 0 .5em;
    position: relative;
}

.pagedjs_margin.pagedjs_margin-bottom-right.hasContent .pagedjs_margin-content{
    background-color: var(--text);
    color: white;
    position: relative;
    top: calc(var(--b) * -1);
}

.pagedjs_margin-content::before{
    content: '';
    position: absolute;
    inset: 0;
    top: 100%;
    border-top: var(--b) solid var(--blue);
    border-left: var(--b) solid transparent;
    border-right: var(--b) solid transparent;
    border-bottom: 0;
}

/* sections with different margins */
.cover{
    page: cover;
}
.flowing{
    page: flowing;
}
section{
    break-before: always;
}
p + ul{
    break-before: avoid;
}
p:has(strong){
    break-after: avoid;
    break-inside: avoid;
}
li:first-of-type{
    break-before: avoid;
}

/* remove the titles can comes from markdown
(and use the one in the card) */
.flowing main h1{
    display: none;
}

/* the big card in print mode */
.card-print{
    font-size: 14pt;
    margin: 0 auto 2em;
    padding: 1rem;
    border-width: 0.8rem;
    border-radius: 0.8rem;
}
.card-print h2{
    font-size: 20pt;
}

/* the cover! */

/* printing the header */
.cover .home-link-print{
    background-color: black;
    padding: 0.125em 0.25em;
    font-size: 36pt;
    outline: var(--dashed-2) dashed black;
    color: white;
    text-transform: lowercase;
    font-style: italic;
    font-weight: normal;
    letter-spacing: -0.025em;
}

/* placement of the 2 stitch */
.home-link-print:nth-of-type(1) {
    position: absolute;
    right: calc(50% - .5em);

    top: 0.4em;
    z-index: 1;
}
.home-link-print:nth-of-type(2) {
    position: absolute;
    left: calc(50% - .75em);
    top: calc(50% - 1.5em);
    z-index: 4;
} 

.cover .card{
    box-shadow: none;
}
.cover .inside-nav{
    margin-top: 2.5cm;
    padding: 0;
}
.cover .inside-nav ul{
    gap: 0;
}
.cover .inside-nav li{
    max-width: 18rem;
}
.cover .inside-nav li:nth-of-type(1){
    transform: rotate(-4deg);
    
    position: relative;
    left: -0.5em;
    z-index: 2 !important;
}
.cover .inside-nav li:nth-of-type(2){
    transform: rotate(10deg);

    position: relative;
    top: -6.3em;
    z-index: 0 !important;
}
.cover .inside-nav li:nth-of-type(3){
    transform: rotate(-12deg);

    position: relative;
    right: -1em;
    top: -.5em;
    z-index: 9 !important;
}
.cover .inside-nav li:nth-of-type(4){
   transform: rotate(3deg);

   position: relative;
   top: 2em;
   z-index: 10 !important;
}

.cover-text{
    position: absolute;
    bottom: 0;
    background-color: white;
    border-top: var(--border);
    padding: .5em 0;
    margin: 0;
    width: 100%;
    text-align: center;
}