@page { size: 21.0cm 29.7cm; margin: 0; } * { margin: 0; padding: 0; font-family: 'Leelawadee UI'; font-size: 12pt; font-weight: 200; /* print background and images */ -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */ print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */ } #left-panel { float: left; width: 6.7cm; height: 29.7cm; background: rgb(185,205,229); } #right-panel { margin-left: 6.7cm; padding: 2.5cm 1cm; } /* CV heading */ h1 { font-size: 18pt; font-weight: 500; } /* Section heading */ h2 { float: right; color: white; font-weight: bold; background: rgb(37,54,97); display: block; left: 100%; padding: 5pt 8pt 8pt 8pt; padding-right: 1cm; width: 4cm; /* - margin-right => 5 cm */ /* ends up 53 x 11.6 mm in print */ text-align: right; margin-right: -1cm; margin-top: 0pt; /* like -h2.padding-top + div.block.padding-top, to align text baseline with panel content */ font-size: 13pt; } /* Block heading */ h3 { font-weight: normal; margin-bottom: 8pt; } /* Block heading: subject */ h3 span.t { font-weight: 800; } div.block { padding: 8pt 0; } div.block p { line-height: 1.4; } div.left-hang { float: left; margin-left: -6.9cm; /* -(#left-panel.width - #right-panel.padding-left + target-margin-left) */ } img#david-portrait { width: 5.1cm; /* #left-panel.width - 2 * padding [0.8cm] */ border-radius: 50%; }