:root {
  /* colors */
  --white: #fff;
  --black: #333;
  --jet-black: black;
  --blue: #0033cc;
  --red: #dc4b32;
  --background: var(--white);
  --foreground: var(--black);
  --accent: MediumAquamarine;

  /* spacing */
  --space-unit: 1em;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));

  /* misc */
  --box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;

  font-size: 100%;
}

body {
  height: 100%;
  margin: 0 auto;

  background: var(--white);
  color: var(--black);

  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.8;
}

/* headings
----------------------------------------------- */
h1 {
  line-height: 1.3;
  font-size: 2em;
}

/* disclosure
----------------------------------------------- */
details {
  margin-bottom: var(--space-xs);
}

details summary:hover {
  cursor: pointer;
}

/* expanded content
----------------------------------------------- */
.expanded-content {
  margin-left: var(--space-xxs);
  margin-top: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 3px solid lightgray;
}

/* links
----------------------------------------------- */
a {
  color: var(--blue);
}

/* navigation
----------------------------------------------- */
nav ul {
  display: flex;

  padding: 0;

  list-style: none;
}
nav ul a {
  font-size: 1em;
  text-decoration: none;
}

nav ul a.active,
nav ul a:active,
nav ul a:hover,
nav ul a:focus {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 10px;
  text-decoration-thickness: 3px;
}

nav ul li:not(:first-child) {
  margin-left: 20px;
}

/* figure
----------------------------------------------- */
figure {
  max-width: 400px;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: var(--box-shadow);
  margin: var(--space-xl) auto;
}

figure.figure--borderless {
  box-shadow: none;
}

figure.figure--full-width {
  max-width: none;
}

figure img {
  display: block; /* Removes gap underneath image */
  /* max-width: calc(100vw - var(--space-md) - var(--space-md)); */
  padding: var(--space-md);
  margin: 0 auto;
  max-width: 100%;
}

figcaption {
  font-style: italic;
  text-align: center;
  color: var(--jet-black);
  background: var(--accent);
  margin-top: var(--space-xs);
  padding: var(--space-xxs) 0;
}

figure .MathJax {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 16px;
  padding-bottom: 16px;
}

.MathJax {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--black);
    --foreground: var(--white);
  }
  body {
    background: var(--black);
    color: var(--white);
  }

  a {
    color: white;
  }

  figure {
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
      /* shadow ring 👇 */ 0 0 0 1px hsla(0, 0%, 0%, 0.05),
      /* multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
      0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
  }

  details > :nth-child(2) {
    border-left-color: darkgray;
  }
}