:root {
    --bar-width: 30px;
    --bar-height: 4px;
    --hamburger-gap: 4px;
    --foreground: #333;
    --background: white;
    --hamburger-margin: 8px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.primary-nav > ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style-type: none;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
}
.primary-nav{
    color: var(--foreground);
    padding-bottom: 2em;
}
.primary-nav a {
    text-decoration: none;
    color: var(--foreground);
}

.hamburger-icon {
    display: none;
}

/* see:  https://www.youtube.com/watch?v=HbBMp6yUXO0 */
@media (max-width: 35em) {
    header div:first-child{
        text-align: center;
        width: 100%;
    }
    header div:last-of-type{
        display: none;
        width: 0;
    }
    .primary-nav {
        position: absolute;
        transition: translate var(--animation-timing);
        translate: +100%;
        gap: .5rem;
        padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
        background-color: var(--foreground);
        color: var(--background);
        max-width: 10rem;
        top: 0;
        right: 0;
        text-align: center;
    }
    .primary-nav ul {
        flex-direction: column;
        gap: .5rem;
        padding: 0 1rem 0 1rem;
    }
    .primary-nav a {
        color: var(--background);
    }

    .hamburger-icon {
        display: flex;
        position: absolute;
        --x-width: calc(var(--hamburger-height) * 1.41421356237);
        flex-direction: column;
        gap: var(--hamburger-gap);
        width: max-content;
        top: var(--hamburger-margin);
        right: var(--hamburger-margin);
        cursor: pointer;
        z-index: 1;
    }
    .hamburger-icon:has(input:checked) {
        --foreground: white;
        --background: #333;
    }
    .hamburger-icon:has(input:focus-visible)::before,
    .hamburger-icon:has(input:focus-visible)::after,
    .hamburger-icon input:focus-visible {
        border: 1px solid var(--background);
        box-shadow: 0 0 0 1px var(--foreground);
    }
    .hamburger-icon::before,
    .hamburger-icon::after,
    .hamburger-icon input {
        content: "";
        width: var(--bar-width);
        height: var(--bar-height);
        background-color: var(--foreground);
        border-radius: 9999px;
        transform-origin: left center;
        transition: opacity var(--animation-timing), width var(--animation-timing),
        rotate var(--animation-timing), translate var(--animation-timing),
        background-color var(--animation-timing);
    }
    .hamburger-icon input {
        appearance: none;
        padding: 0;
        margin: 0;
        outline: none;
        pointer-events: none;
    }
    .hamburger-icon:has(input:checked)::before {
        rotate: 45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / -2);
    }
    .hamburger-icon:has(input:checked)::after {
        rotate: -45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / 2);
    }
    .hamburger-icon input:checked {
        opacity: 0;
        width: 0;
    }
    .hamburger-icon:has(input:checked) + .primary-nav {
        translate: 0;
    }
}