:root{
    /*colors*/ 
    --baseColor: rgb(47, 47, 187);    
    --monoColor1: #00112bff;
    --monoColor2: rgb(0, 35, 87);   
    --monoColor3: rgb(74, 113, 170);     
    --monoColor4: rgb(228, 239, 255);

    /*--colorH1: rgb(255, 153, 0); 
    --colorH2: rgb(255, 192, 75);*/
    
    --colorH1: rgb(46, 117, 46); 
    --colorH2: rgb(55, 148, 55); 

    --colorB: crimson;
    --colorK: #003380ff;       

    /*text styles for ltr/rtl formats */ 
    /*old approach*/   
    --text-direction: ltr;
    --text-align: left;
    /*new approach - used in .tooltip only, managed by Utils.js*/
    --tooltip-dir: ltr;
    
    /*dynamic borderColor*/
    --borderColor: var(--monoColor4);

    /*dynamic zoom to fit the screen managed by Utils.js*/
    --zoom: 1;
}


body {
    visibility: visible;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Noto Color Emoji'; 
    background-color: var(--color4);
    transition: background-color .6s cubic-bezier(.7, 0, .7, 1); 
    overflow: hidden;
}

#localisations{
    display: none;
}

#loaderID{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1000000;
    width: 100vw;
    height: 100vh;
    background-color: white;
    background-image: url(images/loaders/learn2type.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15%;
}

#loaderID.inBox{
    width: 100%;
    height: 100%; 
}

#loaderID.spinner{
    background-color: rgba(250,250,250,0.5);    
    background-image: url(images/loaders/blocks.gif);    
}

.loadingProgress{
    display: block;
    position: absolute;
    bottom: 1vh;
    left: 1vw;
    color: #333333;
    font-family:'Courier New', Courier, monospace;
    font-size: 1.5vh;
}
.loadingProgress::before{
    content: "Loading progress: ";
    font-weight: bold;
}
.loadingProgress::after{
    content: "...please wait...";
}

.emoji{
	text-decoration: none;
	color: white;
    font-family: "Noto Color Emoji" !important;  
}

