.hamburger {
    display: none;
    cursor: pointer;

        border-radius: 50%;
        height: 48px;
        width: 48px;
    position: relative;
    background: none;
    outline: none;

}

.hamburger::before {
    display: block;
    width: 24px;
    height: 24px;
    content: "";
    margin: auto;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M0,2h24v3.2H0V2z M0,10.5h24v3.2H0V10.5z M0,18.8h24V22H0V18.8z"/></svg>');
}


@media (prefers-color-scheme: dark) {
    .hamburger::before {

        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="white" d="M0,2h24v3.2H0V2z M0,10.5h24v3.2H0V10.5z M0,18.8h24V22H0V18.8z"/></svg>');
    }

}

@media all and (min-width: 900px) {

    .hamburger {
        height: 64px;
        width: 64px;
    }


}


.hamburger:is(:hover,:focus-visible){
    background: white;
}
.hamburger:is(:hover,:focus-visible)::before {

    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M0,2h24v3.2H0V2z M0,10.5h24v3.2H0V10.5z M0,18.8h24V22H0V18.8z"/></svg>');
}

.hamburger:focus-visible {
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
}
body.navshown #secondary .hamburger {

}

body.navshown .hamburger::before {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>');
}

#menuholder>p {display: none;}
@media all and (max-width: 1023.98px) {

    #menuholder>p { height: var(--masthead-height); background: transparent; position: fixed; top: 0; width: 100%; left: 0; display: flex; align-items: center; justify-content: flex-end; border: var(--wrapper-margin) solid transparent; border-top:none; border-bottom:none;    }
    #menuholder>p .hamburger {pointer-events: auto; }

    .hamburger {
        display: block;
    }
    body.navshown {
        overflow: hidden;
    }
    body.navshown #masthead > .wrapper div:first-child,
    body.navshown #masthead div#secondary {
      /*  opacity: 0.333; pointer-events: none;*/ }

    body.navshown #masthead div#secondary button.hamburger {
        opacity: 0; pointer-events: none;}


    #mainmenu {
        background: white;
        visibility: hidden;
        position: absolute; /* top: var(--masthead-height);*/
        transform: translateX(-100%);
        transition: all 0.2s ease;
        max-height: calc(100vh - var(--masthead-height));
        min-height: calc(100vh - var(--masthead-height));
    }

    #menuholder {
        visibility: hidden;
        position: relative;
    }

/*    #menuholder .hamburger {
        position: absolute;
        top: -63px;
        right: var(--wrapper-margin);

        border: 2px solid white;
    }*/

    body.navshown #menuholder .hamburger { background: white;}
    body.hashero #menuholder .hamburger::before,
    body.navshown #menuholder .hamburger::before {
        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>');
    }


    body.navshown #menuholder {
        visibility: visible;
        z-index: 100;
        pointer-events:none;
    }

    body.navshown #mainmenu {
        opacity: 1;
        visibility: visible;
        display: block;
        transform: none;
        overflow: auto;
        pointer-events:auto;
    }

    #masthead {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    :target {
        scroll-margin-top: var(--masthead-height);
    }

}