#wrapper {
    position: inherit;
}

#burger-header {
    z-index: 2;
    height: var(--burger-header-height);
    border-radius: var(--radius-box);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;

    .backdrop {
        position: absolute;
        inset: 0;
        height: 200%;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            var(--color-base-100) 0%,
            transparent 50%
        );
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
    }

    > a {
        display: inline-flex;
        display: -webkit-inline-flex;
    }
}

#container {
    padding: calc(var(--burger-header-height) + 1rem) 1rem 4rem 1rem;
}

@media only screen and (min-width: 1000px) {
    #container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
