body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Ensure that children stack vertically */
}

#piano {
    display: flex;
    position: fixed; /* Make it fixed at the bottom */
    bottom: 0; /* Position it at the bottom */
    left: 0; /* Align to the left */
    justify-content: space-between; /* Distribute keys evenly */
    width: 100%; /* Full width of the page */
    padding-bottom: 20px;
}

.key {
    flex: 1; /* Allow keys to grow and shrink equally */
    height: 150px; /* Fixed height for keys */
    background: white;
    border: 1px solid black;
    transition: background 0.2s;
    opacity: 0; /* Initially hidden */
}

.key.black {
    width: calc(100% / 52 * 0.6); /* Adjust black key width */
    height: 100px; /* Fixed height for black keys */
    margin-left: -calc(100% / 52 * 0.3);
    z-index: 1;
}

.key.white.active {
    background-color: yellow; /* Press effect for white keys */
}

.key.black.active {
    background-color: #666; /* Darker shade for black keys when pressed */
    box-shadow: 0 0 5px 2px rgba(255, 255, 0, 0.7); /* Optional glow for black keys */
}

/* Subtle green gradient for the floating effect */
.float-effect {
    position: absolute;
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.8), rgba(229, 131, 233, 0.8)); /* Light green to dark green */
    border-radius: 5px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 2s;
}