body h1 {
  text-align: center;
}
body .pentagrama .linha {
  position: relative;
  border-bottom: solid 1px black;
  display: block;
  height: 60px;
  text-align: right;
  padding-right: 25px;
}
body .pentagrama .linha span {
  position: absolute;
  bottom: 0;
  padding-left: 5px;
}
body .clave {
  position: absolute;
  font-size: 480px;
  top: -24px;
  left: 20px;
  line-height: 480px;
  color: #767676;
}
body .nota {
  background-color: black;
  width: 60px;
  height: 60px;
  display: inline-block;
  position: absolute;
  top: -999999px;
  left: 70%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
}
@media only screen and (min-width: 500px) {
  body .nota {
    left: 50%;
  }
}
body .nota.do3 {
  top: 385px;
}
body .nota.re3 {
  top: 355px;
}
body .nota.mi3 {
  top: 325px;
}
body .nota.fa3 {
  top: 295px;
}
body .nota.sol3 {
  top: 265px;
}
body .nota.la3 {
  top: 235px;
}
body .nota.si3 {
  top: 205px;
}
body .nota.do4 {
  top: 175px;
}
body .nota.re4 {
  top: 145px;
}
body .nota.mi4 {
  top: 115px;
}
body .nota.fa4 {
  top: 85px;
}
body .nota.sol4 {
  top: 55px;
}
body .nota.la4 {
  top: 25px;
}
body .nota.si4 {
  top: -5px;
}
body #resultado {
  position: absolute;
  bottom: 90px;
  width: 100%;
}
body #resultado .alert {
  width: 100%;
  font-size: 60px;
  text-align: center;
}
body #botoes {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 10px;
}
body #botoes .btn {
  width: 100%;
  margin: 0px;
  padding: 0px 0px;
  font-size: 30px;
  font-weight: bold;
  line-height: 80px;
}