/* 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 /*bordercolor*/#aaa;
    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 */

/* I like the Libre Baskerville typeface, which is a nice Serif font.
 *
 * https://github.com/impallari/Libre-Baskerville
 * https://web.archive.org/web/20150918205958/http://www.impallari.com/projects/update/86
 * https://fonts.google.com/specimen/Libre+Baskerville
 *
 * A copy is in the "fonts" dir.
 */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'),
    url(/fonts/libre-baskerville.woff2) format('woff2'),
    url(./fonts/libre-baskerville.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local('Libre Baskerville Bold'), local('LibreBaskerville-Bold'),
    url(/fonts/libre-baskerville-bold.woff2) format('woff2'),
    url(./fonts/libre-baskerville-bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: local('Libre Baskerville Italic'), local('LibreBaskerville-Italic'),
    url(/fonts/libre-baskerville-italic.woff2) format('woff2'),
    url(./fonts/libre-baskerville-italic.woff2) format('woff2');
}

html {
  font: 16px/180% 'Libre Baskerville', 'DejaVu Serif', 'Bitstream Vera Serif', 'Georgia', serif;
  /* Possible sans-serif alternative; note you may want to adjust the
   * line-height and font-size if you want the fonts. Different values work
   * better for different fonts.
   * font: 18px/160% Calibri, 'DejaVu Sans Serif', 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. */
}

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

pre, code {
  font-family: 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Consolas', monospace;
}

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

h1, h2, h3, h4, h5, h6 {
  /* Enable ligatures, works well with Libre Baskerville, which adds
   * (old-fashioned but handsome) ligatures on "st", "ct", and "sp".
   *
   * You'll need to add "&subset=all" if you're using it from Google Fonts:
   *   https://fonts.googleapis.com/css?family=Libre+Baskerville&subset=all
   */
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-feature-settings: 'liga' on, 'dlig' on;
}


/* 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 :-( https://bugzil.la/737785 */
}

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*/54em) {
  .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: 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. */
}


/* 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 /*bordercolor*/#aaa; /* 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*/54em) { /* 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*/54em) { /* 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%;
}
table + table {
  margin-top: 2em;                     /* Add margin for subsequent tables. */
}

@media (min-width: /*bodywidth*/54em) {  /* 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. */
}

td.left, th.left  {                    /* Left aligned table cells (mainly for <th>). */
  text-align: left;
}
td.right, th.right {                   /* Right aligned table cells. */
  text-align: right;
}
table td.right {
    font-feature-settings: 'tnum' on;  /* Use tabular numbers for alignment. */
    font-variant-numeric: tabular-nums;
    font-family: sans-serif;           /* Libre Baskerville has no aligned numbers :-( */
}

/* SUPER- AND SUBSCRIPT */

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

