:root {
    --burger-open-color: white;
}

@supports (scrollbar-gutter:stable) {
    .scroll-lock {
        scrollbar-gutter: var(--scroll-lock-gutter) !important;
    }
  
    .scroll-lock body {
        overflow: hidden !important;
    }
}

/** This can go away once Safari has scrollbar-gutter support. */
@supports not (scrollbar-gutter: stable) {
    .scroll-lock body {
        padding-right: var(--scroll-lock-size) !important;
        overflow: hidden !important;
    }
}

.hamburger {
    display: inline-block;
}

.hamburger .line {
        height: 2px;
        border-radius: 3px;
        background: var(--hamburger-color, black);
        width: 25px;
        transition: transform 0.2s ease-in-out;
    }

.hamburger .container {
        transition: transform 0.2s ease-in-out;
        position: absolute;
        left: 5px;
    }

.top:is(.hamburger .container) {
            transform: translateY(-6px) scaleX(.88);
        }

.middle:is(.hamburger .container) {
            transform: scaleX(.88);
        }

.bottom:is(.hamburger .container) {
            transform: translateY(6px) scaleX(.88);
        }

.hamburger button {
        all: unset;
        cursor: pointer;
        display: block;
    }

.hamburger button * {
        pointer-events: none;
    }

.hamburger input {
        display: none;
    }

.hamburger .burger {
        z-index: 200;
        height: 31px;
        width: 31px;
        display: block;
        position: relative;
    }

:is(.hamburger .burger) button {
            position: relative;
            top: 10px;
        }

.hamburger.open {
        position: relative;
        top: 1rem;
    }

.bottom:is(.hamburger.open .line) {
                transition-delay: 0.1s;
            }

.middle:is(.hamburger.open .line) {
                display: none;
            }

.top:is(.hamburger.open .line) {
                transition-delay: 0.1s;
            }

.hamburger.open .container {
            transition-delay: 0s;
        }

.bottom:is(.hamburger.open .container) {
                transform: none;
                z-index: 99;
            }

.top:is(.hamburger.open .container) {
                transform: none;
                z-index: 99;
            }

.bottom:is(:is(.hamburger.open .container) .line) {
                    transform: rotateZ(45deg);
                }

.top:is(:is(.hamburger.open .container) .line) {
                    transform: rotateZ(-45deg);
                }

.hamburger-wrapper {
    position: absolute;
    margin-left: auto;
    width: 10%;
    justify-self: right;
    right: 1rem;
    top: 16px;
    text-align: right;
}

.hamburger-wrapper.open {
        top: 0;
    }

:is(.hamburger-wrapper.open .burger) .line {
                background-color: var(--burger-open-color, white)
            }
body {
    min-height: 200vh;
}

.content {
    margin-top: 180vh;
}

.more-content {
    margin-top: 40vh;
}

hamburger-two {
    display: none;
}

@media (width < 680px) {
    hamburger-two {
        display: block;
    }
}

.mobile-nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    left: 0;
    opacity: .85;
    position: fixed;
    top: 0;
    z-index: 97;
}
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 0.8; }
}

@keyframes fade-out {
    0% { opacity: 0.8; }
    100% { opacity: 0; }
}

.mobile-nav-menu {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    animation: fade-in var(--fade-in-time, 0.4s);
}

.mobile-nav-menu button {
        background: none;
        border: 1px solid white;
        color: white;
        padding: 0.5rem 1rem;
    }

.mobile-nav-menu ul {
        list-style: none;
        align-items: center;
        padding: 0;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

:is(.mobile-nav-menu ul) a {
            color: white;
        }

:is(.mobile-nav-menu ul) li {
            margin: 1.2rem 0;
        }

.controls:is(.mobile-nav-menu ul) {
            color: white;
        }

.controls:is(.mobile-nav-menu ul) button {
                border: none;
                fill: white;
            }

.controls:is(.mobile-nav-menu ul) li {
                display: flex;
                align-items: center;
            }

.mobile-nav-menu.open {
        display: flex;
        z-index: 97;
        opacity: 0.85;
        position: fixed;
        top: 0;
        left: 0;
        flex-direction: column;
        justify-content: space-around;
    }

:is(.mobile-nav-menu.open .burger) .line {
                background-color: white;
            }