.dynaPuff{
    font-family: DynaPuff, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


/*THEMES*/
body.greystone{
    --baseColor: #666666;
    --monoColor1: #333333;
    --monoColor2: #666666;
    --monoColor3: #999999;    
    --monoColor4: #eeeeee; 
    
    --colorH1: rgb(41, 98, 145); /*h1*/
    --colorH2:  steelblue; /*h2, selectColor, key2*/
    --colorB: orange;  /*userlogin buton, speed button, textContainer.wrongAnswer*/
    --colorK: #444444;/*keyboard Key1 border and border*/ 
}

body.charcoal{
    --baseColor: #000000;    
    --monoColor1: black;
    --monoColor4: #eeeeee;
    --monoColor3: #333333;
    --monoColor2: black;

    --colorH1: rgb(41, 98, 145); /*h1, key2?*/
    --colorH2:  steelblue; /*h2, selectColor, key2*/

    --colorB: orange;
    --colorK: black;      
}

body.brick{
    --baseColor: #b12740;
    --monoColor1: #251313;
    --monoCcolor2: #333333;
    --monoColor3: #cb4154;
    --monoColor4: #fbe0e0; 
    
    --colorH1: #914927;  
    --colorH2: #eb733c;     
    
    --colorB: #844fb6;
    --colorK: #a3233a;      
}

body.strawberry{
    --baseColor: crimson;    
    --monoColor1: rgb(63, 0, 0);
    --monoColor4: rgb(253, 239, 239);
    --monoColor3: rgb(255, 70, 70);
    --monoColor2: rgb(117, 0, 0);

    --colorH1: green;  
    --colorH2: rgb(83, 190, 83);     
    
    --colorB: crimson;
    --colorK: #d40000;     
}

body.raspberry{
    --baseColor: rgb(255, 138, 157);    
    --monoColor1: rgb(129, 59, 72);
    --monoColor2: rgb(90, 19, 19);
    --monoColor3: rgb(255, 123, 145);
    --monoColor4: rgb(229, 255, 229); /*rgb(253, 239, 239); */   

    --colorH1: rgb(59, 168, 59);
    --colorH2: rgb(59, 168, 59);

    --colorB: crimson;
    --colorK: crimson;    
}

body.grape{
    --baseColor: #800080;        
    --monoColor1: #2d102c;
    --monoColor2: #411140;
    --monoColor3: #814c7b;
    --monoColor4: rgb(255, 232, 236); 

    --colorH1: rgb(170, 26, 115);
    --colorH2: rgb(150, 180, 67);

    --colorB: crimson;
    --colorK: #4e1747;     

}

body.grass{
    --baseColor: rgb(83, 167, 83);    
    --monoColor1: #09360b;    
    --monoColor2: #0e4711;
    --monoColor3: rgb(39, 141, 39);
    --monoColor4: rgb(251, 255, 236);  

    --colorH1: rgb(17, 105, 17);
    --colorH2: rgb(228, 173, 23); /*#a1b400 #00b478*/

    --colorB: crimson;
    --colorK: #0e4711;  
}

body.lagune{
    --baseColor: #0acc92;    
    --monoColor1: #004D40;    
    --monoColor2: #166d5a;
    --monoColor3: #29a877;
    --monoColor4: #ecfffd;  

    --colorH1: #005f4f;
    --colorH2: #c9873c; /*#a1b400 #00b478*/

    --colorB: crimson;
    --colorK: #145843;    
}

body.ocean{
    --baseColor: rgb(47, 47, 187);    
    --monoColor1: #00112bff;
    --monoColor2: rgb(0, 35, 87);   
    --monoColor3: rgb(74, 113, 170);     
    --monoColor4: rgb(228, 239, 255);
    
    --colorH1: rgb(46, 117, 46); 
    --colorH2: rgb(55, 148, 55);       

    --colorB: crimson;
    --colorK: #003380ff;      
}

body.sky{
    --baseColor: #87cefa;    
    --monoColor1: #232629;
    --monoColor2: #1f5f86;
    --monoColor3: #76b8e0;
    --monoColor4: #f2faff;

    --colorH1: rgb(46, 117, 46); 
    --colorH2: rgb(55, 148, 55);  

    --colorB: rgb(26, 77, 153);
    --colorK: #3e8ec0;      
  
}

body.banana{
    --baseColor: rgb(255, 237, 72);      
    --monoColor1: rgb(63, 34, 0);
    --monoColor2: rgb(100, 69, 12);   
    --monoColor3: rgb(243, 208, 51);     
    --monoColor4: rgb(255, 252, 237);

    --colorH1: rgb(65, 107, 184);
    --colorH2: rgb(83, 190, 83);

    --colorB: rgb(83, 190, 83);
    --colorK: rgb(255, 166, 0);     
}

body.orange{ /*OK*/
    --baseColor: rgb(255, 136, 0);    
    --color0: #2b1100ff; 
    --color1: #d45500ff; 
    --color2: #ff7f2aff; 
    --color3: #ffb380ff; 
    --color4: #ffe6d5ff;  
    
    --monoColor1: rgb(87, 35, 0);
    --monoColor2: rgb(105, 42, 0);   
    --monoColor3: rgb(255, 102, 0);     
    --monoColor4: rgb(255, 242, 233);

    --colorH1: rgb(65, 107, 184);
    --colorH2: rgb(72, 168, 72);

    --colorB: rgb(83, 190, 83);
    --colorK: rgb(255, 166, 0);    
}

body.chocolate{ /*OK*/
    --baseColor: #502d16;      
    --monoColor1: rgb(43, 23, 10);
    --monoColor2: rgb(82, 46, 23);
    --monoColor3: #784421ff;
    --monoColor4: rgb(255, 229, 212);    
    
    --colorH1: rgb(170, 20, 50);/*rgb(43, 120, 184);*/
    --colorH2: crimson;/*steelblue;*/

    --colorB: rgb(255, 166, 0);
    --colorK: rgb(43, 23, 10);     
}
body.cream{
    --baseColor: #deaa87ff;    
    --monoColor1: #502d16ff;    
    --monoColor2: rgb(165, 107, 68);
    --monoColor3: rgb(224, 168, 131);
    --monoColor4: rgb(255, 243, 232); 

    --colorH1: rgb(43, 120, 184);
    --colorH2: steelblue;

    --colorB: crimson;
    --colorK: rgb(95, 51, 21);     
}

.baseColor{
    background-color: var(--baseColor);
}

h1{
    color: var(--colorH1)            
}

h2,h3,h4,b{
    color: var(--colorH2);        
}


/*element*/
.centered {    
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;               
}

/*element*/
.centerH {    
    left: 0px;
    right: 0px;
    margin: auto;                
}

/*element*/
.centerV {    
    top: 0px;
    bottom: 0px;
    margin: auto;                
}

/*flip horizontal*/
.flipH{
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
/*flip vertical*/
.flipV{
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);    
}

/* A P P L I C A T I O N */

#appContainerID{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 10;
    background-color: var(--monoColor4);
    --borderColor: var(--monoColor4);   
}

