.keyboard {
    display: none;
    position: absolute;
    background-color: #d3d3d3; /* Gray background */
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px; /* Add padding for better spacing */
    border-radius: 10px; /* Rounded corners */
    z-index: 1100; /* Ensure the keyboard is above other elements */
    width: fit-content; /* Adjust width to fit content */
}

.key:hover {
    background-color: #218838; /* Darker green on hover */
}

.key:active {
    background-color: #1e7e34; /* Even darker green on active */
}