/* The styles here are mainly taken from arp242's hello.css v1.3 (https://git.io/fjRyh)
 *
 * I made the following changes:
 * - Replaced the Baskerville font with Inter v3.6 (https://rsms.me/inter/).
 * - Replaced the fleuron with an infinity sign (also from Inter).
 * - Added styling for nav items.
 * - Added styles to center align <time> elements in headers.
 */

/* ASIDE */
/* Put content to the left or right of the page as an "aside". This is an
 * alternative to footnotes.
 */

aside {
  hyphens: auto;                       /* Hyphenate, as this text is quite narrow. */
}

aside {
  position: absolute;
  left: /*padx*/-15em;
  width: 14em;
  text-align: right;
  font-size: .9em;
}

/* Alternative: place on the right.
aside {
  position: absolute;
  right: -15em;
  width: 14em;
}
*/

@media (max-width: 83em) {             /* Place inline if it won't fit on the screen. */
  aside {
    position: static;
    width: auto;
    text-align: left;
    background-color: #f7f7f7;
    padding: .4em 2em;
    border: 1px solid #b7b7b7;
    hyphens: none;
  }
}

/* Optional: place the page further to the right, so that there's more space for
 * the aside.
 * Adjust the media query above to max-width: 63em
.page {
  left: 10em;
}
*/

/* FONTS */

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: local("Inter V"),
       url("../fonts/Inter-var.subset.woff2") format("woff2");
}

html {
  font: 18px/175% 'DejaVu Sans', 'Source Sans', 'Arimo', 'Fira Sans', 'Noto Sans', sans-serif;
  text-size-adjust: none;         /* Disables text adjustment algorithm on some mobile browsers, this is */
  -webkit-text-size-adjust: none; /* intended for sites that are not designed for mobile viewing. */
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var';
    font-feature-settings: 'ss01' 1;
  }
}

/* Use smaller fonts and line-height on smaller screens. */
@media (max-width: /*bodywidth*/54rem) {
  html { font-size: 14px; line-height: 160%; }
}
@media (max-width: /*bodywidth*/26rem) {
  html { font-size: 12px; line-height: 150%; }
}

pre, code {
  font-family: 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Source Code Pro', 'Fira Mono', monospace;
}

pre {
  font-size: 14px;                     /* Smaller text to fit more. */
  line-height: 130%;                   /* Idem. */
}

/* DEFAULTS */
* {
  box-sizing: border-box;              /* Element width/height includes the border. */
}

*:target {
  background-color: #ff6;              /* Highlight elements in URL fragment, e.g. #some-header, or #footnote-1. */
}

html {
  background-color: #eee;              /* Neutral background to contrast with the page. */
  color: /*textcolor*/#252525;         /* Slightly less "harsh" black; looks subtly better. */
       tab-size: 4;                    /* Tab size of 4 is probably more common in editors etc. */
  -moz-tab-size: 4;                    /* Still needed as of Jan 2019 :-( */
}

html, body {
  margin: 0;                           /* No extra margin; shows up in some cases (e.g. when printing). */
}

.center, .page {
  max-width: /*bodywidth*/54rem;       /* Don't make it too wide, as that makes it harder to read. */
  margin: .5rem auto;                  /* Add some extra space at top/bottom, and centre it. */
  position: relative;                  /* So that absolute/relative positioning is relative to the page, which is almost always what's desired. */
}

.page {
  padding: /*pady*/1rem /*padx*/4rem;  /* Small padding on top, larger on sides. */
  background-color: /*bgcolor*/#fff;   /* White background to override the html one */
                                       /* A slightly grey or yellowish tint also works well, and gives a warmer feel.
                                        * Some suggestions: #fbfbf7, #fffff7 */
                                       /* Remove this and the box-shadow for an even background colour. */
  box-shadow: 0 0 6px rgba(0,0,0,.2);  /* Box-shadow effect looks quite handsome here. */
}
@media (max-width: /*bodywidth*/54rem) {
  .page, .center {
    max-width: 100%;                   /* Full-width page. */
    padding: 0 1rem;                   /* Modest amount of padding to prevent wasting screen space. */
  }
}

