a {
  color: #aaf;
}

a:visited {
  color: #faf;
}

a.active {
  color: #faa;
}

body {
  margin: 1em;
  max-width: 90em;
}

.fr {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.fc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.fr>*,
.fc>* {
  flex: 1;
}
#scale {
  flex:0;
  margin-bottom: 1em;
}

body {
  background-color: #ddd;
  --main-color: #000;
  --rub-color: #b00;
  --staff-color: #000;
}


@media only print {
  #scale {
    display: none;
  }

  /* this doesn't work */
  .chantLine {
    page-break-inside: avoid;
  }
}

@media only screen {
  body.night {
    background-color: #000;
    color: var(--main-color);
    --main-color: #ffc;
    --rub-color: #f66;
    --staff-color: var(--rub-color);
  }
}

body.night #chant-preview .lyric,
body.night #chant-preview .dropCap {
  fill: var(--main-color);
}

#chant-preview .glyph,
#chant-preview .neumeLine,
#chant-preview .chantLine,
#chant-preview .dividerLine,
#chant-preview .horizontalEpisema {
  fill: var(--main-color);
}

#chant-preview .directive,
#chant-preview .spChar {
  fill: var(--rub-color);
}

#chant-preview .ledgerLine,
#chant-preview .staffLine {
  stroke: var(--staff-color);
}

input[type=checkbox] {
  margin-top: 2px;
  margin-bottom: 2px;
}