/* prettier-ignore */
:root {
  /* colors gleefully taken from the MIT-licensed Dracula (<https://draculatheme.com/>) */
  --zero: #282a36;    --black:    var(--zero);
  --one: #44475a;     --gray:     var(--one);
  --two: #6272a4;     --steel:    var(--two);
  --three: #f8f8f2;   --white:    var(--three);
  --four: #8be9fd;    --blue:     var(--four);
  --five: #50fa7b;    --green:    var(--five);
  --six: #ffb86c;     --orange:   var(--six);
  --seven: #ff79c6;   --pink:     var(--seven);
  --eight: #bd93f9;   --purple:   var(--eight);
  --nine: #ff5555;    --red:      var(--nine);
  --ten: #f1fa8c;     --yellow:   var(--ten);

  /* with <http://colorizer.org/>: --blue, but boost Lab lightness to 95 */
  --blue-light: #a1ffff;
}

/* prettier-ignore */
html {
  --color-background:           var(--black);
  --color-background-alternate: var(--gray);
  --color-text:                 var(--white);
  --color-heading:              var(--purple);

  --color-link:       var(--blue);
  --color-link-hover: var(--blue-light);

  --color-emphasis: var(--yellow);
  --color-strong:   var(--orange);

  --color-code: var(--green);

  background: var(--color-background);
  color:      var(--color-text);

  font: 300 22px/1.4 Seravek, Moniker, system-ui, sans-serif;
  
  --side-padding: .5em;
  --border-radius: var(--side-padding);
  padding: 0 var(--side-padding) 1em;
}

body {
  max-width: 50ch;
  margin-inline: auto;
}

/* Base styles for headers */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  font-weight: 100;
  line-height: 1.1;
  page-break-inside: avoid;
}

h1 {
  font-weight: 300;
  font-style: italic;
  text-transform: lowercase;
  text-align: center;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 2rem;
  margin-bottom: 0;
}

/****************************************************
  The Masthead
  It’s the block of text that says the site name.
*/

.masthead--subpage {
  .masthead--subpage__link:any-link {
    color: inherit;
    text-decoration: none;
  }
}

.masthead--subpage {
  .masthead__site-name {
    font-size: 1rem;
    margin-bottom: 0;
  }
}

.introduction {
  p {
    text-align: right;
  }
}

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

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

code,
pre {
  color: var(--color-code);
  font-size: 0.8rem;
  font-family: Monaco, Menlo, Consolas, monospace;
}

strong,
b {
  /* merely “bolder” usually, which is not bold enough */
  font-weight: bold;
}

.anvilicious {
  text-align: center;
  font-size: larger;
  font-style: italic;
}

li + li {
  margin-top: 0.25rem;
}

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

/* Don’t underline footnotes’ links */
a[href^="#fn:"]:any-link,
a[href^="#fnref:"]:any-link {
  text-decoration: none;
}

hr {
  width: 50%;
}

/**********************
  Table of Contents
*/

.toc {
  background: var(--color-background-alternate);
  font-size: smaller;
  padding: 1rem;
  border-radius: var(--border-radius);

  h1 {
    margin-top: 0;
  }
}

#TableOfContents {
  line-height: 1.35;

  a {
    text-decoration: none;
  }

  ul {
    font-weight: 400;
    margin: 1rem 0 0.25rem;

    ul {
      font-size: 0.9em; /* yes, even smaller */
      font-weight: 300;
      margin: 0;
      padding-left: 0.7em;

      li {
        margin: 0;
      }
    }
  }
}

/***********
  Tables
*/

th {
  font-weight: 500;
}

/********************************
  Figures and Figure Captions
*/

figure {
  background: var(--color-background-alternate);
  padding: 1rem;
  border-radius: var(--border-radius);

  img {
    width: 100%;
    border-radius: var(--border-radius);

    &.intrinsic-size {
      width: auto;
    }
  }

  img,
  figcaption {
    display: block;
    margin-inline: auto;
    text-align: center;
  }

  figcaption {
    margin-top: 1rem;

    blockquote + & {
      font-size: smaller;
    }
  }
}

a.figurewrapper:any-link {
  color: var(--color-text);
  text-decoration: none;
}

/************
  Buttons
*/

a:any-link.button {
  background: var(--gray);
  border-radius: 0.25em;
  color: var(--white);
  padding: 0.5em 1em;
  text-decoration: none;
}

/***********
  Footer
*/

.footer-sitewide {
  margin-top: 2rem;
  text-align: center;

  & .footer-sitewide__spinner:hover {
    animation: 1s infinite spin;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*****************************
  Small-screen adjustments
*/

@media screen and (max-width: 500px) {
  html {
    font-size: 17px;
  }
}

@media screen and (max-width: 340px) {
  figure {
    margin-inline: var(--side-padding);
  }
}

/**********************
  Print adjustments
*/

@media print {
  html {
    color: black;
    background: white;
    font-size: 12pt;
    font-weight: 400;
  }

  * {
    color: initial !important;
  }
}