/* PRINTING */
@page {
  margin: 0;                           /* Don't add extra margin to pages, .page already has it. */
                                       /* Also hides URL and such that most browsers add. */
}
@media print {                         /* Reset some stuff for printing. */
  body {
    background-color: #fff;
  }
  .page, .center {
    box-shadow: none;
    padding: 0 1cm;
    margin: 0;
    max-width: none;
  }
  .page:first-child, .center:first-child {
    padding-top: 5mm;
  }
}

.page-a4, .page.page-a4 {              /* A4 paper used in most places */
  width: 21cm;
  height: 29.7cm;
}

.page-letter, .page.page-letter {      /* Standard U.S. letter */
  width: 8.5in;
  height: 11in;
}

/* LINKS */
a,
a code,                                /* Otherwise it would just stay black text; common enough to include here. */
.link {
  color: #00f;                         /* Make sure colour is the same in all browsers. */
  text-decoration: none;               /* Underlining can look "busy"; the colour on its own should be enough. */
  transition: color .2s;               /* Animate the change in colour effect on hover; subtle but noticeable. */
}
a:hover, .link:hover {
  text-decoration: underline;          /* Provide some feedback by underlining and changing colour. */
  color: #6491ff;                      /* Light blue */
}
a:hover code  {
  color: #6491ff;                      /* Also change colour of code on hover. */
}

form {                                 /* Make sure forms don't affect visual layout. */
  display: inline;
  margin: 0;
  padding: 0;
}

.link {
  background-color: transparent;       /* Reset basic appearance. */
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1rem;
  display: inline;

  -moz-user-select: inherit;           /* Otherwise text isn't selectable. */
  -webkit-appearance: none;
}

/* HEADERS */

/* The intention is that there is only one h1 on a page: at the top. If you use
 * h1 different, then you may want to add a border like in the h2. */
h1 {
  text-align: center;
  padding: .5em 0;                     /* More than default. */
  font-size: 1.7em;                    /* Default of 2em is pretty large. */
}

h2 {
  border-bottom: 1px solid /*textcolor*/#252525;  /* Underline to stand out more. */
  padding-bottom: .2em;                /* Border not too close to the text. */
  font-size: 1.5em;                    /* Default of 1.8em is pretty large. */
}

h3 {
  font-size: 1.3em;                    /* Default of 1.6em is pretty large. */
}

h4 {
  font-size: 1.1em;                    /* Slightly larger than default of 1em. */
}

h5, h6 {
  font-size: 1em;                      /* Don't make h5 and h6 smaller than base font. */
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-size: .7em;                     /* Doesn't need to be so large. */
  line-height: 0;                      /* Don't affect line-height of header. */
  color: #999;                         /* Use subdued colour, don't need to stand out too much. */
}

/* BLOCKQUOTE */
blockquote {
  font-style: italic;                  /* Quotations are usually typeset in italics. */
}

/* IMAGES */
img {
  max-width: 100%;                     /* Make sure it's never larger than the page. */
}
figure {
  text-align: center;                  /* Centre images and associated captions (if any). */
  margin: 1rem 0;                      /* Don't need 40px of margin on either side. */
}

figure.border {
  border: 1px solid #bbb;              /* Add border. */
  padding: 5px;                        /* Slight gap between image and border. */
  margin: -5px;                        /* Put the border in the margin, so the padding doesn't shrink the image. */
}

@media (min-width: /*bodywidth*/54rem) {  /* Only if the screen is wide enough. */
  figure.full {                        /* Make sure this is after .border so that adding both works. */
    margin-left: /*padx*/-4rem;
    width: calc(100% + /*padx*/8rem);
  }

  figure.full.border {
    border-left: none;                 /* Remove side borders on .full */
    border-right: none;
  }
}

/* CODE */
code, pre, kbd, samp {
  background-color: #f5f5f5;           /* Make it stand out a bit more. */
  color: #000;                         /* Override the softer black, as we're now using a grey background. */
}

