#buttons {
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  #buttons {
    grid-template-columns: auto 1fr auto;
  }
  #buttons-left, #staff, #buttons-right {
    grid-row: 2 / 3;
  }
}

#button-key {
  text-align: center;
}
#button-key .button {
  background: white;
  font-size: 90%;
  text-align: center;
  display: none;
}
#buttons[data-bisonoric] #button-key .button {
  display: inline-flex;
}

#staff {
  /* height: 300px; */
}
#staff svg {
  max-width: 100%;
}

#buttons-left, #buttons-right {
  display: flex;
  flex-direction: column;
  gap: .5em;
}
#buttons[data-configuration^="anglo"] #buttons-left {
  padding-left: 3rem;
}
#buttons[data-configuration^="anglo"] #buttons-right {
  padding-right: 3rem;
}
#buttons[data-configuration^="duet"] #buttons-left {
  padding-left: 6rem;
}
#buttons[data-configuration^="duet"] #buttons-right {
  padding-right: 6rem;
}

.row {
  display: grid;
  gap: .5em;
}
.row[data-count="4"] {
  grid-template-columns: repeat(4, 3rem);
} 
.row[data-count="5"] {
  grid-template-columns: repeat(5, 3rem);
}
.row[data-count="6"] {
  grid-template-columns: repeat(6, 3rem);
}
.row[data-count="7"] {
  grid-template-columns: repeat(7, 3rem);
}
.row[data-count="8"] {
  grid-template-columns: repeat(8, 3rem);
}
.row[data-count="9"] {
  grid-template-columns: repeat(9, 3rem);
}
#buttons[data-configuration^="anglo"] #buttons-left .row:nth-child(2) {
  margin-left: -1.5rem;
}
#buttons[data-configuration^="anglo"] #buttons-left .row:nth-child(3) {
  margin-left: -3rem;
}
#buttons[data-configuration^="anglo"] #buttons-left .row:nth-child(4) {
  margin-left: -4.5rem;
}
#buttons[data-configuration^="anglo"] #buttons-right .row:nth-child(2) {
  margin-left: 1.5rem;
}
#buttons[data-configuration^="anglo"] #buttons-right .row:nth-child(3) {
  margin-left: 3rem;
}
#buttons[data-configuration^="anglo"] #buttons-right .row:nth-child(4) {
  margin-left: 4.5rem;
}
#buttons[data-configuration^="duet"] .row:nth-child(1) {
  margin-left: -6rem;
}
#buttons[data-configuration^="duet"] .row:nth-child(2) {
  margin-left: -4rem;
}
#buttons[data-configuration^="duet"] .row:nth-child(3) {
  margin-left: -2rem;
}
#buttons[data-configuration^="duet"] .row,
#buttons[data-configuration^="english"] .row {
  margin-top: -.6rem;
  margin-bottom: -.6rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row:nth-child(2) {
  margin-top: -0.5rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row:nth-child(4) {
  margin-top: -1.5rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row:nth-child(1),
#buttons[data-configuration^="bandoneon"] #buttons-left .row:nth-child(3),
#buttons[data-configuration^="bandoneon"] #buttons-left .row:nth-child(5) {
  margin-top: -1.5rem;
  margin-left: 1.5rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(1),
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(5) {
  margin-top: -1.5rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(2),
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(3) {
  margin-top: -0.7rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(4) {
  margin-top: -1rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(6) {
  margin-top: -1.7rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(2),
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(4),
#buttons[data-configuration^="bandoneon"] #buttons-right .row:nth-child(6) {
  margin-left: 1.5rem;
}

.button {
  display: flex;
  flex-direction: column;
}
.button:not(:empty) {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.button [data-note] {
  flex: 1 1;
  border: 2px solid #555;
  border-radius: 100%;
  user-select: none;
}
button[data-abc].highlight {
  background-color: rgb(160, 30, 30);
  color: white;
}
.button [data-direction="push"] {
  border-bottom-width: 1px;
  border-radius: calc(3rem + 1px) calc(3rem + 1px) 0 0;
}
.button [data-direction="pull"] {
  border-top-width: 1px;
  border-radius: 0 0 calc(3rem + 1px) calc(3rem + 1px);
}
.button [data-octave="2"] {
  background-color: #000000;
  color: white;
}
.button [data-octave="3"] {
  background-color: #505B6E;
  color: white;
}
.button [data-octave="4"] {
  background-color: #9FB5DB;
}
.button [data-octave="5"] {
  background-color: #E2E9F4;
}
.button [data-octave="6"] {
  background-color: #FFF;
}
.button [data-tone="C"] {
  border-color: red;
}

#buttons[data-configuration^="anglo"] .button:nth-child(3) {
  margin-top: -.6rem;
}
#buttons[data-configuration^="anglo"] .button:nth-child(2),
#buttons[data-configuration^="anglo"] .button:nth-child(4) {
  margin-top: -.3rem;
}
#buttons[data-configuration^="anglo"] .button:nth-child(6) {
  margin-top: .3rem;
}
#buttons[data-configuration^="anglo"] .button:nth-child(7) {
  margin-top: .6rem;
}
#buttons[data-configuration^="duet"] #buttons-left .button:nth-child(2),
#buttons[data-configuration^="duet"] #buttons-right .button:nth-child(4) {
  margin-top: .5rem;
}
#buttons[data-configuration^="duet"] #buttons-left .button:nth-child(3),
#buttons[data-configuration^="duet"] #buttons-right .button:nth-child(3) {
  margin-top: 1rem;
}
#buttons[data-configuration^="duet"] #buttons-left .button:nth-child(4),
#buttons[data-configuration^="duet"] #buttons-right .button:nth-child(2) {
  margin-top: 1.5rem;
}
#buttons[data-configuration^="duet"] #buttons-left .button:nth-child(5),
#buttons[data-configuration^="duet"] #buttons-right .button:nth-child(1) {
  margin-top: 2rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(5),
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(7) {
  margin-top: 0.2rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(4),
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(8) {
  margin-top: 0.4rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(3) {
  margin-top: 0.8rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(2) {
  margin-top: 1.6rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-left .row .button:nth-child(1) {
  margin-top: 2.8rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(4),
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(6) {
  margin-top: 0.2rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(3),
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(7) {
  margin-top: 0.4rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(2),
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(8) {
  margin-top: 0.8rem;
}
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(1),
#buttons[data-configuration^="bandoneon"] #buttons-right .row .button:nth-child(9) {
  margin-top: 1.6rem;
}