@font-face {
  font-display: swap;
  font-family: MyScreenFont;
  src: url("/assets/fonts/SourceSerif4Variable-Roman.ttf.subset.woff2") format("woff2");
  font-weight: 200 900;
}
@font-face {
  font-display: swap;
  font-family: MyScreenFont;
  src: url("/assets/fonts/SourceSerif4Variable-Italic.ttf.subset.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
}
@font-face {
  font-display: swap;
  font-family: MyMonoFont;
  src: url("/assets/fonts/SudoVar-Regular.woff2") format("woff2");
}
:root {
  --main-bg-color: 190deg, 87%, 83%;
  --main-text-color: 0deg, 0%, 13%;
  --bg-horizon-color: 0deg, 0%, 38%;
  --bg-var-color: 0deg, 0%, 13%;
  --nav-bg-fallback-color: #0025ca;
  --nav-bg-l-color: oklch(40% 0.245 264);
  --nav-bg-r-color: oklch(69% 0.245 142);
  --nav-link-color: rgba(255, 255, 255, 0.96);
  --nav-link-bg-color: rgba(255, 255, 255, 0.2);
  --nav-link-bg-hover-color: rgba(255, 255, 255, 0.8);
  --nav-link-hover-color: #000;
  --container-bg: rgba(255, 255, 255, 0.5);
  --wtf-bg: rgba(255, 255, 255, 0.85);
  --red-color: rgba(186, 0, 0, 0.65);
  --headline-color: rgba(0, 0, 0, 0.6);
  --tt-color: #004060;
  --link-color: #ba0000;
  --link-color-hover: #de0000;
  --link-color-active: #fff;
  --link-bg-hover: rgba(255, 255, 255, 0.6);
  --figure-bg: rgba(255, 255, 255, 0.8);
  --screenshot-bg: #fff;
  /* Syntax highlighting */
  --code-bg: #fff;
  --code-color-comment: #088;
  --code-color-rule: #088;
  --code-color-element: #088;
  --code-color-keyword: #088;
  --code-color-prop: #088;
}

html {
  min-height: 100%;
}

body {
  background-blend-mode: multiply;
  background-image: linear-gradient(to bottom, hsl(var(--main-bg-color)), hsl(var(--bg-horizon-color)) 80%, hsl(var(--bg-var-color)));
  color: hsl(var(--main-text-color));
  font-family: MyScreenFont, Georgia, serif;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "pnum" 1;
  font-size: 18px;
  hyphens: auto;
  line-height: 1.5em;
  margin: 0;
  padding: 0 0 10em;
}

nav {
  background-blend-mode: multiply;
  background-color: var(--nav-bg-fallback-color);
  background: linear-gradient(12deg, var(--nav-bg-l-color), var(--nav-bg-r-color)), linear-gradient(178deg, oklch(100% 0 142deg / 0.6) 0%, oklch(80% 0.3 62deg / 0.9));
  font-family: MyScreenFont;
  font-size: 1em;
  line-height: 2em;
  margin: 0;
  padding: 0.2em 2em 0.3em;
}
nav.site a, nav.category a {
  border-radius: 0.4em;
  padding: 0.2em 0.4em 0.3em;
  text-decoration: none;
  transition-duration: 300ms;
  transition-property: background-color, color;
  transition-timing-function: ease-in;
}
nav.site a:link, nav.site a:visited, nav.site a:active, nav.category a:link, nav.category a:visited, nav.category a:active {
  color: var(--nav-link-color);
}
nav.site a:hover, nav.category a:hover {
  background-color: var(--nav-link-bg-hover-color);
  color: var(--nav-link-hover-color);
}
nav.site.home a.home:link, nav.site.fonts a.fonts:link, nav.site.articles a.articles:link, nav.site.code a.code:link, nav.category.home a.home:link, nav.category.fonts a.fonts:link, nav.category.articles a.articles:link, nav.category.code a.code:link {
  background-color: var(--nav-link-bg-color);
}
nav.site.home a.home:hover, nav.site.fonts a.fonts:hover, nav.site.articles a.articles:hover, nav.site.code a.code:hover, nav.category.home a.home:hover, nav.category.fonts a.fonts:hover, nav.category.articles a.articles:hover, nav.category.code a.code:hover {
  background-color: var(--nav-link-bg-hover-color);
  color: var(--nav-link-hover-color);
}
nav.category {
  padding-left: 8.475em;
}
nav.page-nav {
  background: var(--container-bg);
  border-radius: 0.125em;
  float: right;
  font-family: Tahoma, Verdana, sans-serif;
  margin-right: -18em;
  padding: 0;
  position: sticky;
  top: 1em;
  width: 16em;
}
nav.page-nav h3 {
  font-size: 1em;
  margin: 0.7em 0 0.5em 0.65em;
}
nav.page-nav ul {
  margin-left: 2em;
  margin-right: 0;
  padding: 0;
}
nav.page-nav li {
  font-size: 0.9em;
  letter-spacing: 0.04em;
  word-spacing: -0.075em;
}

main {
  background: var(--container-bg);
  border-radius: 0.125em;
  margin: 0 2.3rem;
  max-width: 42em;
  padding: 0.87em 1em 2.5em;
}
main p,
main ul {
  line-height: 1.5em;
  margin: 0 3.5em 1em 4em;
  max-width: 40em;
}

blockquote {
  background: hsla(var(--bg-var-color)/10%);
  background-blend-mode: multiply;
  background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.86), hsla(0, 0%, 100%, 0.86));
  border: 1px solid hsla(var(--bg-var-color)/20%);
  border-radius: 0.15em;
  margin: 0 3.6em 1em;
  padding: 1.1em 3em 0.75em;
  transition: background 0.5s, border 0.5s;
}
blockquote p {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.75em;
  letter-spacing: 0.04em;
  margin: 0 0 0.75em;
  word-spacing: -0.05em;
}
blockquote p.original {
  color: hsl(0, 0%, 30%);
  font-style: italic;
}

