:root{
    --font-size: 12px;
    --line-height: 18px;
    --small-font-size: 10px;
    --small-line-height: 15px;
    --h2-font-size: 21px;
    --h2-line-height: 27px;
    --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;
}

/* general */

body{
    font-family: "bitter";
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: 0.01em;
    hyphens: auto;
}

@page{
    size: 324.6mm 229mm; /* Based on calculations: 323.4, based on canvas template: 324.6 ....... */
    orientation: landscape;
    bleed: 3mm; 
    /*marks: crop;*/
    background: linear-gradient(180deg, #3741ea, #c0c1e7);
    margin: 0;
    padding: 0;
    color: white;
}

div#cover,
div#spine,
div#backcover{
    display: inline-block;
    height: 229mm;
    /*border: 1px solid green;*/
    vertical-align: top;
} 

div#cover,
div#backcover{
    width: 152mm;
    hyphens: none;
    padding: 0 16mm 0 47mm;
}
    div#cover,
    div#cover ul li,
    div#backcover b,
    div#spine{
        font-size: 17pt;
        font-family: "bitter_semi";
        line-height: 1.4;
        letter-spacing: 0.025em;
        color: white;
        font-weight: bold;
    }
    div#cover p,
    div#backcover p{
        margin-top: 0;
        margin-bottom: var(--line-height);
    }
    div#cover p.title,
    div#backcover p.title{
        margin-top: 7.54mm !important;
    }
    div#cover p.title + p,
    div#backcover p.title + p{
        margin-top: -3mm !important;
    }
    div#cover ul{
        padding: 0;
        margin: 2em 0;
    }
    div#cover ul li{
        list-style: none;
        margin-bottom: 0.1em !important;
    }
    div#backcover b{
        margin-left: 0; 
    }
    p#multi{
        position: absolute;
        top: 44mm;
        right: 7mm;
        width: 150mm;
        z-index: 1;
        /*border: 1px solid blue;*/
    }
    div#backcover p#logo-title{
        width: 50mm;
        margin-left: -23mm;
        margin-top: 17.5mm !important;
    }
    div#backcover p#barcode {
        bottom: 9mm;
        position: absolute;
        left: 88mm;
    }
div#spine{
    width: 19.4mm;
}
    div#spine p#title{
        position: absolute;
        top: 22mm;
        transform: rotate(90deg);
        transform-origin: 8% -4%;
        width: 229mm;
        height: 15mm;
        /*border: 1px solid lime;*/
    }
    div#spine p#multi-small {
        position: absolute;
        top: 114mm;
        width: 18mm;
        height: auto;
        margin: 0 0.7mm;
        padding: 0;
    }
    div#spine p#logo {
        position: absolute;
        bottom: 10mm;
        width: 8mm;
        height: auto;
        margin: 0 5.2mm;
        padding: 0;
    }

div#backcover p#logo-title img,
div#spine p#multi-small img,
div#spine p#multi img,
div#spine p#logo img{
    width: 100%;
}

a,
a:visited,
a:active,
a:hover{
    color: inherit;
    text-decoration: none;
    page-break-inside: avoid;
}