.piano {
            display: flex;
            width: 100%;
            max-width: 100%;
            height: 250px; /* Adjust the height of the keyboard as needed */
            justify-content: center;
            align-items: top;
            margin-top: 10px;
        }

.key {
            width: 70px;
            height: 230px;
            color: 999;
            background-color: 555;
            border: 1px solid black;
            border-radius: 7px;
            position: relative;
            cursor: pointer;
        }

.key.black {
            width: 54px;
            height: 140px;
            background-color: black;
            position: relative;
            z-index: 1;
            margin-left: -27px;
            margin-right: -27px;
        }

.key.active {
            background-color: #ccc;
            }
            
.key.black.active {
			background-color: #555;
			}

.dot {
            position: absolute;
            bottom: 10px;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: #0000FF;
            border-radius: 50%;
            transform: translateX(-50%);
            display: none; /* Hidden by default */
        }

/* Blinking effect for hint dots */
.blinking {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}