@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);
        }
    }

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

    #social-menu-mastodon img {
        position: relative;
        top: 1px;
    }
}