html { 
  /* basic color scheme */
  background-color: var(--bcolor);
  color: var(--fcolor);
}

body { 
  /* basic color scheme, repeat */
  background-color: var(--bcolor);
  color: var(--fcolor);
  /* avoid different text scaling on mobile*/
  text-size-adjust: 100%;
  font-size: 16px;
}

/*#### TOP NAVIGATION BAR ####*/
.topbar {
  width: 100%;
  text-align: center;
  font-weight: bold;
}
.topbar td a {
  display: block;
}
.topbar td:nth-child(1) {
  text-align: left;
}
.topbar td:nth-child(2) {
  white-space: nowrap;
  width: 1%;
}
.topbar td:nth-child(3) {
  text-align: right;
}

h1 {
  margin: 20px 10px;
  font-size: 120%;
}

p {
  display: table;
}

/* draw a frame around chords */
.chords{
  font-family: Andale Mono,AndaleMono,monospace; 
  border: 2px solid var(--fcolor);
  border-spacing: .4em .3em;
}

.super {
  position: relative;
  bottom: 0.3em;
  font-size: 0.7em;
}

/* kursiv */
.spoken {
  font-style: italic;
}

/* indent these tables (Refrain ect.)*/
.tab { margin-left: 40px; }

/* add newline after element */
.space { margin-top: 1em; }

/* make embedded table in text invisible */
td,
table {
  border-spacing: 0em 0em;
  padding: 0em;
  break-inside: avoid;
  white-space: nowrap;
}

/* avoid ugly links (what are they thinking?) */
a:visited,
a:link {
  color: inherit;
  text-decoration: none;
}


/*#### allow for a hidden riff ####*/
.riff {
  font-family: Andale Mono,AndaleMono,monospace; 
  white-space: pre;
  line-height: .5;
}
.hidden {
  visibility: collapse;
  line-height: 0;
}
.show:focus + .hidden {
  visibility: visible;
  line-height: .5;
}


/* hide topbar when printing */
@media print {
  .topbar {
    display: none !important;
  }
}