/* --- Виртуальная клавиатура --- */
#keyboard-container {
    position: absolute;
    box-sizing: border-box;
    left: 0%; top: 100%; height: 330px; width: 100%;
    transform: translateY(0);
    background: rgb(51, 53, 63, 0.8);
    padding: 8px 200px;
    border-top: 4px solid rgb(179, 213, 240);
    z-index: 10;
    transition: bottom 0.3s, transform 0.3s;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

/* активное состояние */
body.keyb #keyboard-container {
    transform: translateY(-100%);
    pointer-events: all;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
}

.keyboard-key {
    padding: 10px 10px;
    margin: 3px;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    font-weight: 600;
    color: white;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px solid rgba(255,255,255,0.15);
    border-width: 1px 0 0px 0;
    cursor: pointer;
    flex: 1;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 24px;
    transition: background-color 0.5s;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    /* transition-delay: 0.2s; */
}

.keyboard-key:hover {
    /* transition-delay: 0.0s; */
    transition: background-color 0.0s;
    background-color: rgb(179, 213, 240, 0.3);
}

.key-control {
    background-color: rgb(179, 213, 240, 0.1);
}

.key-control.keyboard-close {
    background-color: rgb(56 90 142 / 52%);
}

.key-shift-active {
    background-color: rgba(49, 83, 112, 0.3);
}