:root {
    --keyboard-height : 50px;

}


.keyboard {

    position: relative;
    display: flex;
    justify-content: center;



}



.white {
    position: relative;
    width: calc(var(--keyboard-height) / 4);
    height: var(--keyboard-height);
    border: 1px solid black;
    box-sizing: border-box;
    background: white;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

}

.black {
    position: relative;
    width: calc(var(--keyboard-height) * 0.15);
    height: calc(var(--keyboard-height) * .7);
    background: black;
    box-sizing: border-box;
    z-index: 1;
    transform: translateX(-50%);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid black;

}

.black + .white {
    margin-left: calc(var(--keyboard-height) * -0.15);
}

.chordTone {
    background-color: rgb(87, 207, 161);
    border: 1px solid black;
}

.notes {
    text-align: center;
    font-size: 45px;
    height: 50px;
}

.hidden {
    display: none;
    visibility: hidden;
}