/* font */
@font-face {
  font-family: FreeSerif;
  src: url(freeserif.woff);
}
@font-face {
  font-family: FreeSerif;
  font-style: italic;
  src: url(freeserifItalic.woff);
}
@font-face {
  font-family: FreeSerif;
  font-style: italic;
  font-weight: bold;
  src: url(freeserifBoldItalic.woff);
}
@font-face {
  font-family: FreeSerif;
  font-weight: bold;
  src: url(freeserifBold.woff);
}

@font-face {
  font-family: FancyVR;
  src: url(FancyVR.woff);
}

body {
  font-family: FreeSerif, serif;
  min-height: 120vh;
}

/* structure */
html,
body {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

@media screen and (max-width: 1200px) {
  #outpane {
    display: none;
  }
}

#input,
#output {
  white-space: pre-wrap;
  font-family: 'Courier New', Courier, monospace;
  padding: 4px;
}

#spchars, #controls, .f0.f0 {
  flex: 0 0 auto;
  white-space: pre-line;
}

.fc,
.fr {
  display: flex;
}

.fc > *,
.fr > * {
  flex: 1 1 50%;
  border: 1px solid black;
  overflow-y: auto;
}

.fc {
  flex-direction: column;
}

/* firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #555 black;
}

/* texdown style dark theme */
body.night::-webkit-scrollbar {
  background-color: black;
}
body.night::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 5px 0 0 5px;
}

.night {
  --main-color: #ffc;
  --rub-color: #f66;
  --staff-color: var(--rub-color);

  background-color: black;
  color: var(--main-color);
}
.night .nr { color: var(--main-color); }

.night pd::first-letter,
.night .d::first-letter {
  background-color: #444;
}

.night a { color: #77f; }
.night a:visited { color: #f7f; }

/* texdown style */
body {
  --main-color: #000;
  --rub-color: #b00;
  --staff-color: #000;
}
p {
  text-indent: 1em;
  text-align: justify;
}
.m0,
.d {
  margin: 0;
  padding: 0;
  text-indent: 0;
}
p.ind {
  text-indent: 1em;
}

span.VR {
  font-family: FancyVR, serif;
  color: red;
  font-style: normal;
}

.red,
.r { color: var(--rub-color); }
.nr { color: var(--main-color); }

pd { display: block; }

pd::first-letter,
.d::first-letter {
  background-color: #ddd;
  width: 1em;
  border: 3px double;
  line-height: 1;
  padding: 0.05em 0.1em;
  margin-right: 2px;

  font-size: 1.9em;
  float: left;
  color: var(--rub-color);
}
/* @supports(-moz-animation: none){ */
@-moz-document url-prefix() {
  .d::first-letter { padding: 0.18em 0.1em; }
}
pi,
.i {
  display: block;
  text-indent: 1em;
}

notextile {
  display: block;
}

code,
bc {
  background-color: lightgray;
  font-family: 'Courier New', Courier, monospace;
}

bc {
  display: block;
  margin: 0.3em;
  padding: 0.3em;
  white-space: pre-wrap;
}

.sup {
  vertical-align: super;
  font-size: 60%;
}

/* chant style */
body.night .lyric,
body.night .dropCap {
  fill: var(--main-color);
}

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

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

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