:root {
    --button-width: 3.8em;
}

@media only screen and (max-width: 1000px) {
    :root {
	--button-width: 3.8em
    }
}


table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    text-align: center
}

.pitch-letter-button {
    border: none;
  height: 10em;
  width: var(--button-width)
  box-shadow: 9px 10px 9px -2px rgba(194,192,194,1);
}

.chord-button {
  height: 5em;
  width: 10em;
  box-shadow: 9px 10px 9px -2px rgba(194,192,194,1);
}

.flat {
  background-color: white;
  color: black;
}

.sharp {
  background-color: black;
  color: white;
}

.chordTable {
   margin-left: auto;
   margin-right: auto;
   width: 10%;
}


table .tabchord {
    border: none;
    text-align: center;
}
td .tabchord {
    border: none;
    text-align: center
}
th .tabchord {
    border: none;
    text-align: center
}

.tabchord .chord-button, .tabchord .pitch-letter-button {
    width: var(--button-width);
}

.pitch-button, .chord-button {
    width: var(--button-width);
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}