#table-of-contents{
  float: left;
  width: var(--margin);
  /* margin-left: calc(-1 * ( (95vw - var(--content)) / 2 )); */
  margin-left: calc(-1 * ((100vi - var(--content)) / 2));
  padding-left: var(--gutter);
  box-sizing: border-box;

  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;

  font-size: .95rem;
  border-right: 1px solid var(--border, #d7d7d7);
  padding-top: .25rem;
}

#table-of-contents > h2{
  margin: 0 0 .5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--muted, #666);
}

#text-table-of-contents ul{
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#text-table-of-contents li{
  margin: .25rem 0;
}
#text-table-of-contents a{
  text-decoration: none;
}
#text-table-of-contents a:hover{
  text-decoration: underline;
}

#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }

h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }

#text-table-of-contents a.is-active{
    /* font-weight: 700; */
    text-decoration: underline;
    background-color: var(--active-toc);
    /* border: 1px solid var(--border, #ccc); */
 
}