:root {
    --wk-width:56.25vh;
    --wk-height:100vh;
}

@media (orientation: portrait) {
    :root {
        --wk-width:min(100vw,56.25vh);
        --wk-height:100vh;
    }
}

:root {
    --pg-width: 56.25vh;
    --pg-height: 100vh;
    --base-font-size: 14px;
    --head-ratio: 0.09375;

    --head-btn-width: calc(var(--pg-width) * var(--head-ratio) * 1.15);
    --head-btn-height: calc(var(--pg-width) * var(--head-ratio) * 1.15);
    --head-btn-radius: calc(var(--head-btn-height) / 2.2);
    --head-btn-margin: calc(var(--head-btn-height) / 4);
    --head-btn-font-size: calc(var(--head-btn-height) * 0.35);
    --ab-height: calc(var(--head-btn-height) + (var(--head-btn-margin) * 2));

    --lb-margin: 3px;
    --lb-margin-bigger-total: 9px;
    --lb-margin-total: 6px;

    --btn-lg-height:48px;
    --btn-lg-font-size:24px;

    --btn-height:32px;
    --btn-font-size:16px;

    --clr-black: #000;
    --clr-dark-gray: #333;
    --clr-gray: #666;

    --clr-yellow:rgb(148,106,28);

    --clr-purple-alpha: #990099ee;
    --clr-blue-alpha: rgba(37, 107, 225,0.9);
    --clr-red-alpha: #AA2525ee;
    --clr-green-alpha: #00AA88ee;

    --clr-blue: rgba(37, 107, 225,1);
    --clr-dark-blue: rgba(33, 97, 198,1);
    --clr-darker-blue: rgba(03, 67, 168,1);
    --clr-darker2-blue: rgba(03, 37, 128,1);

    --clr-green: #00AA88;
    --clr-dark-green: #006652;

    --clr-purple: #990099;

    --clr-red: #AA2525;
    --clr-dark-red: #662525;
}
@media screen and (max-width:600px) {


    :root {
        --base-font-size: 14px;
        --head-ratio: 0.09375;
        --ab-height: calc(var(--head-btn-height) + (var(--head-btn-margin) * 2));

    }
}

.letter-bank { font-family: 'Lato', sans-serif !important;
    height:calc((var(--head-btn-height) * 2) + var(--lb-margin-total));
    min-height:calc((var(--head-btn-height) * 2) + var(--lb-margin-total));
    width:calc(100% - 2px);display:flex;box-sizing:border-box;flex-direction:row;flex-wrap:wrap;
    padding:0;
    margin:0 1px;
    z-index:10;position:relative;font-weight:900 !important;}

.bigger_font .letter-bank { font-family: 'Lato', sans-serif !important;
    height:calc((var(--head-btn-height) * 3) + var(--lb-margin-bigger-total));
    min-height:calc((var(--head-btn-height) * 3) + var(--lb-margin-bigger-total));
    display:flex;box-sizing:border-box;flex-direction:row;flex-wrap:wrap;
    z-index:10;position:relative;font-weight:900 !important;}

:root {
    --key-width: 10%;
}
* { box-sizing:border-box; }

.letter-bank .letter { flex:1 0 var(--key-width);
    max-width:var(--key-width);width:var(--key-width);
    overflow:hidden;
    border:1px solid transparent;
    display:flex;justify-content:center;align-items:center;position:absolute;box-sizing:border-box; }

.bigger_font .letter-bank .letter { flex:1 0 12.5%;max-width:12.5%;min-width:12.5%;width:12.5%;display:flex;justify-content:center;align-items:center;position:absolute;box-sizing:border-box;
}

.letter-bank {
    --key-top: calc(var(--head-btn-height) + var(--lb-margin) + 1px);
    --key-top2: calc(var(--key-top) * 2);
}

.letter-bank .letter {
    --pos-x: 100%;
    --pos-x2: calc(var(--pos-x) * 2);
    --pos-x3: calc(var(--pos-x) * 3);
    --pos-x4: calc(var(--pos-x) * 4);
    --pos-x5: calc(var(--pos-x) * 5);
    --pos-x6: calc(var(--pos-x) * 6);
    --pos-x7: calc(var(--pos-x) * 7);
    --pos-x8: calc(var(--pos-x) * 8);
    --pos-x9: calc(var(--pos-x) * 9);
}
.letter-bank .letter:nth-child(1) { transform: translate(0,0); }
.letter-bank .letter:nth-child(2) { transform: translate(var(--pos-x),0); }
.letter-bank .letter:nth-child(3) { transform: translate(var(--pos-x2),0); }
.letter-bank .letter:nth-child(4) { transform: translate(var(--pos-x3),0); }
.letter-bank .letter:nth-child(5) { transform: translate(var(--pos-x4),0); }
.letter-bank .letter:nth-child(6) { transform: translate(var(--pos-x5),0); }
.letter-bank .letter:nth-child(7) { transform: translate(var(--pos-x6),0); }
.letter-bank .letter:nth-child(8) { transform: translate(var(--pos-x7),0); }
.letter-bank .letter:nth-child(9) { transform: translate(var(--pos-x8),0); }
.letter-bank .letter:nth-child(10) { transform: translate(var(--pos-x9),0); }

