@font-face {
  font-family: 'iA Writer Duo';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/iAWriterDuoS-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/iAWriterDuoS-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'iA Writer Duo';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/iAWriterDuoS-Italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/iAWriterDuoS-Italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

strong {
  font-weight: bold;
  font-family: 'iA Writer Duo Bold', 'Courier New Bold', 'Courier Bold', monospace;
}

body {
    line-height: 1.4;
    margin: 1.8em;
}

h3 {
  margin-top: 2em;
  display: block;
  font-size: 125%
}

p {
  margin-block-end: 1.5em;
}

@media only screen and (min-width: 80ch) {
  body {
    max-width: 80ch;
  }
}
h3 {
  display: inline-block;
  background-color: yellow;
}


body, pre, p {
  font-family: 'iA Writer Duo', 'Courier New', 'Courier', monospace;
  font-size: 13px;
  font-style: normal;
}

ul {
  list-style-type: none;
  padding-bottom: .6em;
  padding-left: 0;
}

li {
  margin: .3em;
}

li::before {
  content: "/// "
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
}

h1 {
    font-size: 225%;
}

h2 {
    font-size: 175%;
}

h1::before, h2::before {
  content: "/// ";
}

a {
    color: black;
    text-decoration: none;
    border-bottom: 1px black dotted;
}

@media (prefers-color-scheme: dark) {
  h3 {
/*    background-color: dimgray;*/
    color: black;
/*    display: block;*/
  }
  a {
    color: white;
    border-bottom: 1px white dotted;
  }
  body {
    background-color: black;
    color: white;
  }
}


p {
  /* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

}

img {
    width: 100%;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0 0 50px 0;
}

header nav li {
  margin: .5em 0 0 0;
}

header li {
    /* display: block; */
    margin: 0 8px 0 0;
    padding: 0;
}

footer {
  margin-bottom: 10em;
}