pre {
  overflow: auto;                      /* Add scrollbars if the content is too high or wide. */
  max-height: 500px;                   /* Scroll content larger than this. */
  padding: .5em 1em;                   /* Don't put the text right on the edge. */
  border-radius: 2px;                  /* Looks better with subtly rounded corner. */
  border-top: 1px solid #d5d5d5;          /* Looks better. */
  border-bottom: 1px solid #d5d5d5;       /* Looks better. */
}

@media (min-width: /*bodywidth*/54rem) { /* Only if the screen is wide enough. */
  pre.full {
    margin-left: /*padx*/-4rem;
    width: calc(100% + /*padx*/8rem);
  }
}

code, kbd, samp {
  padding: 1px 2px;                    /* Make sure the text isn't right on the edge of the background. */
}
pre > code {                           /* Reset the above styling on <pre><code> */
  padding: 0;
  box-shadow: none;
  border: none;
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  background-color: transparent;       /* Don't include grey background in headers, looks ugly. */
  box-shadow: none;
  color: inherit;
}

/* TABLES */
table {
  border-collapse: collapse;           /* No space between borders. */
  width: 100%;
}

@media (min-width: /*bodywidth*/54rem) {  /* Only if the screen is wide enough. */
  table.full {
    margin-left: /*padx*/-3.5rem;
    width: calc(100% + /*padx*/7rem);
  }
}

caption {
  font-weight: bold;                   /* Make caption stand out more. */
}

tr {
  border-bottom: 1px solid #ddd;       /* Divide rows with a border. */
}
table > tr:last-child, tbody tr:last-child, tfoot tr:last-child {
  border-bottom: none;                 /* No border on the last row. */
}
tfoot tr:first-child {
  border-top: 1px solid #ddd;          /* Continue border on first tfoot row; removed with tbody tr:last-child. */
}

td, th {
  padding: .2em .5em;                  /* Whitespace on top/bottom to make it less dense. */
                                       /* And to the side to prevent cells from touching. */
  hyphens: none;                       /* Disable hyphenation by default, as it tends to wreak havoc with cell width calculations. */
}

/* HORIZONTAL RULER */
/* Make the <hr> element look better by replacing it with some text (usually
 * decorative characters such as fleurons or an asterism. */
hr {
  border: none;                        /* Remove default border. */
  text-align: center;                  /* Centre the characters. */
  font-size: 40px;                     /* Make it larger; what looks good depends a bit on which characte you choose. */
  color: /*textcolor*/#252525;         /* Standard text colour; it's grey by default. */
  opacity: .9;                         /* But make it slightly less dark than regular text. */
}

