:root{
    --keyboard-width:500px;
}
.numpad{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    z-index:1000000;
    gap: 5px;
    background: linear-gradient(106deg, rgb(64, 66, 126) 18%, rgba(0,212,255,1) 89%);
    position: absolute;
    padding: 15px;
    grid-auto-rows: 40px;
    top: 0;
    /* transition: ease transform 0.5s; */



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

.keyboard{
    display: grid;
    /* grid-template-columns: repeat(11, 1fr); */
    grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 10%;

    width: var(--keyboard-width);
    max-width: 80vw;
    z-index: 1000000;
    gap: 5px;
    background: linear-gradient(106deg, rgb(64, 66, 126) 18%, rgba(0,212,255,1) 89%);
    position: absolute;
    top: 0;
    padding: 15px;
    grid-auto-rows: 40px;
    /* transition: ease all 0.5s; */
}

.keyboard button, .numpad  button {
    font-size: 1.5rem;
    color: white;
    background-color: cornflowerblue;
    border: none;
    border-radius: 5%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    
}

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