:root {
  --default-spacing: 16px;
  --default-spacing-per2: 8px;
  --base-link-color:    hsl(206, 100%, 30%);
  --base-background-color: hsl(0, 0%, 96%);

  /* accent color used for sidenote backgrounds etc */
  /* --base-accent-color: hsla(206, 100%, 30%, 10%); - original transparency-based version */
  --base-accent-color: hsl(206, 30%, 90%);
  --base-accent-color2: hsl(206, 36%, 84%); /* darker variant, for borders */

}

html {
  /* uhh, is it a good idea to make the whole thing flex? not sure. */
  display: flex;
  justify-content: center;
  background-color: var(--base-background-color);
}

body {
  height: 100%;
  color: #222;
  margin: 0px;
  font-size: large;
  line-height: 1.6;
  overflow: auto;
}

h1, h2, h3, h4 {
  line-height: 1.2;
}

#publication-date {
  font-style: italic;
}

a:link {
  color: var(--base-link-color);
}

a:visited {
  color: hsl(0, 0%, 45%);
}


/* navbar */

#navbar {
  margin-top: var(--default-spacing);
  margin-left: var(--default-spacing);
  font-weight: bold;
  font-size: x-large;
}

/* Use any-link, so that visited subpages in navbar are not styled differently */
#navbar a:any-link {
  color: var(--base-link-color);
  text-decoration: none;
}

#navbar a:any-link:hover {
  text-decoration: underline;
}

/* main title */
#title-wrapper {
  display: flex;
  justify-content: center;
}
h1 {
  flex-shrink: 0;
  text-align: center;
  hyphens: none;

  /* see also .pre-wrapper max-width */
  max-width: clamp(
    100%,
    calc(100vw - 50px - 2 * var(--default-spacing)),
    20em
  );
}

/* main content */

#content-container {
  margin-left: var(--default-spacing);
  margin-right: var(--default-spacing);
  margin-bottom: var(--default-spacing);
  max-width: 30em; /* ~roughly 60-70 chars per line */
  text-align: justify;
  hyphens: auto;
}

.header-self-link:any-link {
  color: inherit;
  text-decoration: inherit;
}

.header-self-link:hover {
  text-decoration: underline;
}

/* sidenotes */

.sidenote-toggle + input { display:none; }
/*
 * sidenote-float is just a container with 100% width + float. This additional
 * layer is needed to make horizontal margins work correctly. The display is
 * set to 'block' when the toggle is checked by the CSS rules below.
 * */
.sidenote-toggle + .sidenote-float {
  display: none;
  float: left;
  width: 100%;
}

/* Show sidenote when the toggle next to it is checked */
.sidenote-toggle:checked + .sidenote-float { display: block; }

@media print {
  /* always show sidenotes when printing */
  .sidenote-toggle + .sidenote-float { display: block; }
}

label.sidenote-toggle {
  cursor: pointer;
  font-weight: bold;
  color: var(--base-link-color);
  /* so that copy-pasting doesn't include the toggle. see https://stackoverflow.com/questions/74709722/exclude-element-from-copied-text-in-safari */
  user-select: none;
  -webkit-user-select: none;
}

label.sidenote-toggle:hover {
  opacity: 70%;
}

/*
 * Container nested inside sidenote-float, with the background color and
 * appropriate margins. Note that elements (especially equations) ignore
 * margins after floating elements, so whatever comes after sidenote-float will
 * bump into it. That's why the margin has to be in this inner element.
 */
.sidenote-container {
  display: block;
  background-color: var(--base-accent-color);
  margin-left: var(--default-spacing);
  margin-right: var(--default-spacing);
  margin-top: var(--default-spacing-per2);
  margin-bottom: var(--default-spacing-per2);
  border-style: solid none;
  border-width: 2px;
  border-color: var(--base-accent-color2);
}

/*
 * Actual text content of the sidenotes.
 */
.sidenote-content {
  display: block;
  font-size: 90%;
  margin: 0.5em;
}

/*
 * At the end of each paragraph, add an empty element with clear: both. Without
 * this, the margin collapsing due to the floating sidenote-float will make the
 * spacing between a sidenote at the end of a paragraph and the start of the
 * next paragraph too small.
 */
p::after {
  content: "";
  display: block;
  clear: both;
}

/*
 * Square brackets around sidenotes, only visible to screen readers / reader
 * mode. see https://stackoverflow.com/a/26032207
 * */
.sidenote-aria-parenthesis {
  position: absolute;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
  clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

/* code / syntax highlighting related stuff */

/* TODO: add shadow for scrolling, like we have in equations */
/* TODO: consider if this section should be fully moved to syntax-highlighting.css */
/* https://stackoverflow.com/questions/18309698/centering-div-that-is-wider-than-its-parent-without-setting-negative-left-margin */
/* TODO: combine with img.centered or something (also: wide tables) */
.pre-wrapper {
    display: flex;
    justify-content: center;
}
.pre-wrapper > * {
    flex-shrink: 0;
    /* apparently there's no way to easily get the viewport width without scrollbars included (see https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar), so adding -50px instead as recommended (kinda randomly) in one of the comments */
    max-width: max(calc(100vw - 50px - 2 * var(--default-spacing)), 100%);
}


/* horizontal rule */
hr {
  margin-top: 50px;
  margin-bottom: 50px;
}


/* images */
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* math / katex */

.katex-display {
  clear: both;
  /* Make wide equations scrollable if applicable. For some reason, with
   * overflow-y: visible, small vertical scrollbars appear (I guess the math is
   * a bit bigger than its box). The official docs suggest 'hidden':
   * https://katex.org/docs/issues.html#css-customization, but that clips off
   * exponents in a numerators of fractions, so I added the small vertical
   * padding (10px seems to be enough at least on android FF) to fix that. Make
   * margin a bit smaller than the default 1em to compensate. */
  overflow: auto visible;
  padding: 10px 0px;
  margin: 0.5em 0;

  /*
   * Add gradients to indicate that there is more content to scroll in wide
   * equations. See:
   * https://lea.verou.me/2012/04/background-attachment-local/
   * https://stackoverflow.com/questions/70131020/how-to-display-scroll-down-if-and-only-if-content-overflows-in-pure-css
   */
  background:
    /* Shadow-cover to hide shadows when fully scrolled. Has to come first so it's on top. */
    linear-gradient(90deg, var(--base-background-color) 5px, transparent 20px),
    linear-gradient(270deg, var(--base-background-color) 5px, transparent 20px),
    /* The shadow itself. */
    linear-gradient(90deg, rgba(0.3, 0.3, 0.3, 0.3), transparent 8px),
    linear-gradient(270deg, rgba(0.3, 0.3, 0.3, 0.3), transparent 8px);
  background-attachment: local, local, scroll, scroll;
}

@media print {
  .katex-display {
    /* remove gradient stuff when printing */
    background: unset;
    overflow: visible;
  }
}

.katex-html {
  /* so that there's no line break between inline equations and punctuation,
   * see https://github.com/KaTeX/KaTeX/issues/1233 */
  white-space: nowrap;
}

/* so that copy-pasting math doesn't include everything twice (once from HTML
 * and once from mathML */
.katex-mathml {
  user-select: none;
  -webkit-user-select: none;
}