h1.thesis-title {
  font-size: 3em !important;
}

main h1,
h2,
h3 {
  font-family: "Source Serif Pro", serif;
  font-weight: 300;
  font-size: 2.2em !important;
}

// Make figures looks nice
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline-start: 0em;
  margin-inline-end: 0em;

  max-width: 900px !important;

  // border-bottom: solid #222 1px;
  padding-bottom: 1em;

  // border-top: solid #222 1px;
  // padding-top: 1em;
}

figure > img,
figure > svg {
  // max-width: 90% !important;
  margin-bottom: 2em;
}

figcaption {
  // font-style: italic;
  // font-size: 0.9em;
  max-width: 90%;
}

nav.page-table-of-contents > ul > li:first-child {
  display: none;
}

//For the animation that plays in the nav as you scroll
nav.page-table-of-contents {
  li li {
    font-size: 0.9em;
  }

  ul {
    padding-inline-start: 6px;
  }

  a {
    transition: all var(--night-mode-fade-time) ease-in-out;
    color: #000;
    font-weight: normal;
  }

  li.active > a {
    color: #000 !important;
    font-weight: bold;
  }
}

// modify the spacing of the various levels
li {
  margin-bottom: 0.2em;
}

main > ul > li {
  margin-top: 1em;
}

main > ul > ul > li {
  margin-top: 0.5em;
}

// Pull the citations a little closer in to the previous word
span.citation {
  margin-left: -1em;

  a {
    text-decoration: none;
    color: darkblue;
  }
}

// Mess with the formatting of the bibliography
div.csl-entry {
  margin-bottom: 0.5em;
}
div.csl-entry a {
  //     text-decoration: none;
  text-decoration: none;
  color: darkblue;
}

div.csl-entry div {
  display: inline;
}

header li {
  list-style: none;
  a {
    text-decoration: none;
    margin-bottom: 0.5em;
    display: block;
  }
}

nav.overall-table-of-contents > ul {
  padding-inline-start: 0px;

  > li {
    list-style: none;
    margin-top: 1em;
  }
}

// Page header
div#page-header {
  //make the header sticky, I don't really like how this looks but it's fun to play with
  // position: sticky;
  // top: 0px;
  // background: white;
  // z-index: 10;
  // width: 100%;
  p {
    margin-block-end: 0px;
  }
}

@media only screen and (max-width: $horizontal_breakpoint),
  only screen and (max-height: $vertical_breakpoint) {
  //make the figures go to 100% and use italics to denote the figure captions
  figure > img,
  figure > svg {
    max-width: 100% !important;
  }

  figcaption {
    font-style: italic;
    width: 100%;
  }
}