#piano-container {
    margin: 0 auto;
    width: calc(100% - 5px);
    height: 400px;
    overflow: auto;
}

#piano-wrap * {            
    box-sizing: border-box;
    font-family: Arial;
    user-select: none;
}

#piano-wrap {
    margin: 0 auto;
    height: 330px;
    width: calc(60px * 16);
    display: flex;
    justify-content: center;
}

#piano-wrap > div {
    position: relative;
}

.white-key {
    width: 60px;
    height: 320px;
    background-color: white;
    border: solid 1px black;
    z-index: 1;
    border-bottom: solid rgb(230, 230, 230) 10px;
    border-radius:0 0 7px 7px;
    box-shadow: 0 10px 3px 0 rgba(0, 0, 0, 0.4);
    transition: 100ms;
    color: black;
}

.white-key.pressing {
    border-bottom: solid rgb(230, 230, 230) 0px;
    border-left:solid rgb(109, 109, 76) 2px;
    border-right:solid rgb(109, 109, 76) 2px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
}

.black-key {
    width: 59px;
    height: 190px;
    background: linear-gradient(to bottom, rgb(0, 0, 128) 97%, white);
    margin-left: -16px;
    margin-right: -16px;
    z-index: 2;
    border-bottom: solid rgb(0, 0, 128) 10px;
    border-left: solid navy 1px;
    border-right: solid navy 1px;
    box-shadow: 5px 1px 2px 0 rgba(0, 0, 0, 0.4);
    transition: 100ms;
    color: white;
    text-align: center;
}

.black-key.pressing {
    border-bottom: solid rgb(0, 0, 128) 4px;
    box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.4);
    background: linear-gradient(to bottom, rgb(0, 0, 128) 100%, white);
}

.key-label {
    position: absolute;
    display: block;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.k8 {
    background-color: #ffccff;
}

.k2, .k3, .k7, .k10, .k14 {
    background-color: #ccffff;
}

.k0, .k1, .k4, .k5, .k6, .k8, .k9, .k11, .k12, .k13, .k15 {
    height: 320px;
    position: absolute;
    top: 40px;
}

.k2, .k3, .k7, .k10, .k14 {
    height: 160px;
}

.k4, .k5, .k6 {
    position: absolute;
    right: 104px;
}

.k0, .k1 {
    position: absolute;
    right: 50px;
}

.k2 {
    position: absolute;
    right: 125px;
}

.k3 {
    position: absolute;
    right: 92px;
}

.k7 {
    position: absolute;
    right: 120px;
}

.k8, .k9 {
    position: absolute;
    right: 131px;
}

.k10 {
    position: absolute;
    right: 145px;
}

.k11, .k12, .k13 {
    position: absolute;
    right: 158px;
}

.k14 {
    position: absolute;
    right: 170px;
}


.k15 {
    position: absolute;
    right: 185px;
}