:root{
    --keyboard-width:500px;
}
.numpad{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    z-index:1000000;
    gap: 5px;
    background: var(--mdb-dark);
    position: absolute;
    padding: 15px;
    height: 40vh;

    /* transition: ease transform 0.5s; */



}
.hidden_keyboard{
    display: none;
    /* height: 0; */
    visibility: hidden;
    z-index: -1000000;
}

.keyboard{
    display: grid;
    /* grid-template-columns: repeat(11, 1fr); */
    grid-template-columns: repeat(11, 1fr);
    height: 40vh;
    width: var(--keyboard-width);
    z-index: 1000000;
    gap: 5px;
    background: var(--mdb-dark);
    position: absolute;
    padding: 15px;
    /* transition: ease all 0.5s; */
}

.keyboard button, .numpad  button {
    font-size: 36px !important;
    font-weight: bold;
    color: white;
    background-color: var(--mdb-success);
    border: none;
    border-radius: 5%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    
}

.keyboard button{
    font-size: 1rem !important;
}