@page { size: A4 portrait; margin: 16mm; @bottom-right-corner { content: counter(page) '/' counter(pages); margin-left: 1em; } } @media print { footer { position: absolute; bottom: 0; } } @media screen { html { margin: 4em auto 4em auto; width: 60em; } body > section:not(:first-child) { margin-top: 12em; } } /* */ * { margin: 0; padding: 0; font-family: monospace, monospace; font-size: 14px; color: #111; } h1, h2, h3 { margin: 0; color: #444; } h2 { font-size: 1.2em; } ul li { list-style: none; } a, a:visited { color: #000; } article { margin-top: 2em; margin-bottom: 2em; } header article { margin: 0; } header { display: flex; } footer { width: 100%; } body > section { break-before: always; } /* table */ table * { vertical-align: top; } table { border-collapse: collapse; } table { width: 100% } /* items */ article.items table { width: 100%; margin: 4em 0 4em 0; } article.items table tr th:last-child, article.items table tr td:last-child { text-align: right; } article.items table thead tr th:first-child { width: 60%; } article.items table tfoot, table thead { border-bottom: solid 1px black; } article.items table tfoot { border-top: solid 1px black; } article.items table tfoot td { font-weight: 700; } /* metadata */ article.metadata { width: 40%; } article.metadata table { width: 100%; } article.metadata table tr td:first-child { width: 50%; } /* */ article.tax table tr td:first-child, article.bank table tr td:first-child { width: 20%; } article.company { width: 60%; } article.bank { padding-top: 1em; border-top: solid 1px #444; } article.annex p { background-color: #000; color: #fff; font-weight: 700; } p.comment { color: #444; margin-left: .5em; }