:root {
  /* These are deliberately colours and not semantic properties */
  --black: black;
  --pale-yellow: #fdf6e3;
  --bright-blue: #2079e0;
  --purple: #992299;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("Libre-Baskerville/REGULAR.ttf");
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("Libre-Baskerville/ITALIC.ttf");
  font-style: italic;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("Libre-Baskerville/BOLD.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Inconsolata";
  src: url("Inconsolata/REGULAR.ttf");
}
@font-face {
  font-family: "Inconsolata";
  src: url("Inconsolata/BOLD.ttf");
  font-weight: bold;
}

body {
  margin: 0 0; /* reset; required for header sticky width to be predictable */
}

header h1 {
  /* needed for logo positioning */
  position: relative;
}

p,li {
  text-align: justify;
  hyphens: auto;
}

html {
  scroll-behavior: smooth;
  background-color: white;
}

*::selection {
  background-color: var(--bright-blue);
  color: white;
}

main {
  font-family: "Libre Baskerville", serif;
  width: 80%;
  max-width: 800px;
  padding: 0 2em;
  margin: auto;
}

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

h1 > *, h2 > *, h3 > *, h4 > *, h5 > *, h6 > * {
  color: var(--black) !important;
}

details summary * {
  display: inline;
}

details summary:hover {
  outline: 2px solid black;
}

details[open] summary:hover {
  outline: none;
}

/* this pointer-events stuff is a minor hack to enhance details elements with
 * links in the summary - the idea is that you click once to open the
 * disclosure, and then again to follow the link. I might change it. */
details summary {
  cursor: pointer;
  list-style-type: none;
}

details summary a {
  pointer-events: none;
}

details[open] summary a {
  pointer-events: all
}

details[open] summary {
  pointer-events: none;
}

a, a:link, a:visited, a:active, a:hover {
  color: var(--bright-blue);
  font-weight: 700;
  text-decoration: none;
}

a:visited {
  color: var(--purple);
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.125em;
}

@media (min-width: 1200px) {
  #TOC {
    position: fixed;
    top: 0em;
    right: 0em;
    margin-left: calc(1em + 800px);
    width: calc(((100vw - 800px)/2) - 2em);
    padding: 1em;
    max-height: 100vh;
    overflow-y: scroll;
  }
}

@media (max-width: 1200px) {
  header :is(h1,h2) {
    margin: 0.5rem 0;
  }

  header h1 {
    font-size: 1.2rem;
  }

  header h1 img {
    height: 1.2em;
    width: 1.2em;
  }

  header :is(h2,h3,h4,h5,h6) {
    font-size: 1rem;
  }

  header {
    padding: 10px 0;
    height: 5rem;
  }

  header * {
    padding: 1px 0; /* prevents margin collaps */
  }

  *[id] {
    scroll-margin-top: calc(5rem + 1em);
  }

  header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    border-bottom: 1px solid black;
  }

  header:not(:focus-within) {
    cursor: pointer;
  }

  header:not(:focus-within) {
    white-space: nowrap;
    * {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  
  header:not(:focus-within) ul {
    display: none;
    height: 0;
  }

  header:focus-within {
    position: fixed;
    width: 80vw; /* same as main */
    max-width: 800px; /* same as main */
    height: 100vh;
    overflow: scroll;
    background-color: white;
  }
  
  header:focus-within ul {
    animation-name: fade-in;
    animation-duration: 0.5s;
    animation-direction: normal;
  }
  
  @keyframes fade-in {
    from {
      display: none;
      opacity: 0;
    }
    to {
      display: initial;
      opacity: 1;
    }
  }
}

#TOC a {
  display: block;
  color: inherit;
  font-weight: normal;
  text-decoration: none;
}

#TOC a:hover {
  color: var(--bright-blue);
}

#TOC ul {
  /* border-left: 0.125em solid var(--black); */
  list-style-type: none;
}

#TOC li {
  padding: 2px;
  list-style-type: none;
}

pre {
  overflow-x: scroll !important;
  background-color: var(--pale-yellow);
  padding: 6px 4px;
  border-left: solid 6px var(--black);
}

code {
  font-family: "Inconsolata";
  font-size: 1.2em;
}

code {
  user-select: all;
}

code * {
  user-select: text;
}

p code {
  word-spacing: -3px;
}

pre code {
  border: none;
  font-size: 1em;
}

blockquote {
  padding-left: 1em;
  border-left: solid 6px var(--bright-blue);
  background-color: var(--pale-yellow);
  font-style: italic;
}

h1 img {
  height: 1em;
  width: 1em;
  position: absolute;
  right: 0;
}

img {
  width: 100%;
  max-height; 80vh;
}