:root {
    --fuckboy-teal: #28929f;
    --fuckboy-teal-light: #e4edee;
    --spacing-unit: 5px;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: calc(3 * var(--spacing-unit));

    max-width: 750px;
    font-family: sans-serif;
}

a,
a:visited,
a:active,
a:hover {
    color: var(--fuckboy-teal);
}

header,
footer {
    margin: 0;
    padding: calc(3 * var(--spacing-unit));

    background-color: var(--fuckboy-teal-light);
    border-radius: calc(2* var(--spacing-unit));
    border: 1px solid var(--fuckboy-teal);

    h1:first-child,
    p:first-child,
    figure:first-child {
        margin-top: 0;
    }

    h1:last-child,
    p:last-child,
    figure:last-child {
        margin-bottom: 0;
    }
}

header {
    margin-bottom: calc(6*var(--spacing-unit));
}

footer {
    margin-top: calc(6*var(--spacing-unit));
}

header h1,
footer h1,
main h1 {
    font-size: 1.25rem;
    margin: calc(6*var(--spacing-unit)) 0 0 0;

    a,
    a:visited,
    a:active {
        text-decoration: none;
        color: inherit;
    }

    a:hover {
        text-decoration: underline;
        color: inherit;
    }

    + h1 {
        margin-top: calc(var(--spacing-unit));
    }
}

p,
figure {
    margin: calc(2*var(--spacing-unit)) 0;
    padding: 0;
}

figure {
    max-width: 100%;

    img {max-width: 100%; }
}

blockquote {
    margin: 0 0 0 calc(2*var(--spacing-unit));
    padding: 0 0 0 calc(2*var(--spacing-unit));
    border-left: 1px dashed var(--fuckboy-teal);
}

code {
    background-color: var(--fuckboy-teal-light);
}

figure {
    text-align: center;
}

hr {
    border: none;
    border-top: 1px dashed var(--fuckboy-teal);
    max-width: 450px;
}