:root {
    --text-color: #abb2bf;
    --bg-color: #282c34;
    --heading-color: #e06c75;
    --italic-color: #98c379;
    --link-color: #61afef;
    --code-color: #c678dd;
    --time-color: #e5c07b;
    --line-height: 1.68rem;
    --font-family: 'Recursive', monospace;
    --h1-font-size: 1.75rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
  }
  
  html {
    overflow-y: scroll;
  }
  
  body {
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: var(--line-height);
    padding: 1rem;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--font-family);
  }
  
  em {
    color: var(--italic-color);
  }
  
  h1 {
    color: var(--heading-color);
    font-size: var(--h1-font-size);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 3rem;
  }
  
  h2 {
    color: var(--heading-color);
    font-size: var(--h2-font-size);
    font-weight: 700;
    margin-top: 3rem;
    line-height: 1.25;
  }
  
  h3 {
    color: var(--heading-color);
    font-size: var(--h3-font-size);
    font-weight: 700;
    margin-top: 1.5rem;
  }
  
  header {
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  footer {
    border-top: 1px solid var(--text-color);
    margin-top: 1rem;
  }
  
  a {
    color: var(--link-color);
    text-decoration: none;
  }
  
  h2 a {
    color: var(--heading-color);
  }
  
  #title {
    font-size: 1.5rem;
    color: var(--heading-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
  }
  
  #timestamp {
    color: var(--time-color);
  }
  
  #terms {
    border-top: 1px solid var(--text-color);
    padding-top: 1rem;
    margin-top: 3rem;
  }
  
  .highlight {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .highlight code {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
  }
  

  code {
    font-size: 1rem;
    font-family: 'Roboto Mono', monospace;
    color: #abb2bf;
    font-weight: 400;
    white-space: pre-wrap; 
    word-break: break-word;
  }

  pre {
    background-color: #1e1e2e;
  }
  
  img, video, audio, embed, iframe {
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--text-color);
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
  
  img[height] {
    height: auto;
  }
  
  @font-face {
    font-family: 'Recursive';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/fonts/recursive-extended.woff2) format('woff2');
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  
  @font-face {
    font-family: 'Recursive';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/fonts/recursive.woff2) format('woff2');
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }