@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;1,400;1,500&display=swap');

  html {
      line-height: 1.4;
      font-family: 'Spectral', Charter, Georgia, serif;
      font-size: 16 px;
      color: #1a1a1a;
      background-color: #fdfdfd;
    }

    body {
      hyphens: auto;
      text-align: justify;
      word-wrap: break-word;
      text-rendering: optimizeLegibility;
      font-kerning: normal;
      hanging-punctuation: first allow-end last;
      counter-reset: problems-counter;
    }

    main {
      margin: 0 auto;
      max-width: 40em;
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .footnotes {
      margin-top: 10em;
      font-size: 85%;
  }

        .footnotes li::marker {
    font-weight: bold;
  }


    @media (max-width: 600px) {
      body {
        font-size: 0.9em;
        padding: 1em;
      }
      main{
        padding: 0;
      }
    }

    p {
      margin: 1em 0;
    }



.tocLinks{
  position: absolute;
  left: 55px;
}

  .toc-title {
    font-weight: bold;
  }
  .tocLinks, .tocLinks a, .tocLinks a:visited {
      color: gray;
    }
    .tocLinks a:hover {
      color: black;
    }

    .tocLinks li {
       overflow-wrap: break-word; 
       font-size: .75rem;
      line-height: 1rem; 
      margin-top: 0;
      margin-bottom: 0;
    }
    .text-active {
      color: #1a1a1a !important;
    }

#TOC ul {
  padding-left: 0;
  margin: 0;
}
      #TOC li {
    list-style: none;
  }

  #TOC a:not(:hover) {
    text-decoration: none;
  }

  
.asterism {
  text-align: center;
  display:block;
}

.asterism:before {
  font-size: 200%;
  font-weight: bold;
  content: '\2042'; /* asterism unicode */
}



@media (min-width: 60em){

  #TOC {
    position: sticky;
    top: 50%;
    transform: translate(-10em, -50%);
    width: 10em;
/*    position:fixed; 
    top: 50%;
    transform: translate(0, -50%);
    float:left; width: 10em;*/
    font-family: sans-serif; 
    text-align: left;
  }

}

@media (max-width: 60em){

  #TOC {
    display: none;
  }

}
    a {
      color: #1a1a1a;
    }
    a:visited {
      color: #1a1a1a;
    }
    img {
      margin: 0 auto;
      margin-top: 2em;
      margin-bottom: 2em;
      display: block;
      max-width: 100%;
    }


    h1, h2, h3, h4, h5, h6 {
      margin-top: 2em;
    }
    h5, h6 {
      font-size: 1em;
      font-style: italic;
    }
    h6 {
      font-weight: normal;
    }
    ol, ul {
      padding-left: 1.7em;
      margin-top: 1em;
    }
    li{
      margin-top: 1em;
      margin-bottom: 1em;
    }

