:root {
  /*--background-body: ;*/
  /*--background: ;*/
  /*--background-alt: ;*/
  /*--selection: ;*/
  /*--text-main: ;*/
  /*--text-bright: ;*/
  /*--text-muted: ;*/
  /*--links: #e52f3b;*/
  /*--focus: #e52f3b0b;*/
  /*--border: ;*/
  /*--code: ;*/
  /*--animation-duration: ;*/
  /*--button-hover: ;*/
  /*--scrollbar-thumb: ;*/
  /*--scrollbar-thumb-hover: ;*/
  /*--form-placeholder: ;*/
  /*--form-text: ;*/
  /*--variable: ;*/
  /*--highlight: ;*/
  /*--select-arrow: ;*/
}

/* stick footer */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
  text-align: center;
  padding: 1rem;
}
.next {
  float:  right;
}

.mantra ruby {
  ruby-position: under;
  /*font-size: 1.728rem;*/
  font-size: xx-large;
}

.video {
  width: 100%;
  position: absolute;
  top: 0;
  height: 100%;
  /*height: 200%; top: -50%; position: absolute;*/
}
.video-container {
  width: 100%; position: relative; overflow: hidden;
  padding-top: min(56.25%, 61.8vh);
}



.toc {
  position: fixed; top: 0; right: 1rem; bottom: 0;
  display: flex; flex-direction: column;
  max-width: 17.28rem;
  font-size: small;
}
.toc a {/*
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;*/
  margin-top: 0rem;
  white-space: nowrap;
  right: 0;
  position: absolute;
  /*text-shadow: 0 0 4px white;*/
}
.toc a.in-view {
  font-weight: bolder;
}

details summary {
  margin-left: -2ex;
}
details summary h2 {
  display: inline;
  margin: 0;
}
details[open] summary {
  margin-bottom: 1rem;
}

blockquote p {
  margin: 0;
}
blockquote{
  padding-top: 0;
  padding-bottom: 0;
  line-height: 2;
  font-size: larger;
}
blockquote p {
  white-space: pre;
}
blockquote .subtitle {
  display: block;
}
.subtitle + blockquote {
  margin-top: .5rem;
}
blockquote ruby {
  ruby-position: under;
  white-space: pre;
}


/* bols */
.mantra .bol {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}
.mantra .bol:after {
  content: attr(data-sym);
  font-size: x-small;
  margin-top: -.75em;
  font-style: normal;
}


.anchorable {
  position: relative;
}
.anchorable .anchor {
  /*opacity: 0;*/
  position: absolute;
  left: -1em;
  padding: 1em;
  margin:  -1em;
}
.anchorable:hover .anchor {
  /*opacity: 1;*/
}


.trackable-bpm {
  position: relative;
}
.trackable-bpm input.bpm {
  opacity: .25;
  position: absolute;
  display: inline;
  background: none;
  padding:  0;
  margin:  0;
  right: -4.5rem;
  width: 3rem;
  text-decoration: dotted underline;
}
.trackable-bpm input.bpm:hover {
  opacity: 1;
}