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

:root {
    --h-size: 80ch;
    --spacing: 0.5rem;
    --animation-duration: 200ms;
}

body {
    max-width: calc(var(--h-size) + 2 * var(--spacing));
    margin: 1rem auto;
    padding-inline: var(--spacing);
    font-family: Helvetica, system-ui, sans-serif;
    line-height: 1.5;
}

#header, #footer {
    background-image: url('/static/cjd.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    padding: .5em;
}

#header {
    background-position: left;
    text-align: left;
    padding-left: 5em;
}

#footer {
    background-position: right;
    text-align: right;
    padding-right: 5em;
}

.link {
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}