.caps {
  font-feature-settings: "c2sc";
  letter-spacing: 0.075em;
  word-spacing: 0.2em;
}

.nh {
  -webkit-hyphens: none;
  hyphens: none;
}

.red {
  color: var(--red-color);
}

h1,
h2,
h3 {
  color: var(--headline-color);
  font-family: MyScreenFont, Verdana, sans-serif;
  font-feature-settings: "ss02" 1;
  font-size: 4em;
  font-weight: 800;
  line-height: 0.85em;
  margin: 0 0 0.4em;
  max-width: 10em;
  padding: 0;
  word-spacing: 0.075em;
}

h2 {
  font-size: 3em;
  margin-top: 0.8em;
  max-width: 13.33em;
  padding: 0;
}

h3 {
  font-size: 2em;
  margin-bottom: 0.55em;
  margin-top: 1.2em;
  max-width: 20em;
}

tt {
  color: var(--tt-color);
  font-family: Sudo, Consolas, Courier, monospace;
}

li {
  max-width: 38em;
}

ul {
  margin-left: 2.55em;
}
ul.narrow {
  columns: 3;
}

a {
  margin: 0;
  padding: 0.2em 0;
}
a:link, a:visited {
  color: var(--link-color);
}
a:hover {
  background-color: var(--link-bg-hover);
  color: var(--link-color-hover);
}
a:active {
  color: var(--link-color-active);
}
a.footnote {
  background: var(--figure-bg);
  border-radius: 0.2em;
  margin-left: 0.25em;
  padding: 0 0.25em;
  text-decoration: none;
}
a.footnote:hover {
  background: var(--link-color-hover);
  color: var(--link-bg-hover);
}

address {
  font-style: normal;
  font-weight: normal;
}

figure {
  margin: 0 0 1em;
  max-width: 100%;
  padding: 0;
}
figure figcaption {
  font-size: 14px;
  letter-spacing: 0.025em;
  line-height: 1.35rem;
  padding: 0.2rem 0 0.5rem;
  word-spacing: 0.1em;
}
figure img {
  background: var(--figure-bg);
  max-width: 100%;
}
figure.small img {
  max-width: 50%;
}

em {
  font-style: italic;
  letter-spacing: 0.025em;
  word-spacing: -0.05em;
}

.transparent img {
  background: transparent;
}