#appContainerID.dark{
    background-color: var(--monoColor1);
    --borderColor: var(--monoColor4);    
   
}


/* T R A Y */
.tray {
    position: absolute;
    display: flex;
    font-family: DynaPuff, 'Noto Color Emoji';
    top: calc(5px*var(--zoom));
    /*important! - left, right must be set to -1000px because of scaling issue in CSS, 
    if set to 0px then when zooming above 150% element is pushed to the right instead of staying in center !!!*/
    left: -1000px;
    right: -1000px;
    margin-left: auto;
    margin-right: auto; 
    height: 30px;
    width: 680px;
    border-radius: 15px;
    border: 4px solid var(--monoColor4);
    padding: 2px 10px;
    background-color: var(--monoColor3);
    z-index: 3;
    bottom: unset; 
    transform-origin:  top center;
    transform: scale(var(--zoom));
}

.trayButton {
    width: 25px;
    height: 25px;
    margin: 2px 2px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    background-color: var(--monoColor3);/*var(--monoColor2)*/;
    color: white;
    border: 1px solid var(--monoColor4);    

}



.trayButton.selected {
    background-color: rgb(255, 255, 147);/*var(--colorH2);*/
    color: var(--monoColor3);
}



.trayButton:hover{
    cursor: pointer;
    border-color: var(--monoColor3);
    box-sizing: content-box;
}

.selectButton{
    font-family: DynaPuff, Arial, Helvetica, sans-serif;
}

/* S E T T I N G S */

.settingsLeft{
    position: absolute;
    display: flex;
    left: calc(var(--zoom)*5px);
    top: 0px;
    width: fit-content;
    z-index: 4;
    background-color: transparent; 
    /*transform-origin: left top;*/
    /*transform: scale(var(--zoom));*/
}

.settingsRight{
    position: absolute;
    display:flex;
    right: calc(var(--zoom)*5px);
    top: 0px;
    width: fit-content;
    z-index: 4;
    background-color: transparent; 
    /*transform-origin: right top;*/
    /*transform: scale(var(--zoom));*/
}

.settingsItem{
    position: relative;
    width: calc(var(--zoom)*25px);
    height: calc(var(--zoom)*25px);
    top: calc(var(--zoom)*15px);
    padding: 0px calc(var(--zoom)*7px);
    filter: drop-shadow(0px 0px calc(var(--zoom)*3px) var(--monoColor3));
}

.settingsItemIcon{
    line-height: calc(var(--zoom)*25px);
    font-size: calc(var(--zoom)*22px);    
    transform-origin: center bottom;  
    transition: transform 200ms; 
}


.settingsItemIcon:hover{
    cursor:pointer;
    transform: scale(1.2);
}

.userLoginButton{
    width: calc(var(--zoom)*25px);
    height: calc(var(--zoom)*25px);
    line-height: calc(var(--zoom)*25px);
    background-color: var(--colorB);
    color: var(--monoColor4); 
    border-radius: calc(var(--zoom)*5px);
    font-size: calc(var(--zoom)*20px);
    text-align: center;
    font-weight: normal;
}
.userLoginButton:hover{
    cursor: pointer;
    background-color: orange;
}

/*SELECT LANG DIALOG*/
.selectLang {    
    margin: 10px;
    height: 300px;
    overflow-y: scroll;
}
.selectLang a {
    display: block;
    width: 100%;
    color: var(--monoColor4) !important;
    text-decoration: none; 
    /*line-height: calc(var(--zoom)*20px); */ 
}
.selectLang a:hover{
    cursor: pointer;
    background-color: var(--monoColor3);
    border-radius: calc(var(--zoom)*3px);
}

.selectLang hr{
    background-color: var(--monoColor3);
    border: none;
    height: calc(var(--zoom)*2px);
}

.selectLang h1{
    font-size: 16px;
    text-align: center;
    color: var(--monoColor3);
    text-decoration: none;
}

/* S E T T I N G S    S U B M E N U */

