/* Reset browser styles */
* {
  margin: 0;
  padding: 0;
  color: inherit;
  transition: background-color 200ms linear;
}
h1, h2, h3, h4 {
  font-weight: normal;
}
:root {
  /* Colors */
  --red: #f53131;
  --pink: #fac0c0;
  --dark-pink: #fac0c0;
  --black: #03030a;
  --peach: #e8b0bf;
    --white: #e8ffff;

  /* ...which change with color scheme */
  --primary-color: var(--red);
  --secondary-color: var(--pink);
  --text-color: var(--black);
  --hover-color: var(--black);

  /* Typography */
  --serif-font:  adobe-caslon-pro, palatino;
  --sans-serif-font: sans-serif;

  --x-large-text: 108px;
  --large-text: 48px;
  --medium-text: 37px;
  --small-text: 24px;
  --x-small-text: 20px;
  --xx-small-text: 18px;
  --xxx-small-text: 16px;
  --xxxx-small-text: 12px;

  --font-size: var(--x-small-text);;

  --leading: 1.4;
  --baseline: calc(var(--leading) * var(--font-size));
  --halfline: calc(var(--baseline) / 2);
  --row-size: calc(var(--baseline) * 2);
  
  --font: var(--font-size)/var(--leading) var(--serif-font);
  --alignment: right;

  /* Layout */
  --content-width: 1150px;
  --container-width: 92%;

  --columns: 3fr 8fr 1fr;
}
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    }
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    span.underline{text-decoration: underline;}
    div.column{display: inline-block; vertical-align: top; width: 50%;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    pre > code.sourceCode {
      white-space: pre-line;
      position: relative;
      color: #333;
      background-color: #222;
      color: #dedede;
    }
    pre > code.sourceCode.markdown { white-space: pre-line; position: relative; }
    pre > code.sourceCode { white-space: pre; position: relative; }
    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
    pre > code.sourceCode > span:empty { height: 1.2em; }
    .sourceCode { overflow: visible; }
    code.sourceCode > span { color: inherit; text-decoration: inherit; }
    pre.sourceCode { margin: 0; }
    @media screen {
    div.sourceCode { overflow: auto; }
    }
    pre.numberSource code
      { counter-reset: source-line 0; }
    pre.numberSource code > span
      { position: relative; left: -4em; counter-increment: source-line; }
    pre.numberSource code > span > a:first-child::before
      { content: counter(source-line);
        position: relative; left: -1em; text-align: right; vertical-align: baseline;
        border: none; display: inline-block;
        -webkit-touch-callout: none; -webkit-user-select: none;
        -khtml-user-select: none; -moz-user-select: none;
        -ms-user-select: none; user-select: none;
        padding: 0 4px; width: 4em;
        color: #aaaaaa;
      }
      pre.numberSource { margin-left: 2em;   padding-left: 4px; }

    div.sourceCode
      {   }
    @media screen {
    }
    code span.al { color: #ff0000; font-weight: bold; } /* Alert */
    code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
    code span.at { color: #7d9029; } /* Attribute */
    code span.bn { color: #40a070; } /* BaseN */
    code span.bu { } /* BuiltIn */
    code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #4070a0; } /* Char */
    code span.cn { color: #880000; } /* Constant */
    code span.co { color: #60a0b0; font-style: italic; } /* Comment */
    code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
    code span.do { color: #ba2121; font-style: italic; } /* Documentation */
    code span.dt { color: #902000; } /* DataType */
    code span.dv { color: #40a070; } /* DecVal */
    code span.er { color: #ff0000; font-weight: bold; } /* Error */
    code span.ex { } /* Extension */
    code span.fl { color: #40a070; } /* Float */
    code span.fu { color: #6495ed; } /* Function */
    code span.im { } /* Import */
    code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
    code span.kw { color: #007020; font-weight: bold; } /* Keyword */
    code span.op { color: #666666; } /* Operator */
    code span.ot { color: #007020; } /* Other */
    code span.pp { color: #bc7a00; } /* Preprocessor */
    code span.sc { color: #4070a0; } /* SpecialChar */
    code span.ss { color: #bb6688; } /* SpecialString */
    code span.st { color: #4070a0; } /* String */
    code span.va { color: #19177c; } /* Variable */
    code span.vs { color: #4070a0; } /* VerbatimString */
    code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
.underline-primary {
  border-bottom: 2px solid var(--primary-color);
}
h1 {
  font-size: var(--large-text);
  font-weight: 700;
  line-height: 1.06em;
  font-style: italic;
  display: inline-block;
}
h2 {
  font-size: var(--large-text);
  font-weight: normal;
  line-height: 1.2em;
  display: inline-block;
}
.serif h2, .serif h3 {
  font-style: italic;
}
h3 {
  font-size: var(--small-text);
  line-height: 1.1em;
  display: inline-block;
  font-weight: 700;
}
h4 {
  font-size: var(--font-size);
  font-weight: 700;
  line-height: 1.1em;
  display: inline-block;
}
p {
  max-width: 65ch;
}
.nospace,
.nospace  code.sourceCode {
  white-space: normal !important;
}
nav {
  margin: var(--halfline) 0 var(--baseline);
}
.summary {
  font-size: var(--x-small-text);
  font-style: italic;
}
nav h2 {
  margin: 0;
}
h1, h2, h3, h4 {
  margin-top: var(--baseline);
}
.entry .note {
  padding-bottom: 2px;
  font-size: var(--x-small-text);
  display: inline-block;
}
body, html {
  background-color: var(--secondary-color);
  color: var(--text-color);
  font: var(--font);

  font-variant: common-ligatures, oldstyle-nums;
}
.serif {
  --font: var(--small-text)/var(--leading) var(--serif-font);
}

a, a:visited {
  color: var(--text-color);
}
header h1 {
  margin: 0;
}
header .date {
  font-size: 16px;
  line-height: var(--baseline);
}
nav a, a:visited {
  color: inherit;
}
.clear {
  text-decoration: none;
  color: inherit;
}
.sans-serif {
  --font: var(--x-small-text)/var(--leading) var(--sans-serif-font);
}
.dark {
  --pink: #e097ac;
  --hover-color: var(--red);
  --primary-color: var(--pink);
  --secondary-color: var(--black);
  --text-color: var(--pink);
}
@media (prefers-color-scheme: dark) {
  :root {
    --pink: #e097ac;
    --red: #e097ac;

    --hover-color: var(--red);
    --primary-color: var(--white);
    --secondary-color: var(--black);
    --text-color: var(--white);
  }
  a  {
    color: var(--pink);
  }
}
/* Layout primitives */
.container {
  width: var(--content-width);
  max-width: var(--container-width);
  margin: 0 auto;
}
.content {
  padding-top: var(--row-size);
  padding-bottom: var(--row-size);
}
.layout-grid {
  display: grid;
  grid-template-columns: var(--columns);
  grid-auto-rows: minmax(var(--row-size), max-content);
}
.grid {
  display: grid;
  grid-auto-rows: minmax(var(--baseline), max-content);
  grid-gap: var(--halfline);
}
.sm-grid {
  display: grid;
  grid-auto-rows: minmax(var(--row-size), max-content);
}
.info {
  grid-row: 4;
}
.hidden-lg {
  opacity: 0;
}
.hidden-sm {
  opacity: 1;
}
.hidden {
  display: none;
}
header {
  display: grid;
    //gap: var(--halfline);
}
.align-end {
  align-self: end;
}
[onclick]:hover, a:hover {
  cursor: pointer;
}
main.entry article {
  padding-top: 60px;
}
/* loading animation */
@keyframes fadeIn { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}
.fade-in {
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}
.stunted {
  max-width: 5ch;
}
.entry.header.grid {
  grid-template-rows: 40px 120px 120px;
}
.back {
  font-size: var(--x-small-text);
  color: var(--text-color);
}
.back:hover {
  cursor: pointer;
  color: var(--hover-color);
  background-color: var(--secondary-color);
  border-radius: 50%;
}
@media (max-width: 960px) {
  :root {
    --columns: 1fr;
    --alignment: left;
    //--x-large-text: 15vw;
    --large-text: 7.5vw;
    --leading: 1.4;
    --font-size: var(--xx-small-text);;
  }
  h1 {
    font-size: var(--large-text);
  }
  h2 {
    font-size: var(--medium-text);
    font-weight: normal;
  }
  h3 {
    font-size: var(--small-text);
  }
  .hidden-lg {
    opacity: 1;
  }
  .hidden-sm {
    opacity: 0;
  }
  .layout-grid {
    grid-gap: var(--baseline);
  }
  .info {
    display: none;
  }
  #entries.grid {
    display: block;
  }
  .entry h1 {
    padding-top: 11px;
  }
  .entry.header.grid {
    grid-template-rows: 40px minmax(100px, max-content) 60px;
  }
  .content {
    padding-top: 20px;
  }
  #entries .entry, #entries .title {
    display: inline;
  }
  #entries .entry .title:after {
    content: '?';
    font-style: normal;
    display: inline-block; 
    margin: 0px -1px 0px 5px;
    color: var(--red);
  }
  #entries .entry:last-child .title::after {
    content: '';
  }
}
svg {
  fill: var(--primary-color);
}
svg:hover {
  fill: var(--hover-color);
}
.icon-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 3.5ch;
  padding-top: var(--baseline);
}
.icon-nav > * {
  cursor: pointer;
}
.disclaimer {
  font-size: 0.7rem;
  font-size: var(--x-small-text);
  margin: 3rem 0;
  color: var(--peach);
  opacity: 0.9;
}
.disclaimer i {
  display: inline-block;
  margin-left: 2px;

}
div.sourceCode {
  border-radius: 3px;
  background: #eee;
  padding: 0 5px 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border: 1px solid #484848;

  background-color: #222;
  color: #dedede;
}
code, div.sourceCode  code {

  background-color: #eee;
  color: #333;

  background-color: #222;
  color: #dedede;

  border-radius: 3px;
  padding: 2px 3px;
  font-size: 14px !important;
  -webkit-text-size-adjust: none;
  font-family: monaco, monospace;
}
code {
  border: 1px solid #484848;
  border-radius: 3px;
}
.sourceCode code {
  border: none;
}
.sourceCode code > span:first-child {
  margin-left: -3px;
}
.numberSource code > span:first-child {
  left: calc(-4em - 3px);
  margin-left: 0;
}
ul {
  padding-left: 1rem;
}
hr {
  border: none;
  border-top: 1px solid var(--text-color);;
  margin: var(--halfline) 2px;
}
abbr {
  font-variant-caps: all-petite-caps;
}
.banner {
  margin: var(--halfline) auto var(--baseline);
  word-spacing: var(--baseline);
  font-style: normal;
  font-size: var(--x-small-text);
  text-align: center;
  color: inherit;
}
a.tablet, 
.tablet {
  border: 1px solid var(--black);
  display: inline-block;
  border-radius: 30px;
  padding: 4px 10px;
  font-size: var(--xxx-small-text);
  padding-top: 7px;
  line-height: 25px;
  height: 25px;
  font-style: italic;
  color: var(--black);
  background-color: var(--pink);
}