:root {
  --blue: #024041;
  --red: #700902;
  --dark: #000202;
  --light: #aaa;
}
#NAV nav{
    border-bottom:2px solid var(--red);
    background:#fff;
}
.brand {
    color:var(--red) !important;
}

a{
    color:var(--blue);
}
data-grid data-notes data-note.consonant{
    opacity:0.5;
}
data-grid data-notes data-note.dissonant{
    color:var(--blue);
}
data-key{
  
  background: var(--red);
  color: #fff;
  border-radius:4px;
  padding: 0 0.2em;
  font-weight:bold;

}
.inverted{
    background:var(--dark);
    color:white;    
}
.inverted *{
    color:white;
    border-color:white !important;    
}
.colored{
    background:var(--red);
    color:white;    
}
.inverted *, .colored *{
    color:white;
}
/* Image styles */
img {
  border: 2px solid var(--dark);
}