:root {
    --spacing: 8px;
    --spacing-2x: calc(var(--spacing) * 2);

    --light-blue: #7da7d8;
    --dark-blue: #002e5e;
    --text-color: #333;
    --header-logo-width: 80px;
    --main-offset: 1vw;
    --content-max-width: 768px;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text-color);
    font-family: sans-serif;
    font-size: 1.2em;
    line-height: 1.4;
    margin: var(--spacing-2x);
    container-type: inline-size;
}

a:link, a:visited {
    color: var(--dark-blue);
}

a:hover, a:active {
    color: var(--light-blue);
}

.content {
    max-width: var(--content-max-width);
}


.site-header .content {
    font-family: "Alexandria Variable", sans-serif;
    display: flex;
    align-items: center;
}

.site-header a {
    text-decoration: none;
}

.site-header h1 {
    font-size: 100%;
    font-weight: 400;
}

.site-header .name {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 120%;
}

.site-header .title {
    font-size: 90%;
}

.site-header span {
    display: inline-block;
}

.site-name {
    color: var(--light-blue);
    border-color: var(--dark-blue);
    border-style: solid;
    border-width: 1px 0;
    padding: var(--spacing) var(--spacing-2x);
    width: 100%;
}

main, footer {
    margin-left: var(--main-offset);
}

footer .content {
    display: flex;
    justify-content: space-between;
    font-size: 80%; 
}

@container (min-width: 768px) {
    main, footer {
        --main-offset: calc(var(--header-logo-width) + var(--spacing-2x));
    }

    header {
        --content-max-width: calc(768px + var(--header-logo-width));
    }
}