:root { --background-body: #EEEEEC; --background-page: #FFFFFF; --background-dark: #2E3436; --foreground-dark: #2E3436; --foreground-medium-dark: #5a5b57; --foreground-medium: #7a7b77; --foreground-medium-light: #D3D3D3; --foreground-light: #EEEEEC; --foreground-white: #FFFFFF; --foreground-link: #005b9e; } * { box-sizing: border-box; -moz-box-sizing: border-box; } h1 { margin: 6mm 0 6mm 0; font-size: 32pt; font-weight: 900; } h2 { margin: 3mm 0 3mm 0; font-size: 18pt; font-weight: 600; text-transform: uppercase; } h3 { margin: 8mm 0 4mm 0; font-size: 16pt; font-weight: 600; text-transform: uppercase; } h4 { margin: 3mm 0 3mm 0; font-size: 12pt; font-weight: 600; text-transform: uppercase; } h5 { margin: 3mm 0 4mm 0; font-size: 11pt; font-weight: 600; color: var(--foreground-medium-dark) } p { font-size: 11pt; } .command { font-weight: 600; font-size: 10pt; margin: 8mm 0mm 2mm 0mm; } .skill { padding: 1mm 2mm; margin: 1mm 1mm 0 0; border-radius: 12px; background-color: var(--foreground-medium); color: var(--foreground-white); font-weight: 600; font-size: 10pt; float: left; font-family: "Courier New", monospace; letter-spacing: 0; } body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: var(--background-body); color: var(--foreground-dark); font-family: Garamond, serif; } .page { width: 210mm; min-height: 297mm; margin: 10mm auto; border: 1px var(--foreground-medium-light) solid; border-radius: 5px; box-shadow: 0 0 5px var(--foreground-medium-light); background-color: var(--background-page); } .page header, footer, .side { color: var(--foreground-dark); } .page > header { position: relative; width: 100%; height: 80mm; background-color: var(--background-page); background-clip: content-box; padding: 3mm 3mm 0mm 3mm; color: var(--foreground-medium-dark); line-height: 1.1; } .page > header .photo { position: absolute; right: 3mm; margin-right: 4mm; font-size: 8pt; line-height: 1.25; color: var(--foreground-medium); text-align: end; font-family: "Courier New", monospace; } .page > header .wrapper { margin: 8mm 0 0 8mm; float: left; } .page > .side { float: left; width: 40%; height: 202mm; padding: 3mm 0mm 3mm 9mm; background-color: var(--background-page); background-clip: content-box; } .page > .side .wrapper { margin: 4mm 3mm 4mm 3mm; } .page > .right { float: left; width: 56%; height: 202mm; padding: 6mm; line-height: 1.4; letter-spacing: 0.02mm; } .page > .full { width: 100%; height: 282mm; padding: 20mm 24mm 24mm 24mm; line-height: 1.4; letter-spacing: 0.02mm; } .page .experience { float: left; margin: 8mm 0 0 0; } .page .experience:first-of-type { margin: 4mm 0 0 0; } .page .experience p { margin: 0; } .page .skills { float: left; margin-top: 4mm; } .page > footer { width: 100%; height: 15mm; background-color: var(--background-page); background-clip: content-box; padding: 0mm 3mm 3mm 3mm; float: left; } .page > footer .left { margin: 4mm; font-size: 10pt; float: left; } .page > footer .right { margin: 4mm; font-size: 10pt; float: right; } .page a:visited, a:link { color: var(--foreground-link); text-decoration: underline; } .page ul { display: inline; padding: 0; } .page ul > li { list-style: none; font-size: 10pt; padding: 1mm; } @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; background-color: var(--background-page); } .page { width: initial; min-height: initial; margin: 0px; border: initial; border-radius: initial; background: initial; box-shadow: initial; page-break-after: always; } .page > header .photo { line-height: 1.25; } }