body {
  background: #62b1d4;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(10px 2px 2px rgba(0, 0, 0, 0.2));
}

/*** PADS ***/

.pad:hover {
  fill: #949397;
}

.pad {
  transition: all 0.05s;
  stroke: #181615;
  stroke-width: 4px;
}

/* make labels NOT clickable */
#keys {
  pointer-events: none;
}

.playing {
  fill: #cbcace;
  stroke: white;
  stroke-width: 5px;
  filter: url(#glow);
  transform: scale(1);
  transform-origin: 50% 50%;
}