:host {
    display: block;
    margin: 12px 0;
}

header {
    background-image: url("/assets/black-hole.webp");
    background-position: center;
    background-size: auto 150%;
    background-repeat: no-repeat;

    ul,
    li {
        padding: 0;
        margin: 0;
    }

    ul {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-items: center;
        justify-content: center;
        gap: 1em;
        padding: 0.5em;

        @media (max-width: 640px) {
            grid-template-columns: repeat(2, auto);

            & .deco {
                display: none;
            }
        }

        @media (max-width: 400px) {
            grid-template-columns: auto;
        }

        & li {
            list-style-type: none;

            & .star-1 {
                width: 24px;
                height: 24px;

                @media (prefers-reduced-motion) {
                    visibility: hidden;
                }
            }

            & .star-2 {
                @media (prefers-reduced-motion) {
                    visibility: hidden;
                }
            }

            & a {
                padding: 4px 8px;
                display: inline-flex;
                border-radius: 4px;
                text-decoration: none;
                border: 6px solid transparent;
                border-image: url("/assets/_ui/button-border.webp") 50 / 10px / 2px;
                line-height: 1em;
                align-items: center;
                background-color: var(--ui-surface-bg);

                & img {
                    width: 1.5em;
                    height: 1.5em;
                    margin-right: 0.4em;
                    mix-blend-mode: color-burn;
                }

                &:not(:hover):not(:active) {
                    &:link img {
                        filter: contrast(2);
                        mix-blend-mode: multiply;
                    }
                }

                &:link {
                    color: inherit;
                }

                &:visited {
                    color: var(--ui-visited-fg);
                }

                &:hover {
                    color: var(--ui-hover-fg);
                    background-color: var(--ui-hover-bg);
                    border-image: url("/assets/_ui/button-border-hover.webp") 50 / 10px /
                    2px;

                    @media (prefers-reduced-motion) {
                        &:not(:active) {
                            box-shadow: 1px 1px 2px var(--ui-hover-fg);
                        }
                    }
                }

                @media not (prefers-reduced-motion) {
                    & {
                        transition: box-shadow 0.25s ease-in-out;
                        box-shadow: 0 0 32px #cfafff00, 0 0 16px #cfafff00, 0 0 8px #cfafff00, 0 0 4px #cfafff00;
                    }

                    &:hover {
                        box-shadow: 0 0 32px #cfafff, 0 0 16px #cfafff,
                        0 0 8px #cfafff, 0 0 4px #cfafff;
                    }
                }

                &:active {
                    color: var(--ui-active-fg);
                    background-color: var(--ui-active-bg);
                    border-image: url("/assets/_ui/button-border-active.webp") 50 / 10px / 2px;
                }
            }
        }
    }

}