.piano-wrapper {
  height: 0px;
  position: relative;
  transform: scale(0.5);
  width: 300px;
  z-index: 0;
  margin-left:-16px;
}

.piano-top {
  width: 50px;
  height: 100px;
  top: 38px;
  left: 150px;
  position: absolute;
  transform: skew(45deg);
  background: linear-gradient(45deg, #2b2b2b, #5e9194);
}

.piano-side-1 {
  width: 50px;
  height: 200px;
  top: 38px;
  left: 100px;
  position: absolute;
  background: linear-gradient(#53888c, transparent 65%);
}

.piano-side-2 {
  width: 58px;
  height: 90px;
  top: 118px;
  left: 44px;
  position: absolute;
  background: linear-gradient(#69979b, transparent);
  border-radius: 8px 0;
}

.piano-side-3 {
  width: 50px;
  height: 160px;
  top: 138px;
  left: 200px;
  position: absolute;
  background: linear-gradient(#1b1b1b, black 40%);
}

.piano-side-4 {
  width: 52px;
  height: 90px;
  top: 226px;
  left: 150px;
  position: absolute;
  background: black;
  border-radius: 8px 0;
}

.white-key-wrapper {
  width: 50px;
  height: 100px;
  top: 126px;
  left: 100px;
  position: absolute;
  transform: skew(45deg);
  background: transparent;
}

.black-key-wrapper {
  width: 50px;
  height: 100px;
  top: 126px;
  left: 100px;
  position: absolute;
  transform: skew(45deg);
  background: transparent;
}

.white-key {
  position: absolute;
  width: 50px;
  height: 4px;
  background: whitesmoke;
  transform-origin: bottom right;
}

.white-key::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 4px;
  background: whitesmoke;
  transform: skew(0deg, 135deg);
  top: 3px;
  left: -6px;
}

.black-key {
  position: absolute;
  width: 38px;
  height: 2px;
  background: black;
  z-index: 2;
  top: 4px;
  left: 12px;
  border-radius: 25%;
  transform-origin: bottom right;
}

.white-key:nth-child(1) {
  top: 0px;
}

.white-key:nth-child(2) {
  top: 4px;
}

.white-key:nth-child(3) {
  top: 8px;
}

.white-key:nth-child(4) {
  top: 12px;
  animation: play 1500ms -200ms linear infinite;
}

.white-key:nth-child(5) {
  top: 16px;
}

.white-key:nth-child(6) {
  top: 20px;
}

.white-key:nth-child(7) {
  top: 24px;
  animation: playwaltz 1500ms 0ms linear infinite;
}

.white-key:nth-child(8) {
  top: 28px;
}

.white-key:nth-child(9) {
  top: 32px;
  animation: playwaltz 1500ms 0ms linear infinite;
}

.white-key:nth-child(10) {
  top: 36px;
}

.white-key:nth-child(11) {
  top: 40px;
}

.white-key:nth-child(12) {
  top: 44px;
}

.white-key:nth-child(13) {
  top: 48px;
}

.white-key:nth-child(14) {
  top: 52px;
  animation: play 1000ms 1300ms linear alternate infinite;
}

.white-key:nth-child(15) {
  top: 56px;
  animation: play 1000ms 1400ms linear alternate infinite;
}

.white-key:nth-child(16) {
  top: 60px;
  animation: play 1000ms 1500ms linear alternate infinite;
}

.white-key:nth-child(17) {
  top: 64px;
  animation: play 1000ms 1600ms linear alternate infinite;
}

.white-key:nth-child(18) {
  top: 68px;
  animation: play 1000ms 1700ms linear alternate infinite;
}

.white-key:nth-child(19) {
  top: 72px;
  animation: play 1000ms 1800ms linear alternate infinite;
}

.white-key:nth-child(20) {
  top: 76px;
  animation: play 1000ms 1900ms linear alternate infinite;
}

.white-key:nth-child(21) {
  top: 80px;
  animation: play 1000ms 2000ms linear alternate infinite;
}

.white-key:nth-child(22) {
  top: 84px;
}

.white-key:nth-child(23) {
  top: 88px;
}

.white-key:nth-child(24) {
  top: 92px;
}

.white-key:nth-child(25) {
  top: 96px;
}

.white-key:nth-child(26) {
  top: 100px;
}

.white-key:nth-child(27) {
  top: 104px;
}

.white-key:nth-child(28) {
  top: 108px;
}

.black-key:nth-child(1) {
  top: 4px;
}

.black-key:nth-child(2) {
  top: 8px;
}

.black-key:nth-child(3) {
  top: 12px;
  display: none;
}

.black-key:nth-child(4) {
  top: 16px;
}

.black-key:nth-child(5) {
  top: 20px;
}

.black-key:nth-child(6) {
  top: 24px;
}

.black-key:nth-child(7) {
  top: 28px;
  display: none;
}

.black-key:nth-child(8) {
  top: 32px;
}

.black-key:nth-child(9) {
  top: 36px;
}

.black-key:nth-child(10) {
  top: 40px;
  display: none;
}

.black-key:nth-child(11) {
  top: 44px;
}

.black-key:nth-child(12) {
  top: 48px;
}

.black-key:nth-child(13) {
  top: 52px;
}

.black-key:nth-child(14) {
  top: 56px;
  display: none;
}

.black-key:nth-child(15) {
  top: 60px;
}

.black-key:nth-child(16) {
  top: 64px;
}

.black-key:nth-child(17) {
  top: 68px;
  display: none;
}

.black-key:nth-child(18) {
  top: 72px;
}

.black-key:nth-child(19) {
  top: 76px;
}

.black-key:nth-child(20) {
  top: 80px;
}

.black-key:nth-child(21) {
  top: 84px;
  display: none;
}

.black-key:nth-child(22) {
  top: 88px;
}

.black-key:nth-child(23) {
  top: 92px;
}

@keyframes playwaltz {
  0% {
    transform: rotate(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  20% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-2deg);
  }
  46% {
    transform: rotate(0deg);
  }
  53% {
    transform: rotate(0deg);
  }
  66% {
    transform: rotate(-2deg);
  }
  79% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

@keyframes play {
  0% {
    transform: rotate(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  12% {
    transform: rotate(-2deg);
  }
  24% {
    transform: rotate(0deg);
  }
  100% {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotate(0deg);
  }
}