#piano {
  width: 1200px;
  margin-top: 150px;
}
img {
  position: absolute;
  margin-top: -560px;
  margin-left: 10px;
}
body {
  text-align: center;
}
ol {
  position: relative;

  display: inline-block;
  margin-top: -250px;
}
#leftHand {
  margin-right: -20px;
}

#rightHand {
  margin-left: -20px;
}
#audio {
  z-index: -1;

  background-color: transparent;
}
li {
  position: relative;

  background-color: #fffff0;

  z-index: 1;

  padding: 220px 30px 100px;

  display: inline-block;

  border: 1px solid #ccc;

  font-size: 20px;

  margin-right: -1px;

  margin-left: -2px;

  border-radius: 0px 0px 7px 7px;

  color: transparent;

  box-shadow: -3px 7px 4px #2a2a2a;
}

li:active {
  box-shadow: -1px 2px 3px #2a2a2a;
}
.black-key {
  position: absolute;

  z-index: 2;

  background-color: #1d1d1d;

  padding: 230px 12px 12px;

  top: 0px;

  margin-left: -31px;

  box-shadow: none;

  border-width: 0px 6px 12px;

  border-color: #000;

  border-bottom-color: #2a2a2a;
}
.black-key:hover {
  color: FFF000;
}

.black-key:active {
  border-bottom-width: 8px;

  box-shadow: none;
}
.white-key {
  margin: 0;
}
#C {
  border-top-left-radius: 7px;
}

#B1 {
  border-top-right-radius: 7px;
}