.settingsSubmenu{
    display: block;
    position: absolute;
    padding: calc(var(--zoom)*10px);
    top: calc(var(--zoom)*40px);
    min-width: calc(var(--zoom)*200px);
    background-color: var(--monoColor2);
    border-radius: calc(var(--zoom)*10px);
    border: calc(var(--zoom)*2px) solid var(--monoColor3);
    filter: drop-shadow(0px 0px calc(var(--zoom)*2px) var(--monoColor4));   
    visibility: hidden;
    font-weight: bold;
    font-size: calc(var(--zoom)*16px);
    z-index: 10;
}

.settingsSubmenu.left{
    left: 0px;
    right: auto;
}

.settingsSubmenu.right{
    left: auto;
    right: 0px;
}

.settingsSubmenu:not(.settingsSubmenu.lang){
    direction: var(--text-direction);
    text-align: var(--text-align);
}

.settingsSubmenu hr{
    background-color: var(--monoColor4);
    border: none;
    height: calc(var(--zoom)*2px);
}

.settingsSubmenu h1{
    font-size: calc(var(--zoom)*14px);
    color: orange;
    text-decoration: underline;
}

.settingsSubmenu h1:hover{
    cursor:none;
}

.settingsSubmenu a{
    display: block;
    width: 100%;
    color: var(--monoColor4);
    text-decoration: none; 
    line-height: calc(var(--zoom)*20px);   
}

.settingsSubmenu a:hover{
    cursor: pointer;
    background-color: var(--monoColor3);
    border-radius: calc(var(--zoom)*3px);
}

.settingsSubmenu span {
    display: block;    
    color: var(--monoColor4);
    text-decoration: none;  
    line-height: calc(var(--zoom)*20px);     
}

.settingsSubmenu span:hover {
    cursor: pointer;
    background-color: var(--monoColor3);
    border-radius: calc(var(--zoom)*3px);    
}

.settingsSubmenu b {
    color: var(--monoColor4);
}

.settingsSubmenu img {
    height: calc(var(--zoom)*12px);
}

.settingsSubmenu.lang{
    display: flex;
    visibility: hidden;
    width: calc(var(--zoom)*800px);
    text-align: left;

}
.settingsSubmenuLangCol{
    display: inline-block;
    width: calc(var(--zoom)*200px);
    padding-right: calc(var(--zoom)*10px);
}

.settingsSubmenu.theme{
    width: calc(var(--zoom)*250px);
}
.settingsSubmenuThemeColor {
    position: relative;
    margin: calc(var(--zoom)*4px);
    width: calc(var(--zoom)*50px);
    height: calc(var(--zoom)*50px);
    border-radius: calc(var(--zoom)*10px);
    border: calc(var(--zoom)*1px) solid var(--monoColor3);
    background-color: white;
}

.settingsSubmenuThemeColor:hover {
    cursor:pointer;
    border-color: white;
}


/* G A M E   A R E A*/

.gameArea {
    position: absolute;
    /*important! left, hight must be set to -1000px because of scaling issue in CSS, 
    if set to 0px then when zooming above 150% element is pushed to the right instead of staying in center !!!*/
    left: -1000px;
    right: -1000px;
    top: 0px;
    bottom: 0px;
    margin: auto;   
    display: flex;
    width: 1000px;
    height: 550px;
    border-radius: 15px;
    line-height: 30px;
    overflow: hidden;
    font-weight: normal;
    border: 2px solid var(--monoColor3); /*2*/
    background-color: white;
    text-align: center;
    z-index: 1;
    transform-origin: center center;  
    transform: scale(var(--zoom));
}

.gameAreaTxtContent{
    text-align: var(--text-align);
    direction: var(--text-direction);

    padding: 10px 20px;
    overflow-y: scroll;
    scrollbar-color: var(--monoColor4);
    font-size: 20px;
    font-weight: normal;
    width: 980px;
}

.gameAreaTxtContent h1{
    color: var(--colorH1);             
}

.gameAreaTxtContent h2,h3,h4{
    color: var(--colorH2);          
}

.gameAreaTxtContent b{
    color: crimson;
}

.gameAreaTxtContent hr{
    border: none;
    height: 2px;
    background-color: var(--colorH2);
    filter: drop-shadow(0px 3px 2px var(--colorH2));
}


/* K E Y B O A R D */

