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;
}