body {
    background-color: darkslategray;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 98vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.white-keys {
    position: absolute;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    width: 52vw;
    height: 30vh;
}

.black-keys {
    display: flex;
    width: 52vw;
    height: 30vh;
}

.white-keys kbd {
    border-style: solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-color: dimgray;
    background-color: white;

    font-size: 2vh;
    font-weight: bolder;
    color: salmon;

    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 10vh;

    height: 100%;
    z-index: 1;

    position: relative;
    transition: all 0.2s linear;
    transform-style: preserve-3d;
}

.black-keys kbd {
    border-style: solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-color: dimgray;
    background-color: black;

    font-size: 2vh;
    font-weight: bolder;
    color: salmon;

    display: flex;
    justify-content: space-around;
    align-items: center;

    width: calc(52vw / 13);
    height: 57%;
    z-index: 3;

    position: relative;
    transition: all 0.2s linear;
    transform-style: preserve-3d;
}

.black-left {
    display: flex;
    justify-content: center;
    gap: 3.2vw;
    flex-grow: 4;
}

.black-right {
    display: flex;
    justify-content: center;
    gap: 3.1vw;
    flex-grow: 4;
}

.white-keys kbd:active, .white-keys .keyPressed {
    background-color: seashell;
    transform: translate(2px , -2px);
    z-index: 0;
}

.black-keys kbd:active, .black-keys .keyPressed {
    background-color: #0a3700;
    transform: translate(2px , -2px);
    z-index: 2;
}

.white-keys kbd:hover {
    opacity: 0.90;
    color: green;
}

.black-keys kbd:hover {
    color: yellow;
}