.letter-bank .letter:nth-child(11) { transform: translate(0,var(--key-top)); }
.letter-bank .letter:nth-child(12) { transform: translate(var(--pos-x),var(--key-top)); }
.letter-bank .letter:nth-child(13) { transform: translate(var(--pos-x2),var(--key-top)); }
.letter-bank .letter:nth-child(14) { transform: translate(var(--pos-x3),var(--key-top)); }
.letter-bank .letter:nth-child(15) { transform: translate(var(--pos-x4),var(--key-top)); }
.letter-bank .letter:nth-child(16) { transform: translate(var(--pos-x5),var(--key-top)); }
.letter-bank .letter:nth-child(17) { transform: translate(var(--pos-x6),var(--key-top)); }
.letter-bank .letter:nth-child(18) { transform: translate(var(--pos-x7),var(--key-top)); }
.letter-bank .letter:nth-child(19) { transform: translate(var(--pos-x8),var(--key-top)); }
.letter-bank .letter:nth-child(20) { transform: translate(var(--pos-x9),var(--key-top)); }


.bigger_font .letter-bank .letter:nth-child(1) { transform: translate(0,0); }
.bigger_font .letter-bank .letter:nth-child(2) { transform: translate(100%,0); }
.bigger_font .letter-bank .letter:nth-child(3) { transform: translate(200%,0); }
.bigger_font .letter-bank .letter:nth-child(4) { transform: translate(300%,0); }
.bigger_font .letter-bank .letter:nth-child(5) { transform: translate(400%,0); }
.bigger_font .letter-bank .letter:nth-child(6) { transform: translate(500%,0); }
.bigger_font .letter-bank .letter:nth-child(7) { transform: translate(600%,0); }
.bigger_font .letter-bank .letter:nth-child(8) { transform: translate(700%,0); }

.bigger_font .letter-bank .letter:nth-child(9) { transform: translate(0,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(10) { transform: translate(100%,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(11) { transform: translate(200%,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(12) { transform: translate(300%,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(13) { transform: translate(400%,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(14) { transform: translate(500%,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(15) { transform: translate(600%,var(--key-top)); }
.bigger_font .letter-bank .letter:nth-child(16) { transform: translate(700%,var(--key-top)); }

.bigger_font .letter-bank .letter:nth-child(17) { transform: translate(0,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(18) { transform: translate(100%,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(19) { transform: translate(200%,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(20) { transform: translate(300%,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(21) { transform: translate(400%,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(22) { transform: translate(500%,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(23) { transform: translate(600%,var(--key-top2)); }
.bigger_font .letter-bank .letter:nth-child(24) { transform: translate(700%,var(--key-top2)); }


.letter-bank a { text-decoration:none !important; }
.letter-bank .letter:hover { text-decoration:none; }
.letter-bank .letter { border-radius:6px;overflow:hidden; }

.letter-bank .letter:before { position:absolute;
    -moz-box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);border-radius:6px;overflow:hidden;
    -webkit-box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);
    box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);left:0;top:0;display:flex;width:100%;height:100%;content:'';z-index:0;background:#f5f5f5; }

.letter-bank .letter:after { position:absolute;
    -moz-box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);border-radius:6px;overflow:hidden;
    -webkit-box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);
    box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);left:0;top:0;display:flex;width:100%;height:100%;content:'';z-index:0;
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}

.letter-bank .letter span { display:flex;width:100%;height:var(--head-btn-height);
    justify-content: center;
    align-items:center;
    text-shadow:0 0 4px rgba(255,255,255,0.4);
    position:relative;
    z-index:2;
    font-weight:900;
    font-family: 'Lato',sans-serif;
    font-size:calc(var(--head-btn-height) * 0.45);

    color:#000;}

@media screen and (max-width:600px) {
    .letter-bank .letter span {
        border-radius:4px;
    }
}

.dark-mode .letter-bank .letter:before {
    background:#444;
}

.dark-mode .letter-bank .letter span {
    text-shadow:0 0 4px rgba(0,0,0,0.4);
}
.dark-mode .letter-bank .letter span {
    color:#fff;
}
.letter-bank .letter:hover { opacity:0.9; }

.letter-bank .letter.used { opacity:0.3;pointer-events:none;}
.letter-selectable { background:rgba(0,0,0,0.6);border-radius:6px;margin:5px 0;border:1px solid rgba(255,255,255,0.2);padding-top:2px;}
@media screen and (max-width:600px) {
    .letter-selectable { border-radius:3px; }
}
/*.letter-selectable:hover { background:rgba(255,255,255,0.1);}*/

.letter-bank .hint-full span {
    border-radius:6px;
    -moz-box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);
    box-shadow-bottom: 4px 4px 4px rgba(0,0,0,0.4);
    background-image: linear-gradient(bottom, rgb(211, 56, 41) 0%, rgb(231, 76, 61) 100%);
    background-image: -o-linear-gradient(bottom, rgb(211, 56, 41) 0%, rgb(231, 76, 61) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(211, 56, 41) 0%, rgb(231, 76, 61) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(211, 56, 41) 0%, rgb(231, 76, 61) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(211, 56, 41) 0%, rgb(231, 76, 61) 100%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(211, 56, 41)),
            color-stop(1, rgb(231, 76, 61))
    );color:#fff;display:block;width:100%;height:100%;
    text-decoration: none;
    font-size:0.9em;
    font-weight: bold;}