div.keyboard {
    font-family: Arial;
    font-size: 1.6rem;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 10px;
    background-color: #D1D2D7;
    padding: 10px;
    position: fixed;
    width: calc(100% - 20px);
    user-select: none;
    -webkit-user-select: none;
    bottom: 0px;
}

div.keyboard.show {
    animation-name: showKeyboard;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@media (orientation: landscape) {
    @keyframes showKeyboard {
        from {
            bottom: calc(-35% - 20px);
        }
        to {
            bottom: 0px;
        }
    }

    div.keyboard {
        height: 35%;
        bottom: calc(-35% - 20px);
        right: 0px;
        /*bottom: 0;*/
    }

    div.keyboard div {
        border-radius: 6px;
    }
}

@media (orientation: portrait) {
    @keyframes showKeyboard {
        from {
            bottom: calc(-25%);
        }
        to {
            bottom: 0px;
        }
    }

    div.keyboard {
        height: calc(25% - 20px);
        bottom: calc(-25%);
    }

    div.keyboard div {
        border-radius: 8px;
    }
}

div.keyboard.upper div.key:not(.enter):not(.space):not(.back) {
    text-transform: uppercase;
}

div.keyboard div {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 2px 2px #737479;
    grid-column: span 2;
}

div.keyboard div.mayus, div.keyboard div.chars {
    grid-column: span 3 !important;
}

div.keyboard div.mayus:not(.select), div.keyboard div.chars {
    background-color: #ACB0B9 !important;
}

div.back {
    grid-column: 18 / span 3 !important;
    background-color: #ACB0B9 !important;
}

div.mayus.select {
    background-color: white !important;
}

div.num {
    grid-column: span 4 !important;
    background-color: #ACB0B9 !important;
}

div.space {
    grid-column: span 12 !important;
}

div.enter {
    grid-column: span 4 !important;
    background-color: #ACB0B9 !important;
}

div.keyboard:not(.blocknum) .sub, div.keyboard:not(.chars) .sub2 {
    display: none;
}

div.keyboard.blocknum .key:not(.sub):not(.space):not(.enter):not(.back), div.keyboard.blocknum .mayus {
    display: none;
}

div.keyboard.chars .key:not(.sub2):not(.space):not(.enter):not(.back) {
    display: none;
}

div.keyboard.blocknum .sub {
    display: flex;
}

div.keyboard.chars .sub2 {
    display: flex !important;
}

div.keyboard div.click {
    /*transform: scale(0.95);*/
    box-shadow: none;
}