header {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--header-text);

    figure {
        display: grid;
        gap: 1em;
        align-items: center;
        grid-template-columns: repeat(2, auto);
        font-family: 'noto-sans-light', sans-serif;

        figcaption {
            display: grid;
            gap: 0.5em;
        }
    }

    nav {
        padding: 0.75rem 10vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--secondary-bg);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);

        [href="#main"] {
            display: none;
        }

        >[href="./index.html"] {
            img {
                width: 2.5rem;
            }
        }

        >details {
            z-index: 1;
            width: 1.5rem;

            path {
                stroke: var(--header-text);
                stroke-width: 72px;
            }

            &[open] {
                +menu {
                    right: 0;
                    visibility: initial;
                }

                svg {
                    &:first-of-type {
                        display: none;
                    }
                }
            }

            &:not([open]) {
                svg {
                    &:last-of-type {
                        display: none;
                    }
                }
            }

            summary {
                list-style: none;
            }
        }

        >menu {
            position: fixed;
            top: 0;
            right: -100vw;
            width: 100vw;
            height: 100vh;
            overflow-y: scroll;
            padding-top: 4rem;
            background-color: inherit;
            visibility: hidden;
            transition-property: right, visibility;
            transition-duration: 0.7s;

            :is(summary, a) {
                padding: 0.8em 10vw;
                display: list-item;
            }

            details::details-content {
                padding-left: 2rem;
            }
        }
    }

    @media screen and (1024px <=width) {
        figure {
            figcaption {
                gap: 0.5em;
            }

            div:first-of-type {
                font-size: 2.15rem;
            }

            div:last-of-type {
                font-size: 1.75rem;
            }
        }

        nav {
            padding: 0.75em 7.5vw;

            [href="#main"] {
                display: initial;
                position: absolute;
                top: -100%;

                &:focus {
                    font-size: 1.5em;
                    padding: 1em;
                    top: 50vh;
                    left: 50vw;
                    transform: translate(-50%, -50%);
                    background-color: inherit;
                }
            }

            >[href="./index.html"] {
                font-size: 1.5rem;

                img {
                    width: 5rem;
                }
            }

            >details {
                display: none;
            }

            >menu {
                all: unset;
                display: flex;
                list-style: none;

                :is(summary, a) {
                    padding: 0.5em 0.75em;
                    transition: background-color 0.35s;
                    transition: filter 0.35s;
                    border-radius: 0.2em;
                    white-space: pre-line;

                    /* &:hover {
                        transform: scale(112%);
                    } */

                    &:hover {
                        filter: opacity(80%);
                    }
                }

                details {
                    &::details-content {
                        position: absolute;
                        padding-left: 0;
                        opacity: 0;
                        transition: content-visibility 300ms allow-discrete, opacity 300ms;
                        background-color: var(--secondary-bg);
                        /* box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px; */
                    }

                    &[open]::details-content {
                        opacity: 1;
                    }

                    a {
                        padding: 0.75em 1em;
                    }
                }
            }
        }
    }
}