/* -*- css-indent-offset: 2; -*- */
@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

html, body {
  line-height: 1;
  font-size: 18px;
}

body {
  background-color: #ffffea;
  color: #383838;
  padding: 1rem;
}

#wrapper>header>nav>ul {
  padding: 0;
  list-style: none;
}

#wrapper>header>nav>ul li {
  display: inline-block;
  margin: 3px 20px;
}

#wrapper>header>nav>ul li:first-of-type {
  margin-left: 0;
}

#wrapper>header>nav>ul li a {
  text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

#wrapper {
  max-width: 840px;
  margin: 0 auto;
}

body > header {
  max-width: 840px;
  margin: 0 auto;
}

body > header > nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body > header > nav li {
  display: inline;
  margin-right: 20px;
}

[data-title~=":"] {
  display: none;
}

.heading {
  margin-bottom: 30px;
}

h1.main-title::after {
  content: '-----------------------------------------------------------------';
}

p.subtitle {
  font-style: italic;
  font-size: 120%;
  margin: 0;
}


body main {
  margin: 0 auto;
  max-width: 840px;
}

article {
  margin-bottom: 30px;
}

h2::before, h3::before, h4::before, h5::before, h6::before {
  font-family: monospace;
}

h2::before { content: "## "; }
h3::before { content: "### "; }
h4::before { content: "#### "; }
h5::before { content: "##### "; }
h6::before { content: "###### "; }

h1 {
  position: relative;
  display: table-cell;
  padding: 20px 0 30px;
  margin: 0;
  overflow: hidden;

  font-size: 200%;
}

/* a cool hack stolen from blog.soykaf.com */
h1::after, h2.fragment::after {
  /* should be long enough */
  content: '=================================================================';
  position: absolute;
  bottom: 0px;
  left: 0;
  white-space: nowrap;
  font-family: monospace;
}

h2.fragment {
  position: relative;
  display: table-cell;
  padding: 20px 0 20px;
  margin: 0;
  overflow: hidden;
}

h2.fragment::after {
  content: '-----------------------------------------------------------------';
  font-family: monospace;
  z-index: -1;
}

h2.fragment::before {
  content: '';
}

h1::after, h2::before, h3::before, h4::before, h5::before, h6::before {
  /* color: hsla(0, 0%, 36%, 1); */
  color: #242424;
}

h1>a, h2.fragment>a {
  text-decoration: none;
}

h1>a:hover, h2.fragment>a:hover {
  text-decoration: underline;
}

h2, h3, h4, h5, h6 {
  margin: 2rem 0 1rem;
}

h2 {
  font-size: 180%;
}

h3 {
  font-size: 160%;
}

h4 {
  font-size: 140%;
}

h5 {
  font-size: 120%;
}

h6 {
  font-size: 100%;
}

ul.tags {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.tags::before {
  content: 'tagged with: ';
}

ul.tags li {
  display: inline-block;
  margin: 0 5px;
}

header > p {
  margin: 0;
}

p {
  margin: 1rem 0;
  text-align: justify;
  hyphens: auto;
  white-space: pre-wrap;
}

p, li {
  line-height: 1.7;
}

p.link::before {
  content: ' => ';
  font-family: monospace;
}

a {
  text-decoration: none;
  color: #4b4baf;
}

a:hover {
  text-decoration: underline;
}

/* other bit stolen from blog.soykaf.com */
a[href*="://"]::after, a[rel*="external"]::after {
  content: " "url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}

ul, ol {
  padding-left: 30px;
  list-style: disc;
}

ol {
  list-style: decimal;
}

code {
  color: #971174;
}

pre {
  position: relative;
  padding: 20px;
  overflow-x: auto;
  border-width: 1px;
  border-color: #999999;
  border-style: solid;
  border-radius: 3px;
  line-height: 1.4;
  background-color: #fdf6e3;
  color: #333;
}

pre, code {
  font-family: monospace;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

hr {
  border: 0;
  height: 1px;
  background-color: hsla(0, 0%, 25%, 1);
  width: 70%;
  margin: 2rem auto;
}

blockquote, q {
  quotes: none;
}

blockquote {
  border-left: 3px solid hsla(113, 80%, 45%, 1);
  padding-left: 10px;
  font-style: italic;
}

blockquote em {
  font-style: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

figure figcaption {
  padding: 5px 0;
  text-align: center;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

nav.post-navigation {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
}

nav.post-navigation a.next {
  margin-left: auto;
}

footer {
  border-top: 1px solid #e6e0e0;
  margin-top: 100px;
  padding-top: 10px;
  font-style: italic;
  text-align: center;
}

footer p {
  margin: 0;
}


/* dark theme */
@media (prefers-color-scheme: dark) {
  body {
    color: #ffffea;
    background-color: #383838;
  }

  h1::after, h2.fragment::after {
    color: #5c5c5c;
  }

  h2::before, h3::before, h4::before, h5::before, h6::before {
    color: #5c5c5c;
  }

  a {
    color: #8e8eff;
  }

  code {
    color: #ea7acd;
  }

  pre {
    border-color: #999999;
    background-color: #2f2e2d;
  }

  pre {
    color: #ffffea;
  }
}