.slide-out-drawer-toggle {
    display: none;
}

.slide-out-drawer.menu__box {
    padding: 0;
    position: fixed;
    z-index: 4;
    width: 90%;
    /* this just prevents users from seeing past the bottom of the drawer when they scroll very quickly */
    height: 120vh;
    max-width: 70rem;
    list-style: none;
    background-color: var(--pico-background-color);
    box-shadow: 2px 2px 12px rgba(0, 0, 0, .7);
    transition-duration: .25s;
}

/* #slide-out-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 120vw;
    height: 120vh;
    background: rgba(0, 0, 0, 0.3); /* Mostly transparent */
    z-index: 0;
} */

.slide-out-drawer.menu__box .drawer-contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    /* this is going to help position #rest-at-end element at the bottom of the drawer */
    position: relative;
}

.slide-out-drawer .rest-at-end {
    width: 100%;
    padding: var(--pico-spacing);
    /* this is supposed to prevent this element from going beyond the viewport on mobile devices with a moving address bar */
    position: sticky;
    bottom: 0;
}

.slide-out-drawer .drawer-header {
    padding: var(--pico-spacing);
    margin-bottom: 0;
}

.slide-out-drawer .main-content {
    padding: var(--pico-spacing);
    overflow-y: auto;
}

@media (min-width: 26rem) {
    .slide-out-drawer .rest-at-end {
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }
}
.slide-out-drawer .rest-at-end {
    width: 100%;
    padding: var(--pico-spacing);
    /* this is supposed to prevent this element from going beyond the viewport on mobile devices with a moving address bar */
    position: sticky;
    bottom: 0;
}

.slide-out-drawer .rest-at-end button {
    width: 100%;
}

@media (max-width: 500px) {
    .slide-out-drawer.menu__box {
        width: 100%;
    }
}