: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; }