hr:before {
  /* As SVG, because too many browsers suck at rendering fonts well. */
  content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjRwdCIgaGVpZ2h0PSIzNXB0IiB2aWV3Qm94PSIwIDAgMjQgMzUiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoMCUsMCUsMCUpO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA1LjY2MDE1NiAxMy45NjA5MzggQyAyLjUwMzkwNiAxMy45NjA5MzggMCAxNi4zOTg0MzggMCAxOS40NDE0MDYgQyAwIDIyLjUxOTUzMSAyLjUwMzkwNiAyNC45NjA5MzggNS42NjAxNTYgMjQuOTYwOTM4IEMgNy44NzUgMjQuOTYwOTM4IDkuNTU4NTk0IDIzLjg3ODkwNiAxMC43MDcwMzEgMjIuODAwNzgxIEMgMTEuMTk5MjE5IDIyLjMyMDMxMiAxMS42MDkzNzUgMjEuODM5ODQ0IDExLjk4MDQ2OSAyMS4zOTg0MzggQyAxMi4zMDg1OTQgMjEuODM5ODQ0IDEyLjcxODc1IDIyLjMyMDMxMiAxMy4yMTA5MzggMjIuODAwNzgxIEMgMTQuMzU5Mzc1IDIzLjg3ODkwNiAxNi4wNDI5NjkgMjQuOTYwOTM4IDE4LjI5Njg3NSAyNC45NjA5MzggQyAyMS40MTQwNjIgMjQuOTYwOTM4IDIzLjkxNzk2OSAyMi41MTk1MzEgMjMuOTE3OTY5IDE5LjQ0MTQwNiBDIDIzLjkxNzk2OSAxNi4zOTg0MzggMjEuNDE0MDYyIDEzLjk2MDkzOCAxOC4yOTY4NzUgMTMuOTYwOTM4IEMgMTYuMDQyOTY5IDEzLjk2MDkzOCAxNC4zNTkzNzUgMTUuMDM5MDYyIDEzLjIxMDkzOCAxNi4xNjAxNTYgQyAxMi42MzY3MTkgMTYuNjc5Njg4IDEyLjMwODU5NCAxNy4wNzgxMjUgMTEuOTgwNDY5IDE3LjUxOTUzMSBDIDExLjYwOTM3NSAxNy4wNzgxMjUgMTEuMTk5MjE5IDE2LjYwMTU2MiAxMC43MDcwMzEgMTYuMTYwMTU2IEMgOS41NTg1OTQgMTUuMDM5MDYyIDcuODc1IDEzLjk2MDkzOCA1LjY2MDE1NiAxMy45NjA5MzggWiBNIDIxLjU3ODEyNSAxOS40NDE0MDYgQyAyMS41NzgxMjUgMjEuMjM4MjgxIDIwLjEwMTU2MiAyMi42Nzk2ODggMTguMjk2ODc1IDIyLjY3OTY4OCBDIDE2LjkwMjM0NCAyMi42Nzk2ODggMTUuNzkyOTY5IDIyIDE0Ljg1MTU2MiAyMS4xMjEwOTQgQyAxNC4yMzQzNzUgMjAuNTE5NTMxIDEzLjc4NTE1NiAxOS45NjA5MzggMTMuNDE0MDYyIDE5LjQ0MTQwNiBDIDEzLjYyMTA5NCAxOS4xOTkyMTkgMTQuMTEzMjgxIDE4LjQ4MDQ2OSAxNC44NTE1NjIgMTcuODAwNzgxIEMgMTUuNzUzOTA2IDE2LjkyMTg3NSAxNi45MDIzNDQgMTYuMjM4MjgxIDE4LjI5Njg3NSAxNi4yMzgyODEgQyAyMC4xMDE1NjIgMTYuMjM4MjgxIDIxLjU3ODEyNSAxNy42Nzk2ODggMjEuNTc4MTI1IDE5LjQ0MTQwNiBaIE0gMi4zMzk4NDQgMTkuNDQxNDA2IEMgMi4zMzk4NDQgMTcuNjc5Njg4IDMuODE2NDA2IDE2LjIzODI4MSA1LjY2MDE1NiAxNi4yMzgyODEgQyA3LjAxNTYyNSAxNi4yMzgyODEgOC4xNjQwNjIgMTYuOTIxODc1IDkuMDY2NDA2IDE3LjgwMDc4MSBDIDkuNzIyNjU2IDE4LjM5ODQzOCAxMC4xMzI4MTIgMTguOTYwOTM4IDEwLjUwMzkwNiAxOS40NDE0MDYgQyAxMC4xMzI4MTIgMTkuOTYwOTM4IDkuNjgzNTk0IDIwLjUxOTUzMSA5LjA2NjQwNiAyMS4xMjEwOTQgQyA4LjEyNSAyMiA3LjAxNTYyNSAyMi42Nzk2ODggNS42NjAxNTYgMjIuNjc5Njg4IEMgMy44MTY0MDYgMjIuNjc5Njg4IDIuMzM5ODQ0IDIxLjIzODI4MSAyLjMzOTg0NCAxOS40NDE0MDYgWiBNIDIuMzM5ODQ0IDE5LjQ0MTQwNiAiLz4KPC9nPgo8L3N2Zz4K);
}

/* BLOCKQUOTE */
/* Put decorational quotation marks around blockquote elements. */
blockquote {
  font-style: italic;                  /* Quotations are usually typeset in italics. */
  position: relative;                  /* So that position: absolute is relative to this. */
}

blockquote:before /*, blockquote:after */ {
  position: absolute;                  /* Don't interfere with regular layout. */
  color: #dbdbdb;                      /* Just decorational, so don't stand out too much. */
  font-size: 5em;
}