.keyboard {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 10px;
    border-radius: 10px;
    background-color: var(--monoColor3);
    border: 2px solid var(--colorK);
}
.key {   
    position: absolute;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 7px;
    font-size: large;
    font-weight: bold;
    color: white;
    filter: drop-shadow(0px 2px 2px var(--monoColor2));
    background-color:  var(--colorK);
    transition: all 200ms;

}

.key.light {
    background-color: var(--colorH2);
}

.pressed, .key.light.pressed {
    background-color: var(--monoColor4);
    color: var(--monoColor1);
}

.keyboardSpeaker {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 8px;
    font-size: 25px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    filter: drop-shadow(0px 3px 2px var(--monoColor2));
}
.keyboardSpeaker:hover{
    cursor: pointer;
    background-color: rgba(255, 166, 0, 0.425);
}


/* L E S S O N S */

.lessonsMenu {
    position: absolute;
    display: box;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    width: calc(var(--zoom)*50px);
    height: calc(var(--zoom)*500px);
    border-top-right-radius: calc(var(--zoom)*15px);
    border-bottom-right-radius: calc(var(--zoom)*15px);    
    background-color: var(--monoColor3);
    border: calc(var(--zoom)*5px) solid var(--monoColor4);
    border-left-width: 0px;
    /*transition: all 250ms;*/
    /*transform-origin: left center;*/
    /*transform: scale(var(--zoom));*/
    z-index: 2; 
}

/*lessons topic popup buttons*/
.englishLessonsTopicBtn{
    opacity: 1;
    color: var(--colorH1);
}
.englishLessonsTopicBtn:hover{
    opacity: 1;
    filter: drop-shadow(1px 1px 1px var(--monoColor2));  
}

/* G A M E S */
.gamesMenu {
    position: absolute;
    display: box;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    width: calc(var(--zoom)*50px);
    height: calc(var(--zoom)*500px);
    border-top-left-radius: calc(var(--zoom)*15px);
    border-bottom-left-radius: calc(var(--zoom)*15px);
    background-color: var(--monoColor3);
    border: calc(var(--zoom)*5px) solid var(--monoColor4);
    border-right-width: 0px;
    /*transition: all 250ms;*/
    /*transform-origin: right center;*/
    /*transform: scale(var(--zoom));*/
    z-index: 2;
}

.activityBtn{
    position: relative;
    box-sizing: border-box;
    height: calc(var(--zoom)*37px);
    width: calc(var(--zoom)*40px);  
    margin: calc(var(--zoom)*15px) calc(var(--zoom)*5px);
    filter: drop-shadow(0px 0px calc(var(--zoom)*3px) var(--monoColor2));
    border-radius: calc(var(--zoom)*10px);
    text-align: center;
    align-items: center;
    vertical-align: center;
    transform-origin: top;
     
}

.activityBtnImg{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
     
}

.activityBtn:hover{
    cursor: pointer;
    background-color: rgb(253, 253, 138);
}

.activityBtn.active{
    background-color: chartreuse;    
}

.activityBtn.active:hover{
    background-color: rgb(187, 255, 0);   
}

.activityBtnHr{
    background-color: var(--monoColor4);
    width: 100%;
    height: calc(var(--zoom)*2px);    
}


/* C R E D I T S */

.credits {
    position: absolute;
    bottom: -60vh;
    height: 60vh;
    width: 100vw;
    z-index: 5;
    background-color: white;
    border-top: calc(var(--zoom)*5px) solid var(--monoColor3);
    transition: bottom 300ms;
    box-sizing: border-box;
    padding-left: calc(var(--zoom)*20px);
    font-size: calc(var(--zoom)*16px);    

}

.credits h1,h2,h3,h4,h5,h6 {
    display: block;
}

.credits:hover{
    bottom: 0px;
}

.creditsBtn {
    position: absolute;
    bottom: unset;
    top: 0px;
    margin-top: -27px;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    height: 27px;
    width: 100px;
    color: white;
    font-weight: bold;
    background-color: var(--monoColor3);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    vertical-align: middle;
    line-height: 25px;
    font-size: 18px;
    font-family: DynaPuff;
    transform-origin: center bottom;
    transform: scale(var(--zoom));
}

.creditsBtn:hover{
    cursor: pointer;
}

/* F O O T E R */
.footer{
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    font-size: 12px;
    color: #333333;
    transform-origin: right bottom;
    transform: scale(var(--zoom));
}

