.menu_modal_container {
    margin: 0;
    padding: 0;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    justify-items: start;
    overflow: hidden;
    top: 12vh;
    right: 2vh;

    height: 8vh;
    width: 8vh;
    max-width: calc(100vw - 4vh);

    background-color: rgba(51, 51, 51, 0.7);
    backdrop-filter: blur(3vh);
    --webkit-backdrop-filter: blur(3vh);
    border-radius: 1vh;

    box-shadow: 0 0 1vh rgba(0, 0, 0, 0.5);

    transition: top 0.3s ease-in-out, height 0.3s ease-in-out, width 0.3s ease-in-out;

    z-index: 100;
}
.menu_modal_container:has(#menu_modal_toggle_checkbox:checked) {
    top: 2vh;
    height: 96vh;
    width: 50vh;
}
.menu_modal_toggle_container {
    margin: 0;
    padding: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    overflow: hidden;
    top: 0;
    left: 0;

    height: 8vh;
    width: 8vh;

    border-radius: 1vh;

    filter: drop-shadow(0 0 1vh rgba(0, 0, 0, 0.5));
    --webkit-filter: drop-shadow(0 0 1vh rgba(0, 0, 0, 0.5));

    transition: top 0.3s ease-in-out, left 0.3s ease-in-out;

    z-index: 101;
}
.menu_modal_toggle_container:has(#menu_modal_toggle_checkbox:checked) {
    top: 3vh;
    left: 3vh;
}
.menu_modal_toggle_container, .menu_modal_toggle_container * {
    cursor: pointer;
}
.menu_modal_toggle_container:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.menu_modal_heading_container {
    margin: 0 0 0 10vh;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    overflow: visible;

    height: 14vh;
    width: 40vh;

    transform: translateX(40vh);
    transition: transform 0.3s ease-in-out;
}
.menu_modal_toggle_container:has(#menu_modal_toggle_checkbox:checked) ~ .menu_modal_heading_container {
    transform: translateX(0);
}
.menu_modal_heading_title {
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: visible;

    height: fit-content;
    width: fit-content;

    color: var(--b-40w);
    font-size: 4vh;
    line-height: 4vh;
    text-align: center;
    text-shadow: 0 0 1vh rgba(0, 0, 0, 0.5);

    order: 1;
}
.menu_modal_heading_language {
    margin: 1vh 0 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: visible;

    height: fit-content;
    width: fit-content;

    font-size: 2.5vh;
    line-height: 2.5vh;
    text-align: center;
    text-shadow: 0 0 1vh rgba(0, 0, 0, 0.5);

    order: 2;
}
.menu_modal_heading_change {
    margin: 1vh 0 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: visible;

    height: fit-content;
    width: fit-content;

    color: #bbb;
    font-size: 2.5vh;
    line-height: 2.5vh;
    text-align: center;
    text-shadow: 0 0 1vh rgba(0, 0, 0, 0.5);

    order: 3;
}
.menu_modal_links_container {
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    justify-items: start;
    overflow: auto;

    width: 50vh; /* same as opened .lang_modal_container */
    max-width: calc(100vw - 4vh); /* same as opened .lang_modal_container */

    flex-grow: 1; /* this section determines height */
    flex-shrink: 1;
    flex-basis: 0;
}
.menu_modal_selector {
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    justify-items: start;
    overflow: clip;

    height: fit-content;
    width: 48vh; /* -2vh as opened .lang_modal_container */
    max-width: calc(100vw - 6vh); /* -2vh as opened .lang_modal_container */

    border-radius: 1vh;
}
.menu_modal_selector, .menu_modal_selector * {
    cursor: pointer;
}
.menu_modal_selector:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.menu_modal_selector.active {
    background-color: var(--b-20a);
}
.menu_modal_icon {
    margin: 0 1vh 0 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: hidden;

    height: 8vh;
    width: 8vh;

    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

    filter: drop-shadow(0 0 1vh rgba(0, 0, 0, 0.5));
    --webkit-filter: drop-shadow(0 0 1vh rgba(0, 0, 0, 0.5));

    order: 1;
}
.menu_modal_text_container {
    margin: 0 0 0 1vh;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start; /* may have to swap this */
    justify-content: center; /* and this */
    justify-items: start;
    overflow: visible;

    height: 10vh;

    flex-grow: 1; /* this section determines width */
    flex-shrink: 1;
    flex-basis: 0;

    order: 2;
}
.menu_modal_text_container * {
    text-shadow: 0 0 1vh rgba(0, 0, 0, 0.5);
}
.menu_modal_text {
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: visible;

    width: fit-content;
    height: fit-content;
    text-align: left;
    font-size: 3vh;
    line-height: 3vh;

    order: 1;
}
.menu_modal_subtext {
    margin: 1vh 0 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: visible;

    width: fit-content;
    height: fit-content;
    text-align: left;
    font-size: 2.5vh;
    line-height: 2.5vh;

    color: #bbb;

    order: 2;
}

@media screen and (prefers-color-scheme: light) {
    .menu_modal_container {
        background-color: rgba(255, 255, 255, 0.7);
    }
    .menu_modal_toggle_container {
        filter: drop-shadow(0 0 1vh rgba(255, 255, 255, 0.5));
        --webkit-filter: drop-shadow(0 0 1vh rgba(255, 255, 255, 0.5));
    }
    .menu_modal_toggle_container:hover, .menu_modal_selector:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
    .menu_modal_heading_title {
        color: var(--b-20b);
        text-shadow: 0 0 1vh rgba(255, 255, 255, 0.5);
    }
    .menu_modal_heading_language {
        text-shadow: 0 0 1vh rgba(255, 255, 255, 0.5);
    }
    .menu_modal_heading_change {
        color: #777;
        text-shadow: 0 0 1vh rgba(255, 255, 255, 0.5);
    }
    .menu_modal_text_container * {
        text-shadow: 0 0 1vh rgba(255, 255, 255, 0.5);
    }
    .menu_modal_subtext {
        color: #777;
    }
}

@media screen and (max-width: 200vh) {
    .menu_modal_container {
        top: 6vw;
    }
}

@media screen and (max-width: 100vh) {
    .menu_modal_container {
        top: 2vh;
    }
}

@media screen and (max-width: 75vh) {
    .menu_modal_container {
        top: 27vw;
    }
}