/* Printing */ @media print { .no-print { display: none !important; } } /* Variables */ /* Blue - Beige */ :root { /*--primary: #bfb04c; --secondary: #bdad46; --tertiary: #4b5743; --quaternary: #3e4637; --background_paper: #453d3e; --background: #353d2e;*/ --primary: #f74510; --secondary: #c6b652; --tertiary: #5a6952; --quaternary: #424542; --background_paper1: #293029; --background_paper2: #293019; --background_paper3: #293009; --background: #5a6952; /*--tertiary: #948979;*/ /*--quaternary: #f5bb78;*/ /*--background: #c4bbb8;*/ /*--background_paper: #dfd0b8;*/ } body { /*background-image: linear-gradient(to bottom, aqua, blue);*/ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; /*width: 100vw;*/ /*height: 100vh;*/ /*background-image: url("../img/background.png"); background-size: cover;*/ background-color: var(--background); } div { background-color: var(--background_paper1); box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); border: solid 2px var(--primary); } div > div { background-color: var(--background_paper2); box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); border: solid 2px var(--primary); } div > div > div { background-color: var(--background_paper3); box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); border: solid 2px var(--primary); } p { color: var(--secondary); } h1, h2, h3, h4 { color: var(--primary); } .album-img { width: 50mm; height: 50mm; } .floating { position: absolute; } /* A5 Page */ .a5page { /* overflow: scroll; */ display: flex; flex-direction: column; font-family: var(--font-text); height: 148mm; width: 210mm; padding: 5mm; box-sizing: border-box; background-color: var(--background_paper); box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); border: solid 2px var(--primary); } /* A4 Page */ .a4page { line-height: 1.6; font-family: var(--font-text); width: 210mm; /* Standard A4 width */ height: 297mm; /* Standard A4 height */ padding: 10mm; box-sizing: border-box; background-color: var(--background_paper); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); border: 1px solid var(--primary); overflow: auto; /* Enables scrolling when content exceeds height */ margin: 0 auto; /* Centers the page horizontally */ }