#privacyID{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px;
    font-size: 12px;
    text-decoration: underline;
    color: #333333;
    transform-origin: left bottom;
    transform: scale(var(--zoom));
}

#privacyID:hover{
    cursor: pointer;
    color: orange;
}

/* S T A T I S T I C S */
.statistics.testSpeedBtn{
    background-color: var(--colorB);
    color: var(--monoColor4);
    border-radius: 20px;
    border: 2px solid var(--colorB);
    width:fit-content;
    padding: 3px 10px;  
    font-weight: bold;  
}

.statistics.testSpeedBtn:hover{
    cursor: pointer;
    color: var(--colorB);
    background-color: white;

}

.statisticsChart{
    display: flex;
    align-items: flex-end;
    height: 200px;
    width: 100%;
    background-color: #eeeeee;
    border-radius: 10px;
    margin: 10px 0px;

}


.statisticsChartCol{
    position: relative;
    width: 25px;
    background-color: lightgreen;
    border: solid 1px #eeeeee;
    border-bottom: none;
}

.statisticsChartCol.best{
    background-color: green;
}

.statisticsChartCol:hover{
    cursor: pointer;
    background-color: crimson;
}



/* P O P   U P */

.popup{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    padding: 20px;
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    font-weight: normal;
    border-radius: 20px;
    border: 4px solid crimson;
    background-color: var(--monoColor4); 
    filter: drop-shadow(2px 3px 2px --monoColor3);     
    z-index: 1000000; 
    height: fit-content;  
}

.popupHeader{
    color: var(--colorH1);
}

/* W I N   P O P U P */
.popup.win{
    font-size: 40px;
    line-height: 50px;
    color: chartreuse;
    background-color: transparent;
    border-color: transparent;
    font-family: "DynaPuff";
    height: fit-content;
}

.winEmoji{
    font-family: "Noto Color Emoji" !important;  
    filter: drop-shadow(0px 3px 2px var(--monoColor2));        
    transition: top center; 
    animation-name: winEmojiAnimation ;	 
    animation-duration: 800ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;	
}
.winTxt{
    filter: drop-shadow(0px 3px 2px var(--monoColor2));   
    color: orange;  
    font-family: DynaPuff;   
    transition: top center; 
    animation-name: winTxtAnimation ;	 
    animation-duration: 800ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;	    
}


/* D I A L O G */

.dialog{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0,0,0,0.4);    

}

.dialogBox{
    direction: var(--text-direction);
    text-align: var(--text-align);    

    position: absolute;
    display: block;
    background-color: var(--monoColor2);
    color: var(--monoColor4);
    opacity: 1;
    left: -1000px;
    right: -1000px;
    top: -1000px;
    bottom: -1000px;
    margin: auto;
    width: 500px;
    max-width: 95vw;
    height:fit-content;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    transform-origin: center center;
    transform: scale(var(--zoom));

    background-color: var(--monoColor1);

}

.dialogBox a{
    color: var(--monoColor3);
}

.dialogText{  
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    background-color: transparent;    
    color: var(--monoColor4);
    width: 100%;
    height: fit-content;
    min-height: 100px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;

}

.dialogBtnContainer{
    display: flex;
    position: relative;
    height: 30px;
    width: 100%;
    font-size: 18px;
    line-height: 30px;
    left: 0px;  
    background-color: orange;
    color: white;    
    text-align: center;
    vertical-align: middle;      
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;  
    border-top: 2px groove white;      
    overflow: hidden;
}

.dialogConfirm{
    position: relative;
    width: 100%;   
}

.dialogConfirm:hover{
    cursor: pointer;
    background-color: steelblue;
    color: white;
}

.dialogCancel{
    position: relative;
    width: 100%;
    border-right: 2px groove #fdf6b4;
}

.dialogCancel:hover{
    cursor: pointer;
    background-color: steelblue;
    color: white;
}



/* L E S S O N S - TEXT CONTAINER - finger memory & typing practices*/

.textContainer{
    position: relative;
    display: flex;
    font-family: DynaPuff;
    text-align: center;
    font-size: 45px;
    line-height: 50px;
    height: 50px;
    font-weight: bold;
    border-radius: 40px;
    border: 10px solid var(--colorH2);
    background-color: white;
    color: var(--colorH2);
}

.textContainer.long{
    font-size: 25px;
    font-weight: bold;
}


.textContainer div {
    height: 100%; 
    padding: 1px;
    box-sizing: content-box;
    color: var(--colorH2);
    min-width: 10px;
}

