font-family: 'Vollkorn';
  src:
    url('/assets/Vollkorn-Regular.woff2') format('woff2'),
    url('/assets/Vollkorn-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src:
    url('/assets/Vollkorn-Bold.woff2') format('woff2'),
    url('/assets/Vollkorn-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


body {
  text-align:center;
  color:#000;
  font-family: 'Vollkorn', serif;
  font-size: 120%;
  line-height:1.6;
  margin:0;
  padding:2em 2em 5em;
  background:rgb(225, 225, 225);
  margin:auto;
  max-width:40em;
  color:rgb(10, 10, 10);
}

a {outline:none !important; font-weight:bold; text-decoration:none;}
a:link {color:#c00;}
a:visited {color:#606;}
a:hover {color:#606;}
a:active {color:#900; outline:none;}

h1 {
  font-size:250%;
  line-height:1.35;
  font-style:normal;
  margin:1.5em 0 0.8em;
}

h2 {
  font-weight:bold;
  font-size:200%;
  margin:1em 0 0.8em;
}

h3 {
  font-weight:normal;
  text-transform:uppercase;
  font-size:140%;
  letter-spacing:0.15em;
  margin:1.75em 0 0.8em;
}

h4 {
  font-weight:normal;
  font-size:140%;
  letter-spacing:0.1em;
  margin:1.5em 0 0.8em;
}

h5 {
  font-weight:normal;
  font-style:italic;
  font-size:140%;
  margin:1.5em 0 0.8em;
}

h6 {
  font-weight:bold;
  font-size:100%;
  letter-spacing:0.1em;
  margin:1.5em 0 0.8em;
}

p {
  text-align:left;
  font-size:100%;
  margin:1em 0 1em 0;
}

p.lead {
  font-size:140%;
  margin:1em 0;
}

p + p {
  margin:0 1em 1em 0;
  text-indent:1.5em;
}

p + ul, p + ol, p + dl {margin-bottom:1.5em;}
p.lead + p {
  text-indent:0;
}

blockquote {border-left:5px solid #eee; padding-left:1.5em; margin:1em 0;}
blockquote small {display:block; line-height:1.7em;}
ul, ol, dl {
  text-align:left;
}

dt {font-weight:bold;}
code {font-family:courier, monospace;}
p > code {padding:0.25em; background:#eee;}
pre {text-align:left; font-size:100%;}
hr {height:0; color:#eee; border:1px solid #eee; margin:2em 0 1em;}

.normal {font-weight:normal;}
.quiet {color:#999;}
.pull-left {float:left; margin:0.5em 2em 1em 0;}
.pull-right {float:right; margin:0.5em 0 1em 2em;}

@media (max-width:500px) {
  body {font-size:80%;}
  img {max-width:100% !important; height:auto !important; float:none !important;}
}

.abc-inline { display:inline-block; vertical-align:-0.6em; line-height:1; }
.abc-inline svg { display:block;}

.abc-player {
  display: grid;
  gap: 0.75rem;
}
.abc-player-controls {
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.abc-player-controls .abcjs-inline-audio {
  width: 100%;
}

.abcjs-highlight {

    filter: saturate(2) brightness(1.15);
    stroke: currentColor;
    stroke-width: 1px;
    paint-order: stroke fill;
 }