blockquote:before {
  content: "“";
  left: -.6em;
  top: .25em;
}

/* Optional: place a mark after the quote, too. I personally don't like it as
 * often times the last line won't end at the line, and there just seems to be a
 * "dangling" quotation mark there.
 *
 * Note: add blockquote:after to the first selector above too.
 */
/*
blockquote:after {
  content: "„";                        /* Use the German-style opening quote as it's easier to align, and it should look the same. *
  right: -.6em;
  bottom: .25em;
}
*/

/* POSTSCRIPT */

/* A "postscript" is useful for adding things after the main text, such as a
 * footnotes section, feedback section, etc.
 *
 * It doesn't need to be at the end of the document, and also fits well at the
 * end of a chapter.
 */
.postscript {
  margin-top: 3em;                     /* Clear a bit from regular content. */
  border-top: 1px solid #bbb;          /* Border to separate. */
  font-size: .9em;                     /* Slightly smaller text. */
  position: relative;                  /* So we can place the header. */

}

.postscript > strong {
  font-style: normal;                  /* Override the italics. */
  position: absolute;                  /* Move to the to align with the border. */
  top: -1em;
  left: 1em;
  background-color: /*bgcolor*/#fff;   /* Add background colour and padding to hide the border. */
  padding: 0 .5em;
}

.postscript > p {
  margin: 1em 2em                      /* Make margin same as list. */
}

/* Make the border take up the page padding if the screen is wide enough. */
@media (min-width: /*bodywidth*/54rem) {
  .postscript {
    margin-left: /*padx*/-4em;           /* Put the div in the margin too, so the border is wider. */
    width: calc(100% + /*padx*/8em);
    padding: 0 /*padx*/4em;              /* Add page margin. */
  }

  .postscript > strong {
    left: /*padx*/6em;
  }
}

/* MY ADDITIONS */
/* navigation */
nav * {
  margin: 0;
}
nav ul {
  padding: 0 /*padx*/4rem;
}
nav ul li {
  display: inline-block;
  padding: 0 1.5rem;
}
nav .site-title {
  padding: 0;
  margin-right: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
}
@media (max-width: /*bodywidth*/54rem) {
  nav { text-align: center; }
  nav .site-title {
    margin-right: 0;
    display: block;
  }
}

time {
  display: block;
  padding: .5em 0;
}
header time {
  text-align: center;
}

article header h1 {
  padding-bottom: 0;
}

h1 img {
  max-width: 1.5rem;
}

dt {
  font-weight: 600;
}

time, figcaption {
  color: #999;
}

address {
  text-align: center;
  color: #999;
}

/* Make sure footnotes don't break line spacing */
sup, sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

::selection { background: #b8cdff; }

/* FULL-WIDTH DIV */

div.full {
  background-color: #f5f5f5;           /* Make it stand out a bit more. */
  padding: .5em 1em;                   /* Don't put the text right on the edge. */
  border-radius: 2px;                  /* Looks better with subtly rounded corner. */
  border-top: 1px solid #d5d5d5;       /* Looks better. */
  border-bottom: 1px solid #d5d5d5;    /* Looks better. */
}

@media (min-width: /*bodywidth*/54rem) {  /* Only if the screen is wide enough. */
  div.full {
    margin-left: /*padx*/-4rem;
    width: calc(100% + /*padx*/8rem);
  }
}

/* ACCORDION */
/* some of these styles are lifted from Spectre.css (git.io/v7gHl) */

.icon {
    font-weight: 600;
    float: right;
}

.accordion input:checked ~ .accordion-header .icon,
.accordion[open] .accordion-header .icon {
  transform: rotate(90deg);
}

.accordion input:checked ~ .accordion-body,
.accordion[open] .accordion-body {
  max-height: 50rem;
}

.accordion .accordion-header {
  display: block;
  cursor: pointer;
  outline: none;
}

.accordion .accordion-header .icon {
  transition: transform .2s;
}

.accordion .accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s;
}

summary.accordion-header::-webkit-details-marker {
  display: none;
}

#webmentions { display: none; }