body {
  background-color: #ffeedb;
  color: white;
  /* font-family: 'Pacifico', cursive; */
  font-family: 'Orbitron', sans-serif;
  font-size: 3.5vh;
}

#pianogram {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 80%;
  width: 80%;
  border: #D03C3C;
  border-radius: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#top {
  background-color: black;
  height: 40%;
}

#pianogram > div {
  width: 100%;
}

#octave, #volume-container {
  margin-top: 10px;
}

#octave {
  display: flex;
  align-items: center;
}

.octave-btn {
  border: 2px solid white;
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  color: white;
  text-decoration: none;
  margin: 5px;
}


.octave-btn:hover {
  background-color: white;
  color: black;
}

.octave-btn:before {
  content: "▶";
}

#down:before {
  content: "◀";
}

#top-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#instruments {
  height: 5vh;
  width: 80%;
  border: transparent;
  font-family: 'Orbitron', sans-serif;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
}


#piano, #parameters {
  display: flex;
  justify-content: space-evenly;
}

#parameters {
  margin: 10px;
}

#parameters > div {
  width: 20%;
}

#volume {
  cursor: pointer;
}

#piano {
  height: 60%;
}

.key {
  height: 100%;
  width: 9.6%;
  background-color: white;
  border: solid black;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sharp {
  width: 6.4%;
  background-color: black;
  color: white;
}

.played {
  background-color: grey;
}

.key > div {
  color: black;
  text-align: center;
  font-size: 14pt;
}

.key p {
  margin: auto;
}

.sharp > div {
  color: white;
}