.kb {
    /* 9.4 / 16 coming from vh issue with iphone and address bar always present */
    --kbw: calc(min(1vw, 1vh * 9.4/ 16));
    width: calc(100*var(--kbw));
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #aaa;
    color: white;
    touch-action: manipulation; /*no double tap to zoom on iphone*/
}
    .kb::after {
        content: '';
        display: block;
        height: calc(1*var(--pw));
    }

.kb-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0vw var(--kbw) 0vw var(--kbw);
}

.kb-key {
    background-color: #ddd;
    border-style: solid;
    border-color: #888;
    border-radius: calc(1*var(--kbw));
    font-size: calc(6*var(--kbw));
    color: #222;
    border-width: calc(0.2*var(--kbw));
    width: calc(10 * var(--kbw));
    margin: var(--kbw);
    padding: var(--kbw);
    text-align: center;
}
.kb-bs {
    font-weight: bold;
    font-size: calc(4*var(--kbw));
    width: calc(15*var(--kbw));
}

.kb-enter {
    font-weight: bold;
    font-size: calc(4*var(--kbw));
    width: calc(20*var(--kbw));
}

.kb-clear {
    font-weight: bold;
    font-size: calc(4*var(--kbw));
    width: calc(20*var(--kbw));
}

.kb-text-preview {
    height: calc(8 * var(--kbw));
    flex: 1;
    font-weight: bold;
    color: blue;
    overflow: hidden;
    width: calc(60*var(--kbw));
    direction: rtl;
}