/* December 12, 2024 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block;}
body { line-height: 1; } ol,ul { list-style: none; } blockquote,q { quotes: none; } blockquote:before, blockquote:after,q:before,q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* =================================== */
/* =================================== */

button {
    padding-block: unset;
    padding-inline: unset;
    margin: unset;
    color: unset;
    background-color: unset;
    letter-spacing: unset;
    word-spacing: unset;
}

/* =================================== */
/* =================================== */

html * { box-sizing: border-box; }

/* html * { user-select: none; } */

a { text-decoration: none;}

/* button {cursor: pointer;}
button {transform: scale(1);}
button:active {transform: scale(1.15);} */
button:not(button:disabled) {cursor: pointer;}
button:active:not(button:disabled) {transform: scale(1.15);}
.modal_close_x {cursor: pointer;}

/* button.pseudoActiveOn:active {transform: scale(1.15);} */
/* .pseudoActiveOn:active {transform: scale(1.15);} */
/* #btn_choose_invalid_keys.pseudoActiveOn:active {transform: scale(1.15);} */
/* #btn_hide_invalid_keys.pseudoActiveOn:active {transform: scale(1.15);} */

/* =================================== */

/* 💛 Text-Changes by Class 💛 */
.bold {font-weight: 600;}
.italics {font-style: italic;}
.underlined {text-decoration: underline;}

/* =================================== */

/* 💛 Basic DOM Set-up 💛 */
html { overflow: hidden;}

/* ul li {
    list-style: circle;
    list-style: disc; 
} */
ol li { list-style: decimal-leading-zero;list-style: decimal;}
.list_title { margin-top: 5px;}
.list_title + ul,
.list_title + ol { margin-left: 55px;}

/* =================================== */

/* 💛 User-select: none; 💛 */
body, 
input.letter_box[type="text"], 
input[type="text"], 
.keyboard_key { user-select: none;}
.letter_key:active { user-select: none;}

/* =================================== */

/* 💛 Pointer-events: none; 💛 */
.checkbox_slider { pointer-events: none;}


/* =================================== */

/* 💛 Touch-action: none; 💛 */
/* 💛 Touch-action: __; 💛 */
body, main, .letter_key, .keyboard_key {touch-action: none;}
body { touch-action: manipulation;}

/* =================================== */

/* 💛 JS-Class Addition Changes 💛 */
.opaque { opacity: 0.4;}
.no_pointerEvents { pointer-events: none;}

/* =================================== */

/* 💛 Element.active 💛 */
body.active { background-color: #bbb;}

/* .letter_key:active, .keyboard_key:active { */
.letter_key:active {
    transform: scale(1.1);
    background-color: var(--light-key-active-bg-color);
    color: var(--light-key-active-color);
    outline: 1px solid black;
}
.special_btn.active { outline: 1px solid black;}

/* =================================== */

/* 💛  💛 */


/* =================================== */

  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* =================================== */

.letter_box:focus-visible { outline: none;}
#function_button_keys_main button:focus, #function_button_keys_main button:focus-visible, #function_button_keys_main button:focus-within, #function_button_keys_main button:target { outline: none;}
#btn_choose_invalid_keys:focus-visible { outline: none;}
#letter_backspace .x_icon { pointer-events: none;}



/* =================================== */

/* =================================== */


:root {
    /* --dark-body-bg-color: #121213; */
    /* --dark-body-bg-color: #121117; */
    --dark-body-bg-color: #171616;
    --dark-valid-green-bg-color: #58a351;
    --dark-maybe-yellow-bg-color: #b59f3b;
    --dark-invalid-grey-bg-color: #3a3a3c;
    /* --dark-all-invalid-text-color: #fff; */ /* contrast is too high */

    --dark-all-text-color: #f8f8f8;
    --dark-default-key-bg-color: #818384;
    --dark-key-active-bg-color: #5a5b5d;
    --dark-key-active-color: #aeafb1;

    /* --dark-border-color: #3a3a3c; */
    /* --dark-focused-border-color: #565758; */
    --dark-border-color: #5a5a5c;
    --dark-focused-border-color: #767778;
    --dark-border-dim-color: #4a4a4c;

    /* --dark-focused-letter-box-border: #c1a4dc; */
    --dark-focused-letter-box-border: #b88be2;

    /* --dark-settings-bg-color: ; */

    /* =================================== */
    --all-invalid-text-color: #fff;
    /* =================================== */

    /* --light-NYTimes-bg-color: rgb(255, 255, 255); */
    /* --light-body-bg-color: #f8f8f8; */
    --light-body-bg-color: #fafafa;
    /* --light-body-bg-color: rgb(250, 250, 250); */
    --light-valid-green-bg-color: #6aaa64;
    --light-maybe-yellow-bg-color: #c9b458;
    --light-invalid-grey-bg-color: #787c7e;
    --light-invalid-text-color: #fff;

    --light-default-key-bg-color: #d3d6da;
    --light-default-key-color: #000;
    /* --light-main-input-color: #000; */
    --light-main-input-color: #222;
    --light-key-active-bg-color: #949599;
    --light-key-active-color: #aeafb1;

    --light-border-color: #d3d6da;
    --light-focused-border-color: #878a8c;

    /* --light-settings-outer-bg-color: #f8f8f8; */
    --light-settings-outer-bg-color: #efefef;
    /* --light-settings-outer-bg-color: rgb(239, 239, 239); */
    --light-settings-inner-bg-color: #f8f8f8;


    /* Settings Circle Box-Shadow */
    /* --shadow-pos-x1: -2px;
    --shadow-pos-x2: 298px;
    --shadow-pos-y1: -2px;
    --shadow-pos-y2: 298px; */
    --shadow-pos-x0: 0px;
    --shadow-pos-x1: 149px;
    --shadow-pos-x2: 298px;
    --shadow-pos-y0: 0px;
    --shadow-pos-y1: 149px;
    --shadow-pos-y2: 298px;

    --spread-radius: 6px;
    --blur-radius: 12px;

    --shape-circle: 50%;
    --circle-0: 0;
    --circle-25-plus-percent: 25%;
    --circle-25-neg-percent: -25%;
    
    --animation-duration: 2s;

    /* --transition-duration: 0.5s; */
    --transition-duration: 1.5s;
    
    --icon-circle-starting-degree: -45;
    /* --icon-circle-starting-degree: 315; */
    /* --icon-circle-starting-degree: 315deg; */
    /* --icon-circle-starting-degree: 0; */
    /* --icon-circle-starting-degree: 1; */


        /* :: Z-INDEX :: */
    /* --topmost-level: 10; */
    --top-level: 10;
    --high-level: 8;
    --mid-level: 5;
    --low-level: 3;
    --bottom-level: 1;
    --under-level: -1;
}

/* =================================== */