* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    /*background: #1976D2;*/
}
.piano {
    width: 100%;
    /*height: 250px;*/
    height: 120px;
    margin:0px auto;
    display:flex;
    border-top: 2px #000 solid;

}

.pianoBoard{
    display: contents;

}
.pianoWrap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.key:hover {
    box-shadow: inset -0px -0px 40px #999;

}

.key {
    width: 100px;
    height: 100%;
    border:2px solid #000;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    box-shadow: inset -0px -0px 3px #000;
    text-align: center;
    font-size: 14px;
    font-family: "Cabin Sketch", sans-serif;
    font-weight: bold;
    background: #fff;
    user-select: none;
    transition: .1s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.key-w {
    width: 77px;
}

.key-b {
    width: 70px;
    background: #000;
    font-size: 10px;
    color:#fff;
    height: 60%;
    /*margin-left: -35px;*/
    /*margin-right: -35px;*/
    z-index: 2;

    margin-left: 0px;
    margin-right: -50px;
    position: relative;
    right: 28px;

    border: 3px #fff solid;
    border-top: 0px #fff solid;


}
.key.active {
    background: #73A0D9FF;
}
.key-b.active {
    background: #73A0D9FF;
}

button.a {
    width: 70px;
    margin: 2px 4px;
}

button.a.b {
    background-color: #AAA;
}


.key.major {
    background: #73D98BFF;
}

.key.minor {
    background: #73B5D9FF;
}