html {
  font-size: 10px;
  background: url(data:image/jpeg;base64,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) bottom center;
  background-size: cover;
}
body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #ffc600;
}