.invoice {
    display: flex;
    gap: 2.5rem;
}

.invoice header {
    flex: 1;
    min-width: 20rem;
    padding: 0 1rem 0 0;
    display: block;
    background: initial;
    border-right: 2px dashed lightgray;
}

.invoice h1 {
    font-size: 1.6rem;
}

.invoice .invoicer {
    margin-top: 20rem;
}

.invoice > div {
    display: flex;
    flex-direction: column;
    flex: 3;
    gap: 5rem;
    align-items: end;
}

.invoice th {
    font-weight: normal;
    text-transform: uppercase;
}

.invoice thead th {
    text-align: left;
    border-bottom: 2px solid black;
}

.invoice .tfoot th, .invoice .numeric {
    text-align: right;
}

.invoice .notes, .invoice footer {
    white-space: pre;
    text-align: right;
}

.invoice td {
    vertical-align: top;
}

.invoice tbody, .invoice footer {
    page-break-inside: avoid;
}

.invoice tbody tr {
    background-color: initial;
}


.invoice tbody:not(:first-of-type) tr:first-child td, .invoice .tfoot th, .invoice .tfoot td {
    padding-top: 1em;
}

.invoice tbody .name td:first-child {
    font-weight: bold;
}

.invoice tbody td:first-child {
    max-width: 20rem;
}

.invoice footer {
    margin-top: 8rem;
    font-size: 1.2rem;
}

@media print {
    @page {
        size: A4;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html, body {
        height: 100%;
    }

    html {
        font-family: sans-serif;
        font-size: 62.5%;
    }

    body {
        background-color: white;
        color: black;
        font-size: 1.6rem;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    body > header, nav {
        display: none;
    }

    .invoice {
        height: 100vh;
    }
}