.grid-container-chordkey {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  background-color: none;
  padding: none;
  margin-bottom:10px;
}
.grid-item-wholetone {
  background-color: #fefefe;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;  font-size:1.0em;  text-align: center;
  color:#444;
}
.grid-item-key-1-7 {
  background-color: #555;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;  font-size:1.0em;  text-align: center;
    color:#fff;

}

.grid-item-145 {
  background-color: #ddd;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;  font-size:1.0em;  text-align: center;
}

.grid-item-halftone {
  background-color: #CFE2F3;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;  font-size:1.0em;  text-align: center;
}

.grid-item-key-ag {
  background-color: #FFFF99;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;  font-size:1.0em;  text-align: center;
}

.grid-item-key {
  background-color: green;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 4px;  font-size:1.0em;  text-align: center;
  color:#fff;
}

@media screen and (min-width: 601px) {
  .grid-item-key,.grid-item-key-ag,.grid-item-halftone,.grid-item-145,.grid-item-key-1-7,.grid-item-wholetone {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 600px) {
  .grid-item-key,.grid-item-key-ag,.grid-item-halftone,.grid-item-145,.grid-item-key-1-7,.grid-item-wholetone {
    font-size: 0.85em;
  }
}

.justify {
  text-align: justify;
  text-justify: inter-word;
  padding-top:5px;
}