/* Colors */

#toc a { color: light-dark(var(--darkest), var(--light)); }

#toc {
  border-radius: 40px;
  background: light-dark(#fffc, #000c);
  border:              solid 2px light-dark(var(--light), var(--dark));
  box-shadow: inset 0 0 25px 1px light-dark(var(--light), var(--dark));
  backdrop-filter: blur(2px);
  max-height: 25px;
  transition-property: max-height;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0.1s;
}

/* Position */
#toc {
  margin-top: 10px;
  margin-bottom: 5px;
  position: sticky;
  top: 0;
  float: right;
  clear: both;
}
/* Text */
#toc {
  padding: 5px;
  height: 25px;
  font-size: 0.8em;
  overflow: hidden;
}
#toc span { 
  margin-top: 0;
  width:100%;
  display:inline-block;
  text-align: center;
  font-size: 0.9em;
}
#toc a       {text-decoration: none;}
#toc a:hover {text-decoration: underline;}
/* Height */
#toc:hover {height: auto; max-height: 1000px;}
/* Width */
@media (max-width:  700px) { #toc { width: 100%; } }
@media (min-width:  700px) { #toc { width : 75%; } }
@media (min-width: 1000px) { #toc { width : 50%; } }


#toc-list ol {padding-left: 15px;}

#toc-list > li { counter-increment: section; list-style-type: upper-roman; }

#toc-list li ol { }
#toc-list li ol > li { counter-increment: subsection; list-style-type: upper-alpha; }

#toc-list li ol li ol { }
#toc-list li ol li ol > li { counter-increment: subsubsection; list-style-type: decimal; }

#toc-list li ol li ol li ol { }
#toc-list li ol li ol li ol > li { counter-increment: subsubsubsection; list-style-type: lower-alpha; }