body {margin: 0;}

body {
    touch-action: pan-x pan-y;
    /* touch-action: manipulation; */
    /* touch-action: none; */
    /* touch-action: pinch-zoom; */
  }

.piano-box {
    width: 852px;
    height: 393px;
    background-color: blue;
    /* position: relative; */
}

.key {
    display: flex;
    width: 60px;
    height: 60px;
    background-color: #D9D9D9;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    position: absolute;
    touch-action: none;
}

#c-key {
    top: 220px;
    left: 152px;
}

#c-sharp-key {
    top: 120px;
    left: 192px;
}

#d-key {
    top: 200px;
    left: 232px;
}

#d-sharp-key {
    top: 90px;
    left: 272px;
}

#e-key {
    top: 170px;
    left: 312px;
}

#f-key {
    top: 140px;
    left: 392px;
}

#f-sharp-key {
    top: 60px;
    left: 442px;
}

#g-key {
    top: 140px;
    left: 492px;
}

#g-sharp-key {
    top: 70px;
    left: 552px;
}

#a-key {
    top: 170px;
    left: 612px;
}

#a-sharp-key {
    top: 90px;
    left: 652px;
}

#b-key {
    top: 190px;
    left: 692px;
}

#high-c-key {
    top: 190px;
    left: 772px;
}

button.shift {
    display: flex;
    width: 94px;
    height: 50px;
    background-color: #D9D9D9;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 26px;
    position: absolute;
}

#shift-down {
    top: 327px;
    left: 58px;
}
#shift-up {
    top: 327px;
    left: 172px;
}