/* 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: 60px;                     /* Make it larger; what looks good depends a bit on which character 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 {
  /* Two fleurons with touching edges.
  content: "☙❧";
  letter-spacing: -4px;
  */

  /* As SVG, because too many browsers suck at rendering fonts well. This is
   * the same as the above two rules (as they *should* render). */
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMC4yIDkuMiIgaGVpZ2h0PSIzNC44IiB3aWR0aD0iMTE0LjMiPjxwYXRoIGQ9Ik0xMy4yIDBxMS4xIDAgMS4zIDEuMiAwIDEtLjcgMS4yLTEuOC40LTIgLjggMi42LjMgMy4yIDMuMWguMmwuMi44LS40LjFxLS4yIDEuOC0xLjggMS45LTEgMC0xLjMtMSAwLS44LjItLjguMi40LjguNC44IDAgMS0uOFExMSA2LjEgMTEgMy43cS0xLjQgMC0yLjEgMSAxLjQuNyAxLjQgMS44LS4xIDIuNS0zLjYgMi43US41IDkuMiAwIDUuNXEwLS42LjctLjcuNSAwIC42LjV2LjJsLS4xLjRxMCAxIDEuMSAxIDEgMCAxLS43UTQgMS4yIDcgMXEyIC4xIDIgMS43di4xcTAgLjQtLjQgMS41IDEtLjggMi0xIC42IDAgLjYtLjQuOC0xIDEuNi0xLjMuNi0uNC42LS44bC0uMi0uNHEtLjItLjMgMC0uNHptLTEuNiAzLjd2LjFxMCAxLjQgMi4zIDIuMi0uMy0yLTIuMy0yLjN6Ii8+PHBhdGggZD0iTTE3IDBxLTEgMC0xLjMgMS4yIDAgMSAuOCAxLjIgMS44LjQgMiAuOC0yLjcuMy0zLjIgMy4xSDE1bC0uMi44LjUuMXEuMiAxLjggMS44IDEuOSAxIDAgMS4yLTEgMC0uOC0uMi0uOC0uMS40LS43LjQtLjkgMC0xLS44IDIuNy0uOCAyLjgtMy4yIDEuNCAwIDIgMS0xLjMuNy0xLjMgMS44IDAgMi41IDMuNSAyLjcgNi40IDAgNi44LTMuNyAwLS42LS42LS43LS42IDAtLjcuNXYuMmwuMi40cTAgMS0xLjIgMS0uOSAwLTEtLjctLjYtNS0zLjctNS4yLTIgLjEtMiAxLjd2LjFxMCAuNC40IDEuNS0xLS44LTItMS0uNiAwLS42LS40LS43LTEtMS41LTEuMy0uNi0uNC0uNi0uOGwuMi0uNHEuMi0uMyAwLS40em0xLjcgMy43di4xcTAgMS40LTIuNCAyLjIuMy0yIDIuNC0yLjN6Ii8+PC9zdmc+);

  /* Alternative: separate with a space:
  content: "☙ ❧";
  */

  /* Or separate with letter-spacing and padding:
  letter-spacing: 1em;
  padding-left: 1em;
  */

  /* Or asterism:
  content: "⁂";
  */

  /* Many possibilities
  content: "* * *";
  content: "· · ·";
  */
}
/* 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;
}
*/
/* FORMS */

/* Simple form layouts.
 *
 * Use the "vertical" class to make the labels sit above the input fields:
 *
 *     Label
 *     [        ]
 *
 *     [x] Checkbox
 *
 *     [Submit]
 *
 *
 * Use the "horizontal" class if you want a more "horizontal" layout:
 *
 *     Label    [       ]
 *
 *     Another  [       ]
 *
 *              [x] Checkbox
 *
 *              [Submit]
 *
 * You need to explicitly add one of the layout classes to make it easier to use
 * forms as simple UI elements.
 */


/* GENERIC STYLES */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="range"],
input[type="number"],
textarea,
select {
  font: 1em/100% sans-serif;          /* Use  sans-serif font with the default font size. */
}

textarea,
button:not(.link),
select,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) {
  padding: .6em;                       /* Chrome adds almost no padding. */
  border: 1px solid #bbb;
  border-radius: 3px;
}

textarea {
  width: 100%;                         /* Use entire width of container. */
  height: 10rem;                       /* A reasonable default height for most purposes. */
  line-height: 130%;                   /* Reduce line-height since we set a sans-serif font. */
}