.double-column-potentially {
  column-width: 14em;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

  blockquote{
    background-color: whitesmoke;
    padding: 1em;
    font-size: 80%;
  }

  blockquote > p:first-child{
    margin-block-start: 0;
  }

  blockquote > p:last-child {
    margin-block-end: 0;
  }

  blockquote > p {
    text-indent: 0;
  }

  .callout-box{
    border: 1px solid black; 
    text-align: center; 
    width:75%; 
    margin: 0 auto; 
    padding: 0.5em;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 100%;
  }

  ol.problems {
  }

  ol.problems ol {
    list-style-type: lower-alpha;
  }

  ol.problems > li {
    counter-increment: problems-counter;
  }

  ol.problems > li::marker {
    counter-increment: problems-counter;
    content: counter(problems-counter) ". ";
    font-weight: bold;
  }


  li > ol, li > ul {
    padding-right: 2em;
  }

  ol.lettered-list {
    counter-reset: lettered-list-counter;
  }

  ol.lettered-list li {
    counter-increment: lettered-list-counter;
  }

  ol.lettered-list li::marker {
    content: counter(lettered-list-counter, lower-alpha) ") " ;
  }
  
  a:link {
    color: blue;
    background-color: transparent;
  }

  a:visited {
    color: purple;
    background-color: transparent;
  }

  a:hover {
    text-decoration: none;
  }

  a:active {
    color: red;
    text-decoration: none;
  }

  code {
      font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
      font-size: 85%;
      margin: 0;
    }

  pre {
    margin: 1em 0;
    overflow: auto;
  }

  pre code {
    padding: 0;
    overflow: visible;
  }

  .sourceCode {
   background-color: transparent;
   overflow: visible;
  }

  hr {
    background-color: #1a1a1a;
    border: none;
    height: 1px;
    margin: 1em 0;
  }

  table {
    margin-left:auto;
    margin-right:auto;
    /* margin: 2em 2em 0 auto; */
    border-collapse: collapse;
    /* width: 100%; */
    overflow-x: auto;
    /* display: block; */
    font-variant-numeric: lining-nums tabular-nums;
  }

  table caption {
    margin-bottom: 0.75em;
  }

  tbody {
    margin-top: 0.5em;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
  }

  th {
    border-top: 1px solid #1a1a1a;
    padding: 0.25em 0.5em 0.25em 0.5em;
  }

  td {
    padding: 0.125em 0.5em 0.25em 0.5em;
  }

header{
	background-color: #F0F0F0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em;
	top: 0;
  left: 0;
	position: fixed;
	transition: top 0.25s;
}

#header-logo{
	height: 2em;
	padding: 0.5em;
}

#header-name{
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	text-align: left;
	text-decoration: none;
	padding-left: 1em;
}

#header-name>a{
	text-decoration: none;
	color: rgb(48,48,48);
}
#linkback {
    position: fixed;
    right: 20px;
    float: right;
    margin: 2pt;
    padding: 0;
}


#title-block {
    margin-bottom: 4em;
    text-align: center;
  }

  code{white-space: pre-wrap;}
  span.smallcaps{font-variant: small-caps;}
  span.underline{text-decoration: underline;}
  div.column{display: inline-block; vertical-align: top; width: 50%;}
  div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
  ul.task-list{list-style: none;}



@media print {
  
  .noprint {
		display: none;
	}

  html {
      font-size: 12pt;
      color: black;
      background-color: transparent;
    }

  header{
    display: none;
  }

  article {
    font-size: 12pt;
    padding: 0px;
  }

  blockquote{
    background-color: transparent;
  }

  .footnote{
		color: black;
		text-decoration: no
	}

	.footnote-back, .reversefootnote{
		display: none;
	}

	.footnotes {
    margin-top: 10em;
		border-top: 0.25pt solid black;
	}

    #TOC {
    display: none;
  }

/* web layout has vertical space between grafs; print layout has indents */
/* why don't I change this so we only have a text indent when we're immediately following another p element? that seems to be what i want here... */
  
p{
    margin: 0;
    text-indent: 2em;
  }

  blockquote p:not(:first-child) {
    margin: 0;
    text-indent: 2em;
  }

/* but there's a lot of stuff that we DON'T want indented */

  header + p, h1 + p, h2 + p, h3 + p, p:has(img) + p , p:has(br) + p, li + p, li > p, ol + p, ul + p, blockquote + p, .callout-box + p {
    text-indent: 0em;
  }
/* FIX: need to not indent if it's the first graf after math.display */

/* FIX: need the not-first paragraphs of a blockquote to have indents in print mode; */

  .callout-box{
    padding: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    page-break-inside: avoid;
  }


  h2 {
    margin-bottom: 0.5em;
  }

  p, h2, h3 {
        orphans: 3;
        widows: 3;
      }

  h2, h3, h4 {
        page-break-after: avoid;
      }

  img{
    	page-break-before: avoid;
	    page-break-after: avoid;
	}	

	.inline-image {
		max-height: 50vh;
	}

}