@layer root {
    :root {
        --mastodon-icon: url(/icons/mastodon.svg);
        --github-icon: url(/icons/github.svg);
        --instagram-icon: url(/icons/instagram.svg);
        --feed-icon: url(/icons/feed.svg);

        --social-menu-padding: 1rem;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --mastodon-icon: url(/icons/mastodon-dark.svg);
            --github-icon: url(/icons/github-dark.svg);
            --instagram-icon: url(/icons/instagram-dark.svg);
            --feed-icon: url(/icons/feed-dark.svg);
        }
    }


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

    header.site {
        display: flex;
        width: 100%;
        z-index: 10000;
    }

    header.site h1 {
        margin: 0;
        order: 1;
    }

    header.site > .grid {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.5em;
        margin: 0 auto;
        max-width: var(--content-width);
        padding: 1.5rem 3rem;
        width: 100%;
    }

    header.site > .grid > nav {
        align-items: center;
        display: flex;
        justify-content: start;
        list-style: none;
    }

    header.site nav > li { display: block; }

    header.site nav:first-of-type {
        justify-content: start;
        order: 2;
    }

    header.site nav:last-of-type {
        justify-content: end;
        order: 3;
    }

    @media (max-width: 516px) {
        header.site > .platter {
            border-left: none;
            border-radius: 0;
            border-right: none;
            border-top: none;
        }

        header.site > .grid { max-width: none; }
    }

    @media (max-width: 435px) {
        header.site nav:first-of-type { order: 5; }
    }

    nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); }
    nav.social > li:first-child { margin-inline-start: 0; }

    .social {
        display: block flex;
        letter-spacing: 2px;
        margin-left: auto;
        order: 2;
    }

    .social > li > a {
        background-image: var(--url);
        background-repeat: no-repeat;
        background-size: var(--menu-icon-size);
        display: block;
        height: var(--menu-icon-size);
        width: var(--menu-icon-size);
    }

    .social > li > a > span {
        display: none;
    }

    .social > li + li:before {
        color: var(--dark);
        padding: 0 0.5rem;
    }

    #social-menu-mastodon img {
        content: var(--mastodon-icon);
        position: relative;
        top: 1px;
    }

    #social-menu-github img { content: var(--github-icon); }
    #social-menu-instagram img { content: var(--instagram-icon); }
    #social-menu-feed img { content: var(--feed-icon); }
}