button:not(.link), input[type="submit"]:not(.link) {
  color: #000;                         /* Bit more contrast. */
  cursor: pointer;                     /* Clearer it's clickable. */
  margin-left: .5em;                   /* Bit of margin generally looks better. */
  padding: .6em 1.5em;                 /* More padding for left/right. */
  background-color: #f6f5f4;           /* Background gets reset when border is set; defaults from Firefox. */
  background: linear-gradient(#f6f5f4, #edebe9);
  border: .5px outset #e9e9e9;         /* More or less the same as the Firefox border. */
  border-radius: 3px;
  border-top-color: #ccc;
  border-left-color: #ccc;
}

select {
  background-color: inherit;           /* No need for just selects to be grey. */
}

input:not(.link):focus,
button:not(.link):focus,
textarea:focus,
select:focus {                         /* Firefox removes this once you start styling */
  outline: 1px solid #00f;
  box-shadow: 0 0 .2em #00f;
  color: #000;                         /* Increase contrast a bit. */
  cursor: pointer;                     /* Clearer that you can click this. */
}

button:not(.link):hover,               /* Bit darker on hover. */
input[type="submit"]:not(.link):hover {
  background-color: #f0f0f0;
  background: linear-gradient(#f0f0f0, #d0cecc);
}
button:not(.link):active,              /* Reverse when active/clicking. */
input[type="submit"]:not(.link):active {
  background-color: #d0cecc;
  background: linear-gradient(#d0cecc, #f0f0f0);
  border-style: inset;
}

form > strong, fieldset > strong {     /* Header. */
  display: inline-block;
  margin-top: .5em;
}

form span {
  margin-left: .2em;                   /* Help text or error; so it doesn't sit flush with the input. */
}

fieldset {
  border: 1px solid /*bordercolor*/#aaa; /* More modern-looking border instead of inset or 2px. */
}

/* VERTICAL FORM */

/* TODO: optgroup? */
/* https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css */
.vertical input[type="text"],
.vertical input[type="search"],
.vertical input[type="tel"],
.vertical input[type="url"],
.vertical input[type="email"],
.vertical input[type="password"],
.vertical input[type="date"],
.vertical input[type="month"],
.vertical input[type="week"],
.vertical input[type="time"],
.vertical input[type="datetime-local"],
.vertical input[type="range"],
.vertical input[type="number"],
.vertical textarea,
.vertical select {
  display: block;                      /* One input per line. */
  min-width: 20rem;                    /* Roughly half the page. */
}

.vertical input[type="number"] {
  min-width: 10rem;                    /* Numbers don't need to be so wide. */
  width: 10rem;
}

.vertical label {
  display: block;                      /* One label per line. */
  margin-top: .5em;                    /* Clear from the previous input. */
}

/* HORIZONTAL FORM */
form.horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

form.horizontal label {
  width: 30%;
}

form.horizontal > div {
  width: 65%;
  margin-bottom: 1em;
}

form.horizontal input[type=submit],
form.horizontal button[type=submit] {
  margin-left: 35%;                    /* Align submit buttons with inputs. */
}

form.horizontal span {                 /* Help text, put below the input. */
  display: block;
  margin-left: .2em;
}
/* PERMALINK MARKERS */

/* Style permalink markers in headers. h2-h6 headers. The HTML is assumed to
 * look like:
 *
 *     <h2 id="hello">Hello, CSS! <a href="#hello"></a></h1>
 *
 * Note the space between the </a> and text matters, otherwise it will look bad
 * in text browsers.
 */
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. */
}

h1 a:after, h2 a:after, h3 a:after, h4 a:after, h5 a:after, h6 a:after {
  content: "¶";                        /* So it won't get copy/pasted. */
  /* Alternative:
  content: "🔗";
  content: "§";
  content: "[link]";
  */
}

/* Alternative: put it before the element, in the page margin. Not done for h1
 * as that's centre-aligned by default, so it looks weird. */
/*
h2, h3, h4, h5, h6 {
  position: relative;
}
h2 a, h3 a, h4 a, h5 a, h6 a {
  position: absolute;
  left: -1em;
  font-size: .8em;
  line-height: 1.6em;
}
*/
/* 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 /*bordercolor*/#aaa; /* Border to separate. */
  font-size: .9em;                     /* Slightly smaller text. */
  position: relative;                  /* So we can place the header. */

}
.postscript + .postscript {
  margin-top: 2em;                     /* Less margin for subsequent footnotes. */
}

.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;
  }
}