/* December 12, 2024 */

/* 💛 #settings_container [s.Settings] 💛 */

@media only screen and (max-width: 768px) {
    #settings_title { font-size: 14px;}

    #settings_container {
        top: calc(50% - 16px);
        max-width: 661px;
        width: calc(451px + (661 - 451) * ((100vw - 451px) / (768 - 451)));
    }

    #settings_container h2 {
        width: 94%;
        min-width: 422px;
        max-width: 593px;
    }

    #settings_main {
        min-width: auto;
        min-width: unset;
        width: 90%;
        width: 94%;
        min-width: 400px;
        max-width: 621px;
        margin: auto;
        min-width: 422px;
        max-width: 593px;
    }
    #copyright_box {
        min-width: 400px;
        width: 94%;
        min-width: 422px;
        max-width: 593px;
    }
    #scroll_down_for_more_wrapper_2 {
        height: 46px;
        width: 100%;
        top: calc(-100% + 8px);
    }
    #scroll_down_for_more_wrapper_2 {
        width: 94%;
        min-width: 422px;
        max-width: 593px;
    }















    #scroll_down_for_more_wrapper_2:before {
        bottom: -3px;
    }
    #scroll_down_for_more_wrapper_2:after {
        bottom: -5px;
    }

    @keyframes arrow-before-dipping {
        0% {
            bottom: -3px;
        }
        50% {
            bottom: -4px;
        }
        100% {
            bottom: -3px;
        }
    }
    @keyframes arrow-after-dipping {
        0% {
            bottom: -5px;
        }
        50% {
            bottom: -6px;
        }
        100% {
            bottom: -5px;
        }
    }


    #settings_main .position_fixed_container {
        padding-left: 32px;
        padding-right: 32px;
    }






    #scroll_down_for_more_wrapper_2 .background_blur {
        background: linear-gradient(rgba(220, 220, 220, 0.9), var(--light-body-bg-color));
        background: linear-gradient(rgba(200, 200, 200, 0.7), var(--light-body-bg-color));
        background: linear-gradient(rgba(200, 200, 200, 0.7), var(--light-settings-outer-bg-color));
    }



    #scroll_down_for_more_wrapper_2 p:before {
        height: calc(100% - 10%);
        height: 60%;
        align-items: flex-end;
    }











    #settings_main .position_fixed_container:after {
        transform: translate(-32px, 10px);
    }

}





@media only screen and (max-width: 450px) {
    #settings_container {
        width: 100%;
        height: 70%;
        border-right: none;
        border-left: none;
        background: #bbb;
        padding: 0;
        min-width: unset;
    }

    #settings_container h2 {
        padding-bottom: 0px;
        padding-bottom: 2px;
        height: 9%;
        width: 100%;
    }
    #copyright_box {
        align-items: flex-end;
        justify-content: center;
        height: 5%;
    }
    #settings_main {
        min-width: unset;
        width: 100%;
        height: 86%;
    }
    #settings_main:before {
        height: 24px;
        height: 20px;
    }
    #copyright_box {
        min-width: unset;
        width: 100%;
    }
    #scroll_down_for_more_wrapper_2 {
        bottom: 5%;
    }
    #settings_main .position_fixed_container {
        padding-left: 32px;
        padding-right: 32px;
    }

    #settings_main .position_fixed_container:after {
        transform: translate(-24px, 10px);
        height: 24px;
    }

    #section_tutorial {
        margin-bottom: 12px;
    }


    #scroll_down_for_more_wrapper_2 {
        height: 100%;
    }
    #scroll_down_for_more_wrapper_2 {
        height: 46px;
        top: calc(-100% + 8px);
        top: calc(-100% - 12px);
    }


    #scroll_down_for_more_wrapper_2:before, 
    #scroll_down_for_more_wrapper_2:after {
        border-top-width: 12px;
        border-left-width: 40px;
        border-right-width: 40px;
    }
    #scroll_down_for_more_wrapper_2:before, 
    #scroll_down_for_more_wrapper_2:after {
        border-top-width: 12px;
        border-left-width: 24px;
        border-right-width: 24px;
    }

    #scroll_down_for_more_wrapper_2 p:before {
        align-items: flex-start;
        margin-top: 5px;
        margin-top: calc(((46px / 2) - 15px));
        margin-top: calc(((46px / 2) - 14px));
    }

    #scroll_down_for_more_wrapper_2:before {
        bottom: -6px;
        bottom: 0;
        bottom: -10px;
        bottom: -12px;
        bottom: -14px;
    }
    #scroll_down_for_more_wrapper_2:after {
        bottom: -4px;
        bottom: -2px;
        bottom: -14px;
        bottom: -16px;
    }
    #scroll_down_for_more_wrapper_2:before {
        bottom: -4px;
    }
    #scroll_down_for_more_wrapper_2:after {
        bottom: -6px;
    }





    #copyright_box > p {
        height: 100%;
        height: 5%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--light-body-bg-color);
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    body.dark_mode #copyright_box > p {
        background-color: var(--dark-invalid-grey-bg-color);
    }


}

@media screen and (orientation: portrait) and (max-height: 700px) and (max-width: 630px) {
    #settings_container {
        top: calc(50% - 16px);
    }
}




/* 💛 #settings_image_container [s.Settings][s.Image] 💛 */