.header {
    max-width: 700px;
    padding: 2em 1em 0;
    margin: 0 auto 3em;
    text-align: center;
    font-family: var(--font-josefin);

    span {
        white-space: nowrap;
    }

    span:not(:last-child)::after {
        content: " × ";
        color: var(--color-grey-blue-lighten-50);
        padding: 0 0.2em;
        font-weight: 400;
        position: relative;
        top: -0.1em;
    }

    a {
        color: var(--color-grey-blue);
    }

    h1 {
        font-size: 3em;
        font-weight: bold;
        line-height: 1;
        margin: 0 0 0.19em;
    }

    hr {
        margin: 1.5em 0 0;
        width: 100%;
    }
}

.footer {
    margin: 3em auto 0;
    text-align: center;
    padding: 0.75em 0;
    font-family: var(--font-josefin);

    nav {
        margin: 0 0 0.6em;
        font-size: 0.8em;
    }

    a {
        color: var(--color-grey-blue);
    }

    span:not(:last-child)::after {
        content: " × ";
        color: var(--color-grey-blue-lighten-50);
        padding: 0 0.4em;
        font-weight: 400;
        position: relative;
        top: -0.1em;
    }

    div {
        margin: 0 0 0.6em;
    }

    p {
        color: var(--color-grey-blue-lighten-40);
        font-size: 0.7em;
        margin: 0;
    }
}

.alert {
    background: var(--color-code-background);
    display: flex;
    font-size: 0.9em;
    line-height: 1.4;
    margin: 1.5em auto;

    .alert-body {
        flex: 1;
        margin: 0;
        padding: 1em;
    }

    .alert-icon {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 3.4em;
    }

    &.alert--info,
    &.alert--warn {
        .alert-body {
            padding: 1em 1em 1em 0;
        }
    }

    &.alert--info {
        border-top: 2px solid var(--color-info);
        .alert-icon {
            path {
                fill: var(--color-info);
            }
        }
    }

    &.alert--warn {
        border-top: 2px solid var(--color-warn);
        .alert-icon {
            path {
                fill: var(--color-warn);
            }
        }
    }
}