table {
  border-collapse: collapse;
  margin: 2em 3.6em;
  padding: 0;
}
table p {
  margin-bottom: 0;
}
table thead th {
  border-bottom: 0.15em solid #909090;
  border-right: 0;
  padding-left: 1em;
}
table thead th:first-child {
  border-right: 0.15em solid #909090;
  padding-left: 0;
}
table td,
table th {
  font-feature-settings: "lnum", "tnum";
  font-size: 0.81em;
  line-height: 1.4em;
  margin: 0;
  padding: 0.3em 1em 0.4em 0;
  text-align: left;
  vertical-align: top;
}
table td.cnt,
table th.cnt {
  text-align: center;
}
table td.num,
table th.num {
  text-align: right;
}
table td:last-child,
table th:last-child {
  padding-right: 0;
}
table td {
  padding-left: 1em;
}
table th {
  border-right: 0.15em solid #909090;
  font-style: normal;
  font-weight: normal;
}

#cj p {
  font-size: 0.9em;
  margin-left: 1em;
  max-width: 32em;
}

pre {
  background-color: var(--code-bg);
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 0.75em;
  padding: 1em;
}

.comment {
  color: var(--code-color-comment);
}

.rule {
  color: var(--code-color-rule);
}

.element {
  color: var(--code-color-element);
}

.keyword {
  color: var(--code-color-keyword);
}

.prop {
  color: var(--code-color-prop);
}

#lol,
#wtf,
#ftw {
  background: transparent;
  left: 1976px;
  position: absolute;
  top: 0;
  width: 120px;
}

#lol {
  top: 4em;
}
#lol p {
  margin: 0;
}
#lol p a:link {
  padding: 0;
}

#wtf,
#ftw {
  font-size: 1em;
  left: 48em;
  opacity: 0.1;
  position: absolute;
  top: 4em;
  transition: opacity 2s ease;
  width: 30em;
}

#wtf:hover {
  background: var(--wtf-bg);
  opacity: 0.8;
  transition: opacity 1s ease;
}

#ftw {
  padding: 0;
  top: 4em;
}
#ftw:hover {
  opacity: 0.8;
  transition: opacity 1s ease;
}

@media only screen and (max-width: 480px) {
  body {
    font-weight: 450;
    line-height: 1.36em;
    padding: 0 0 10em;
    width: 100%;
  }
  body main {
    background: var(--container-bg);
    margin: 0;
    padding: 0.5em 0;
  }
  body main p,
  body main ul {
    margin: 0 0.5em 0.68em 0.9em;
  }
  body main ul {
    margin-left: 0;
  }
  body main li {
    margin: 0 0 0.68em;
  }
  blockquote {
    margin: 1em;
    padding-left: 1.25em;
    padding-right: 1em;
  }
  p,
  ul {
    margin: 0 0.1em 0.68em 1em;
  }
  li {
    margin: 0 0 0.68em;
  }
  nav {
    font-size: 1em;
    hyphens: none;
    margin: 0;
    padding-left: 0.35em;
  }
  nav.category {
    margin: 0;
    padding-left: 0.5em;
  }
  figure {
    letter-spacing: 0.025em;
    margin: 0 0 1em;
    padding: 0;
    text-align: left;
  }
  figure.transparent {
    margin: 0 1em 1em;
  }
  figure img {
    margin: 0;
    max-width: 100%;
    padding: 0;
  }
  figure figcaption {
    font-size: 0.81em;
    margin: 0 1.21rem;
  }
  table {
    margin: 1.36em 1em;
  }
  table td,
  table th {
    font-size: 0.81em;
    line-height: 1.36em;
    padding: 0 1.36em 0.68em 0;
  }
  h1 {
    font-size: 2.9em;
    line-height: 1em;
    margin-left: 0.32em;
  }
  h2 {
    font-size: 2.2em;
    line-height: 1em;
    margin-left: 0.45em;
  }
  h3 {
    font-size: 1.5em;
    line-height: 1em;
    margin-left: 0.6em;
  }
  #lol,
  #wtf,
  #ftw {
    display: none;
  }
}
@media only screen and (max-width: 50em) {
  ul.narrow {
    columns: 2;
  }
}
@media only screen and (max-width: 38em) {
  ul.narrow {
    columns: 1;
  }
}
@media only screen and (max-width: 70em) {
  nav.page-nav {
    float: none;
    margin-left: 3em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    position: relative;
  }
}
@media only screen and (max-width: 101em) {
  #wtf,
  #ftw {
    display: none;
  }
}
@media only screen and (max-width: 2100px) {
  #lol {
    display: none;
  }
}

/*# sourceMappingURL=2013.css.map */