*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #143F6B;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.piano {
  display: flex;
}

.key {
  height: calc(var(--width) * 4);
  width: var(--width);
}

.white {
  --width: 100px;
  background-color: white;
  border: 1px solid #333;
}

.white.active {
  background-color: #CCC;
}

.black {
  --width: 60px;
  background-color: black;
  margin-left: calc(var(--width) / -2);
  margin-right: calc(var(--width) / -2);
  z-index: 2;
}

.black.active {
  background-color: #333;
}

.buttons,
.song-link {
  margin-bottom: 2rem;
  display: flex;
}

.btn {
  --hue: 100;
  --saturation: 100%;

  padding: .5rem 1rem;
  border: none;
  background-color: hsl(var(--hue), var(--saturation), 50%);
  font-size: 2rem;
  margin-left: 1rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn:first-child {
  margin-left: 0;
}

.record-button {
  --hue: 0;
  --saturation: 0%;
}

.record-button.active {
  --saturation: 100%;
}

.btn:hover,
.btn:focus {
  background-color: hsl(var(--hue), var(--saturation), 30%);
}

.play-button,
.save-button,
.song-link {
  display: none;
}

.play-button.show,
.save-button.show,
.song-link.show {
  display: block;
}