#pianoKeyboard {
    width: 100%;
    min-height: 20%;
    background-color: gray;
}

@media (orientation: portrait) {
    #pianoKeyboard {
        min-height: 10%;
    }
}

.keyboard {
    position: relative;
    height: 100%;
    touch-action: none;
}

.whitekeys,
.blackkeys {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
}

.whitekeys {
    height: 100%;
}

.blackkeys {
    height: 60%;
    width: 93.75%;
    margin-left: 3.125%;
    pointer-events: none;
}

.space {
    visibility: hidden;
    height: 0;
}

.black {
    background-color: #222222;
    pointer-events: all;
}

.white {
    border: solid 1px black;
    background-color: floralwhite;
    flex: auto;
}

.black,
.white {
    border-radius: 0 0 5px 5px;
}

.black,
.space {
    flex: 1 1 0;
    margin: 0 1.25%;
}

.black:hover {
    background-color: #000000;
}

.white:hover {
    background-color: white;
}

.black.active {
    background-color: #444444;
}

.white.active {
    background-color: blanchedalmond;
}

.left {
    margin: 0 1.5625% 0 0.9375%;
}

.right {
    margin: 0 0.9375% 0 1.5625%;
}