/* March 07, 2025 */

@media screen and (max-height: 863px) {
    .letter_key, .keyboard_key {
        height: calc(  36px + (58 - 36) * ( (100vh - 10px) / (863 - 10)  )  );
        /* max-width: calc( (36px + (58 - 36) * ( (100vh - 10px) / (863 - 10)  )) * 0.80 ) */
    }
    #function_button_keys_main {
        margin-bottom: 0;
        padding-top: calc(  16px + (22 - 16) * ( (100vh - 650px) / (863 - 650)  )  );
        padding-bottom: calc(  16px + (24 - 16) * ( (100vh - 650px) / (863 - 650)  )  );
    }
    #function_button_keys_main button {
        height: calc(  22px + (43 - 22) * ( (100vh - 600px) / (863 - 600) )  );
        height: calc(  30px + (43 - 30) * ( (100vh - 600px) / (863 - 600) )  );
        padding: 0 16px;
    }
}


@media screen and (max-width: 510px) {

    :root {
        --backspace-width: calc(  40px + (65 - 40) * ( (100vw - 300px) / (510 - 300)  )  );
    }

    .letter_key {
        width: calc(( 100vw - 8px * 2 - 6px * 9) / 10);
        /* max-width: calc(( 100vw - 8px * 2 - 6px * 9) / 10); */
    }

    #backspace_wrapper.partial { flex-grow: 0.3;}
    #backspace_wrapper {justify-content: flex-end;}
    #keyboard_bot_row.partial { justify-content: flex-end;}
    
    #letter_backspace {
        width: var(--backspace-width);
        margin-left: 0;
        border-radius: 4px;
    }
    #letter_backspace:before { display: none;}

    #letter_backspace.left .x_icon { left: 3px;}
    #letter_backspace.right .x_icon { left: 2px;}
}


@media screen and (max-width: 450px) {
    .keyboard_row {
        gap: 3px;
        margin-bottom: 3px;
    }

    #keyboard_bot_row { margin-bottom: 5px;}

    .letter_key { width: calc(( (100vw - (8px * 2)) - (3px * 9)) / 10);}
    .letter_key {
        width: calc(( 100vw - 8px * 2 - 3px * 9) / 10);
        /* max-width: calc(( 100vw - 8px * 2 - 3px * 9) / 10); */
    }

    #function_button_keys_main {
        max-width: calc((((100% - (3px * 9)) / 10) * 10) + (3px * 9));
        padding-top: calc(  16px + (22 - 16) * ( (100vw - 350px) / (450 - 350)  )  );
        padding-bottom: calc(  16px + (24 - 16) * ( (100vw - 350px) / (450 - 350)  )  );
    }

    #bottom_row_letters { gap: 3px;}
    #backspace_wrapper {
        margin-bottom: 8px;
    }
}

@media only screen and (max-width: 430px) {
    #letter_backspace.swiping_right, #letter_backspace.swiping_left {
        border-radius: 4px;
    }
    #letter_backspace.swiping_left { left: -18px;}
    #letter_backspace.swiping_right { left: 18px;}
}