style.css

body { margin: 0 0 0 0;
       padding-left: 5%;
       font-family: sans-serif;
       background: #fffcec;
       color: #222; }

div#text { padding-right: 5%; }

@media (min-width: 800px) {

    div#everything { overflow: hidden;
                     display: flex;
                     max-height: 100vh;
                     width: 100%; }

    div#text-container { overflow-y: scroll;
                         flex-grow: 1;
                         display: flex; }

    div#text { margin-left: auto;
               margin-right: auto;
               max-width: 90%; /* 100% - padding */ }

    nav#TOC { overflow-y: scroll;
              order: 2; }

    nav#TOC ul { padding-left: 2em;
                 padding-right: 1em; }

}

p { max-width: 60em; }

h1 { font-weight: 400;
     margin-top: 2.1rem;
     margin-bottom: 1.4rem;
     font-size: 2.2rem;
     line-height: 1; }

h2 { font-weight: 400;
     font-size: 1.7rem;
     margin-top: 2rem;
     margin-bottom: 1.4rem;
     line-height: 1; }

h3 { font-weight: 400;
     font-size: 1.3rem;
     margin-top: 2rem;
     margin-bottom: 1.4rem;
     line-height: 1; }

ul,ol { padding-left: 3em; }

ol.quiz { border-left: 2px dotted grey;
          margin-left: min(5vw, 6rem);
          padding-top: 0.5em;
          padding-bottom: 0.5em;
          list-style-type: lower-alpha; }
ol.quiz li:hover { background: lightgrey; }
ol.quiz li:active { background: red; }
ol.quiz li.correct:active { background: green; }

pre.sourceCode, pre, table
{ max-width: 80%;
  border-left: 2px solid grey;
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-left: min(5vw, 6rem); }

table { border-spacing: 1.0em 0em }