#keyboard {
  display: none;
  width: 100%;
  height: 120px;
  margin-left: 10px;
  touch-action: none;
  user-select: none;
}

.white-key.wasPressed {
  fill: #ddd !important;
}

.black-key.wasPressed {
  fill: #444 !important;
}

rect.black-key.red-key {
  fill: #CF272C !important;
}

rect.black-key.blue-key {
  /*fill: #80A8B6 !important;*/
  fill: #4070c0 !important;
}                    
rect.white-key.red-key {
  fill: #FF474C !important;
}

rect.white-key.blue-key {
  fill: #80A0E6 !important;
}                    

  
.key-label {
  font-size: 10px;
  text-anchor: start;
  fill: black;
   pointer-events: none;
  user-select: none;
}

.white-key {
  fill: white;
  stroke: #333;
  stroke-width: 1;
  cursor: pointer;
}

.black-key {
  fill: black;
  stroke: #222;
  stroke-width: 1;
  cursor: pointer;
}

.white-key.pressed,
.black-key.pressed {
  fill: #aaa;
}

.white-key.expected-key {
  fill: #fff3a0;
}

.black-key.expected-key {
  fill: #c8a800;
}

.white-key.correct-key,
.black-key.correct-key {
  fill: #70d070;
}

.white-key.wrong-key,
.black-key.wrong-key {
  fill: #e06060;
}