.textContainer div.hidden{
    color: white;
}


.textContainer div.rightAnswer {
    background-color: var(--colorH2);
    margin: -1px;     
    border: 1px solid var(--colorH2);
    color: white;
    
}

.textContainer div.wrongAnswer {
    background-color: var(--colorB);
    margin: -1px;     
    border: 1px solid var(--colorH2);
    border-right-color: var(--colorB);
    color: white;    
}


.textContainer div:first-child{
    padding-left: 10px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;   
}
.textContainer div:last-child{
    padding-right: 10px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;     
}

.textContainer.long div:first-child{
    padding-left: 10px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;       
}
.textContainer.long div:last-child{
    padding-right: 10px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;     
}





/* H A N D S (PRACTICE TYPING / FINGER MEMORY LESSON)*/

.hand{
    --palm-height: 76px;
    --finger-height: 62px;
    background-color: rgb(255, 205, 96); 
    transition: all 200ms;    
}

.hand.palm{
    position: absolute;
    bottom: 10px;
    height: var(--palm-height);
    width: calc(var(--palm-height) + 10px);
}

.hand.palm.left{
    left: 10px;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 50%;
}

.hand.palm.right{
    right: 10px;
    bottom: 10px;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 50%;
}

.hand.finger{   
    position: absolute;
    bottom: calc(var(--palm-height) - 10px); 
    width: 20px;
    height: var(--finger-height);
    border-radius: 10px;
    text-align: center;
    color: #333333;
}

.hand.finger.pinky{
    bottom: calc(var(--palm-height) - 32px);  
}

.hand.finger.ring{
    bottom: calc(var(--palm-height) - 20px);  
}

.hand.finger.middle{
    bottom: calc(var(--palm-height) - 15px);  
}

.hand.finger.pointer{
    bottom: calc(var(--palm-height) - 20px);  
}

.hand.finger.long{
    height: calc(var(--finger-height) + 20px);
}

.hand.finger.short:not(.thumb){
    height: calc(var(--finger-height) - 15px); 
}

.hand.finger.red{
    color: rgb(253, 39, 39);
}

.hand.thumb{
    position: absolute;
    width: 24px;  
    height: calc(var(--finger-height) + 15px);    
}

.hand.thumb.left{
   right: 15px;
   bottom: 0px;
   border-top-left-radius: 15px;
   border-top-right-radius: 5px;
   transform-origin: right bottom;
   transform: rotate(60deg);
}

.hand.thumb.right{
    left: 15px;
    bottom: 0px;
    border-top-right-radius: 15px;
    border-top-left-radius: 5px;
    transform-origin: left bottom;
    transform: rotate(-60deg);
}

.counter.practiceGames{
    position: absolute;
    bottom: 65%;
    border-radius: 50%;
    background-color: var(--monoColor3);
    color: white;
    text-align: center;
    width: 100px;
    height: 100px;
    font-size: 30px;
    line-height: 100px;
}

/* M I S C E L A N E O U S */

.todo{
    opacity: 0.5;
}

.onHoverPointer:hover{
    cursor: pointer;
}

.dropShadow{
    filter: drop-shadow(0px 3px 2px var(--monoColor2)); 
}

/*CUSTOM STYLED TITLE ATTRIBUTE*/

.tooltip:after{
    all: initial;
    content: attr(alt);
    direction: var(--tooltip-dir);
    text-align: var(--text-align);
    position: absolute;
    padding: calc(var(--zoom)*3px) calc(var(--zoom)*3px);
    background-color: rgb(245, 44, 78);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: calc(var(--zoom)*6mm);
    font-size: calc(var(--zoom)*5mm); /*18px*/
    color: white;
    white-space: nowrap;
    border-radius: calc(var(--zoom)*5px);
    z-index: 1;
    visibility: hidden;  
  }

.tooltip.scalable:after{
    padding: 3px 3px;    
    line-height: 6mm;
    font-size: 5mm; /*18px*/
    border-radius: 5px;    
}

.tooltip:hover:after{
    visibility: visible;
}

.tooltip.southeast:after{
    top: 120%;    
    left: 5px;
    transform-origin: left center;    
}

.tooltip.southwest:after{
    top: 120%;    
    right: 5px;
    transform-origin: left center;    
}

.tooltip.east:after{
    top: 10%;    
    left: 150%;
    transform-origin: left center;    
}

