section.TOC {
    display: flex;
    flex-flow: space-between;
    height: 100vh;
    font-family: "Rubik";
    margin: 0;
    color: #333344;
    line-height: 1.53em;
    font-size: 1.2rem;
    background-color: #efeeff;
}

section.TOC h1.toc_rule,
section.TOC h2.toc_rule,
section.TOC h3.toc_rule,
section.TOC h4.toc_rule,
section.TOC h5.toc_rule,
section.TOC h6.toc_rule {
    font-family: "Rubik Mono One";
    font-weight: 300;
    margin-top: 3rem;
    color: #484866;
}

section.TOC h1.toc_rule.active,
section.TOC h2.toc_rule.active,
section.TOC h3.toc_rule.active,
section.TOC h4.toc_rule.active,
section.TOC h5.toc_rule.active,
section.TOC h6.toc_rule.active {
    color: #ff8888;
    text-decoration: none;
}

section.TOC  main {
    flex: 3 3 100%;
    overflow: auto;
    padding: 2rem 3rem;
}

section.TOC  nav {
    flex: 1 1 300px;
    background-color: #333344;
    min-width: 240px;
    padding: 1rem;
    overflow-y: auto;
}

section.TOC h1.toc_rule,
section.TOC h2.toc_rule,
section.TOC pre.toc-text {
    max-width: 700px;
}

section.TOC a {
    color: #eeeeff;
    text-decoration: none;
  }
  
section.TOC .active {
    color: #ff8888;
    font-weight: bold;
  }
  
section.TOC ul {
    list-style: none;
    padding-left: 1.25rem;
  }
  
section.TOC ul li::before {
    content: "\2022";
    color: #eeeeff;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
section.TOC pre.toc-text {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}