* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}

.bongo {
  background-image: url(../images/bongo-cat-hands-up.png);
  background-repeat: no-repeat;
  background-position: 100% -30%;
  background-color: #FBFBFB;

  height: 100vh;
}

body .keys {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  align-content: center;

  height: inherit;
}

kbd {
  font-family: "Fredoka One", cursive;
  font-size: 32px;

  color: #E7F2F0;
}

p.sound {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;

  color: #D3E9E4;
}

.key {
  display: flex;
  flex-direction: column;

  text-align: center;
  justify-content: center;

  transition: all 0.07s;

  margin: 0.5vh;

  min-width: 120px;
  min-height: 100px;

  background-color: #0C384EBB;
  border: 5px solid #0C384EEE;
  border-radius: 25px;
}

.playing {
  transform: scale(1.3);
  box-shadow: 0 0 10px 2px #FADF63;
  border-color: #E6AF2E;
}

.bongo-hands-down {
  background-image: url(../images/bongo-cat-hands-down.png);
}

.bongo-one-hand-down {
  background-image: url(../images/bongo-cat-one-hand-down.png);
}