.tooltip.west:after{
    top: 10%;    
    right: 150%;
    transform-origin: right center;    
}

.shareBtn{
    height: 50px;
    width: 50px;
    filter: drop-shadow(0px 0px 3px #333);
    margin-right: 20px;
}

.shareBtn:hover{
    cursor: pointer;
    filter: drop-shadow(0px 0px 5px crimson);
}

/*text styles & colors*/
.sgntr{
    text-align: right;
    font-style: italic;
    color: steelblue;
}
.brck{
    color: rgb(245, 44, 78);
}
.stlbl{
    color: steelblue;
}
.grn{
    color:green;
}
.lgrn{
    color: lightgreen;
}
.gr{
    color: #333
}
.b{
    font-weight: bold;
}

/*set text-align if text direction is RTL*/
[dir="rtl"]{
    text-align: right;
}


@keyframes crainAnimation {
    0% {transform: scale(-1,0.8)}
    25% {transform: scale(1,0.8)}
    50%{transform: scale(1,1.2)}
    75%{transform: scale(1,0.8)}
    100% {transform: scale(-1,0.8)}    
}

@keyframes hammerAnimation {
    0%{transform: rotate(0deg) scale(0.5,0.5)}
    50%{transform: rotate(-45deg) scale(0.5,0.5)}  
    100%{transform: rotate(0deg) scale(0.5,0.5)}      
}

@keyframes winEmojiAnimation {
    0%{font-size: 10px;}
    100%{font-size: 60px;}
}

@keyframes winTxtAnimation {
    0%{font-size: 10px;}
    100%{font-size: 40px;}
}



/*MOBILE*/
#mobileContainer{
    position: absolute;
    display: block;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;    
    font-size: 22px;
    background-color: white;
    
    overflow-y: scroll;
    padding: 20px 20px;

    word-wrap: break-word;
    overflow-wrap: break-word;

    direction: var(--text-direction);
    text-align: var(--text-align);    
}

#mobileContainer video {
    width: 90%;
    max-width: 15cm;
    height: auto;
    border-radius: 10px;
    filter: drop-shadow(0px 3px 5px grey);  
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;    
}

.mobileLogo{
    position: relative;
    max-width: 80%;
    height: auto;
}

.mblimgprw { /*mobile img preview*/
    width: 90%;
    max-width: 15cm;
    height: auto;
    border-radius: 10px;
    filter: drop-shadow(0px 3px 5px grey);  
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

#mobileContainer h1 {
    font-family: DynaPuff;
    font-size: 26px;
    color: steelblue;
}

#mobileContainer h2 {
    font-family: DynaPuff;
    font-size: 24px;
    color: rgb(2, 139, 75);
}

#mobileContainer b {
    font-size: 20px;
    color: teal;
}

#mobileContainer hr {
    border: none;
    height: 2px;
    background-color: steelblue;
    filter: drop-shadow(0px 3px 2px steelblue);
}

/*#mobileContainer p{
    position: relative;
    width: auto;
}*/

.mobileLangBtn {
    position: fixed; 
    box-sizing: border-box;
    right: -1px; 
    top: -1px; 
    width: 70px; 
    height: 60px; 
    background-color: steelblue;  
    z-index: 19; 
    border-radius: 0px 0px 0px 10px; 
    filter: drop-shadow(-2px 2px 3px #888);
    font-size: 40px;
    padding: 7px 10px;
}

.mobileLangBar {  
    display: none;
    position: relative;
    width: 100%;  
    /*height: 0;*/
    overflow: hidden;
    text-align: left;
    box-sizing: border-box;
    /*transition: all 700ms ease;*/

}

.mobileLangBarVisible{
    display: block;
}
.mobileLangBar a {
    display: block;
    width: 100%;
    color: grey;
    text-decoration: none; 
    font-size: 24px;
    line-height: 30px; 
}
.mobileLangBar a:hover{
    cursor: pointer;
    background-color: steelblue;
    border-radius: 3px;
}

.mobileLangBar h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important; 
    text-align: center;
    color: steelblue;
    text-decoration: none;
}

.mobileFooter{
    font-size: 10px;
    text-align: center;
}

.mobileShareBar{
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    width: 100vw;
    height: 50px;
    background-color: transparent;
    padding: 15px; 
}

.mobileShareBtn{
    height: 50px;
    width: 50px;
    filter: drop-shadow(2px 2px 3px #333);
    margin-right: 15px;
}