header.topnav {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    width: 100vw;
    height: 6.25rem;
    z-index: 4;
    background-color: transparent;
    transition: all 0.5s ease;
    color: var(--accent-header);
    will-change: height, background-color;
    anchor-name: --header-anchor;

    @supports (animation-timeline: scroll()) {
        animation: shrink-header linear both;
        animation-timeline: scroll(root);
        animation-range: 20px 100px;  
    }

    &.scrolled {
        animation: shrink-header linear both;
    }

    nav.mobile-nav {
        display: grid;
        grid-template-columns: 20% 1fr;
        width: 95%;
        color: var(--accent-header);

        @media (min-width: 600px) {
            display: none;
        }

        .logo {
            justify-self: start;
        }

        .hamburger {
            justify-self: end;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        a:not(.logo) {
            padding-left: .5rem;
            font-size: var(--heading-big);
        }
    }

    @supports not (anchor-name: --header-anchor) {
        #mobile-menu {
            position: absolute;
            top: 100%;
            left: 0;
        }
    }

    @supports (anchor-name: --header-anchor) {
        #mobile-menu {
            position-anchor: --header-anchor;
            top: anchor(bottom);
            left: 0;
            position: absolute; 
        }
    }

    nav.desktop-nav {
        display: none;
        grid-template-columns: 15% 1fr 15%;
        width: 95%;
        justify-self: center;
        color: var(--accent-header);

        @media (min-width: 600px) {
            display: grid;
        }

        .logo {
            justify-self: start;
        }


        .desktop-menu {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            gap: 1rem;
            width: 90%;
            max-width: calc-size(fit-content, size + 7rem);
        }

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--heading-small);
        }
    }

    a {
        width: 100%;
        padding-block: .7rem;
        border-radius: var(--border-button);
        color: var(--accent-header);
        
        &.active {
            color: var(--accent);

            &:focus-visible {
                background-color: var(--medium-background);
                border: 2px solid var(--accent);;
            }
        }   

        &:hover {
            text-decoration: underline;
        }

        &:focus-visible {
            outline: none;
            background-color: var(--medium-background);
            border: 2px solid var(--dark-text);
        }
    }

    a.contact {
        justify-self: center;
        align-self: center;
    }
    
    svg.logo {
        min-width: 1rem;
        width: 100%;
        max-width: 4rem;
        height: auto;
        fill: var(--accent-header)
    }

    button.hamburger {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        border: none;
        background-color: transparent;
        width: fit-content;
        color: var(--accent-header);
        cursor: pointer;

        svg {
            height: 3em;
            transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        .line {
            fill: none;
            stroke: var(--accent-header);
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 3;
            transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        .line-top-bottom {
            stroke-dasharray: 12 63;
        }

        &:hover .line {
            filter: brightness(1.2);
        }

        p {
            margin-top: -.2rem;
        }
    }

    &:has(#mobile-menu:popover-open) {
        button.hamburger svg {
            transform: rotate(-45deg);

            .line-top-bottom {
                stroke-dasharray: 20 300;
                stroke-dashoffset: -32.42;
            }
        }
    }
}

article.portfolio-item {
        display: flex;
        flex-direction: column;
        background-color: var(--accent-card);
        border-radius: var(--border-card);
        outline: 3px solid var(--accent-card);

    a.card {
        
    }

    header.tags {
        display: flex;
        width: 100%;
        
        justify-content: space-between;
        padding-inline: 1rem;
        padding-top: .5rem;

        .tag {
            font-size: var(--heading-small);
            min-width: 25%;
            width: fit-content;
            background-color: var(--accent-button);
            color: var(--always-light);
            border-radius: var(--border-badge);
            text-align: center;
            padding: .5rem 1rem;
        }
    }

    div.contentwrapper {
        padding: 1rem;
        color: var(--always-light);
        h3 {
            color: inherit;
        }

        p.opdracht {
            margin-block: .5rem;
        }

        p.tags {

        }
    }

    img {
        border-radius: var(--border-card);
    }

    a.project {
        display: flex;
        border-radius: 0 0 var(--border-card) var(--border-card);
        background-color: var(--accent-button);
        align-items: center;
        height: 3rem;
        width: 100%;
        color: var(--always-light);
        padding: 1rem;
    }
}