html, body
{
    margin: 0;
    padding: 0;
}

html
{
    font-family: monospace;
    font-size: 16px;

    color: #484848;
    --alt-color: #1b4f86; /* #1c718b; */
    --block-pad: 2rem;
}

.u-text-smaller
{
    font-size: 85%;
}

.u-text-center
{
    text-align: center;
}

.u-text-normal
{
    font-weight: normal;
}

.c-page
{
    display: grid;
    grid-template-columns: 20% auto;
    grid-template-rows: auto min-content;
    min-height: 100vh;

    background: #b5b5b5;
}

.c-page__header
{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin: 3rem 0;
    padding: 1rem;
}

.c-page__header-logo-wrapper
{
    text-align: center;
}

.c-page__header-logo-wrapper span
{
    display: block;
}

    .c-page__footer-logo
    {
        height: 3rem;
    }

.c-page__document-wrapper
{
    display: grid;
    min-height: 100%;
}

    .c-page__document
    {
        margin: 3rem 0;
        padding: 1rem;
        padding-left: 3rem;
        max-width: 60rem;
        border-left: 1px solid rgba(0,0,0,0.125);
        box-shadow: -10em 0 10em -10em rgba(0,0,0,0.125);
    }

    .c-page__document-title
    {
        margin: 0 auto var(--block-pad);
        padding: 1em 0;
        background: var(--alt-color);
        color: #dddddd;
        border-radius: 100% / 1em;
        box-shadow: inset 0 0 0.3em rgba(0,0,0,0.5);
        text-align: center;
        max-width: 40em;
    }

    .c-page__document-title.c-page__document-title--error
    {
        --alt-color: #751836;
    }

    a { color: var(--alt-color); }