body{
    background-color: white;
}

.flex{
    background-color: white;
    padding-top: 50px;
}

:root{
    --void_height: 380px;
    --key_color: grey;
    --key_bg_color: grey;
    --key_width: 32px;
    --key_spacing: 3px;
    --key_shift_width: 50px;
    --key_delete_width: 55px;
    --key_globe_width: 60px;
    --key_dot_width: 30px;
    --key_spacebar_width: 150px;
    --key_at_width: 40px;
    --key_enter_width: 70px;
    --key_hand: center;
    --key_border_style: solid;
    --key_border_width: 1px;
    --key_border_color: black;
    --key_border_radius: 5px;
    --key_gradient_color1: rgba(229, 229, 229, 0.2);
    --key_gradient_color2: rgba(0, 0, 0, 0.2);
    --key_font-family: 'Roboto';

    --phone_bg_color: grey;

    /* klawisze menu */
    --mk_bg_color: rgba(37, 40, 57, 1);
    --mk_color: rgba(229, 229, 229, 1);
}

.screen_bg{
    background-color: var(--phone_bg_color);
    height: var(--void_height);
}

.menu_wraper{
    width: 450px;
    border: 0px solid black;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    background-color: rgba(242, 244, 255, 1);
    box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.5)
}

.menu1{
    
}

.menu2{
    margin-top: 50px;
}

.menu_title{
    color: rgba(37, 40, 57, 1);
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    padding: 0px;
    border-bottom: 2px solid rgba(37, 40, 57, 1); 
}

.menu_option{
    color: rgba(37, 40, 57, 1);
    font-weight: bold;
    font-size: 16px;
}


.key_menu{
    width: 140px;
    min-height: 24px;
    line-height: 24x;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    border-width: 0px;
    border-radius: 5px;
    background-color: rgba(37, 40, 57, 1);
    color: rgba(229, 229, 229, 1);
    border: 1px solid rgba(37, 40, 57, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.key_menu_cp{
    width: 100px;
    height: 50px;
}

.key_menu:hover{
    font-weight: bold;
    background-color: rgba(49, 53, 76, 1);
    color: rgba(229, 229, 229, 1);
    border: 1px solid rgba(37, 40, 57, 1);
    text-shadow: 0px 0px 25px rgba(229, 229, 229, 0.5);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
}

.km_a1{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_a2{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_a3{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_b1{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_b2{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_c1{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_c2{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.km_c3{
    background-color: var(--mk_bg_color);
    color: var(--mk_color);
}

.keyboard{
    width: 100%;
    background-color: var(--key_bg_color);
    padding-top: 10px;
    padding-bottom: 20px;
    
}

.kr{
    display: grid;
    justify-content: var(--key_hand);
    grid-column-gap: calc(2px + var(--key_spacing));
    margin-bottom: var(--key_spacing);
}

.kr1{
    grid-template-columns: repeat(10, var(--key_width));
}

.kr2{
    grid-template-columns: repeat(10, var(--key_width));
}

.kr3{
    grid-template-columns: repeat(9, var(--key_width));
}

.kr4{
    grid-template-columns: var(--key_shift_width) repeat(7, var(--key_width)) var(--key_delete_width);
}

.kr5{
    grid-template-columns: var(--key_globe_width) var(--key_dot_width) var(--key_spacebar_width) var(--key_at_width) var(--key_enter_width);
}

.row_1_key{
    grid-row: row 1;
}

.row_2_key{
    grid-row: row 2;
}

.row_3_key{
    grid-row: row 3;
}

.row_4_key{
    grid-row: row 4;
}

.row_5_key{
    grid-row: row 5;
}

.keyboard_key{
    font-family: var(--key_font-family);
    color: var(--key_color);
    background: linear-gradient(var(--key_gradient_color1), var(--key_gradient_color2));
    border-radius: var(--key_border_radius);
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
    width: 100%;
    font-weight: bold;
    border-style: var(--key_border_style);
    border-width: var(--key_border_width);
    border-color: var(--key_border_color);
}