* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

/* ************************************************************************* */
/*                                   FONTS                                   */
/* ************************************************************************* */

/* fira-code-regular - latin */
@font-face {
  font-display: fallback;
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fira-code-v27-latin-regular.woff2') format('woff2');
}
/* fira-code-700 - latin */
@font-face {
  font-display: fallback;
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/fira-code-v27-latin-700.woff2') format('woff2');
}

/* fira-mono-regular - latin */
@font-face {
  font-display: fallback;
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fira-mono-v16-latin-regular.woff2') format('woff2');
}
/* fira-mono-700 - latin */
@font-face {
  font-display: fallback;
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/fira-mono-v16-latin-700.woff2') format('woff2');
}

/* ************************************************************************* */
/*                                 VARIABLES                                 */
/* ************************************************************************* */
:root {
  --font-family: 'Fira Code', 'Fira Mono', Consolas, monaco, monospace;
  --code-font-family: 'Fira Mono', Consolas, monaco, monospace;
  --font-size: 14px;
  --line-height: 20px;

  /* custom foredge content for headings, blockquotes, etc */
  --prespace: " "; /* space before content */

  --cbh: "#"; /* content before headings */
  --cbbq: ">"; /* content before blockquotes */
  --cbp: "¶"; /* content before paragraphs */
  --cbcb: "/"; /* content before code blocks */
  --cbhr: "§"; /* content before horizontal rules */
  --cbdl: ":="; /* content before definition lists */

  --cbh-opacity: 0.6; /* opacity of content before headings */
  --cbbq-opacity: 0.8; /* opacity of content before blockquotes */
  --cbp-opacity: 0; /* opacity of content before paragraphs */
  --cbcb-opacity: 0; /* opacity of content before code blocks */
  --cbhr-opacity: 0; /* opacity of content before horizontal rules */
  --dbdl-opacity: 0; /* opacity of content before definition lists */

  /* Dark Mode Colors */
  --d-bg: rgb(0,0,0); /* dark mode background color */
  --d-bt: rgb(255, 255, 255); /* dark mode body text color */
  --d-ht: rgb(255, 255, 255); /* dark mode heading color */
  --d-bqt: rgb(255, 255, 255, 0.75); /* dark mode blockquote text color */
  --d-bqb: rgba(255, 255, 255, 0.25); /* dark mode blockquote border color */
  --d-un: rgba(255, 255, 255, 0.5); /* dark mode underlines color */
  --d-hr: rgba(255, 255, 255, 0.25); /* dark mode horizontal rule color */
  --d-cbbg: rgb(255, 255, 255, 0.15); /* dark mode code block background color */
  --d-dldt: rgb(255, 255, 255, 0.95); /* dark mode definition list term color */
  --d-dldd: rgb(255, 255, 255, 0.85); /* dark mode definition list description color */
  --d-tbl: rgb(255, 255, 255, 0.4); /* dark mode table (outer) border color */
  --d-th: rgb(255, 255, 255, 0.1); /* dark mode table header border color */
  --d-tr: rgb(255, 255, 255, 0.1); /* dark mode table row border color */
  --d-thbg: rgb(255, 255, 255, 0.1); /* dark mode table header background color */

  /* Light Mode Colors */
  --l-bg: rgb(255, 255, 255); /* light mode background color */
  --l-bt: rgb(0, 0, 0); /* light mode body text color */
  --l-ht: rgb(0, 0, 0); /* light mode heading color */
  --l-bqt: rgb(0, 0, 0, 0.85); /* light mode blockquote text color */
  --l-bqb: rgba(0, 0, 0, 0.25); /* light mode blockquote border color */
  --l-un: rgba(0, 0, 0, 0.5); /* light mode underlines color */
  --l-hr: rgba(0, 0, 0, 0.25); /* light mode horizontal rule color */
  --l-cbbg: rgb(0, 0, 0, 0.05); /* light mode code block background color */
  --l-dldt: rgb(0, 0, 0, 0.95); /* light mode definition list term color */
  --l-dldd: rgb(0, 0, 0, 0.85); /* light mode definition list description color */
  --l-tbl: rgb(0, 0, 0, 0.4); /* light mode table (outer) border color */
  --l-th: rgb(0, 0, 0, 0.1); /* light mode table header border color */
  --l-tr: rgb(0, 0, 0, 0.1); /* light mode table row border color */
  --l-thbg: rgb(0, 0, 0, 0.1); /* light mode table header background color */

  
  /* Horizontal Rule Content (ie, what text to display *as* a HR) */
  --hr-content: "─────── § ───────"; /* the content of the horizontal rule itself */
}

/* ************************************************************************* */
/* ******************** COLOR SCHEMES VIA @MEDIA PREFER ******************** */
/* ************************************************************************* */

@media (prefers-color-scheme: light) {
  body {
    color: var(--l-bt);
    background-color: var(--l-bg);
    background: var(--l-bg);
  };

  h1, h2, h3, h4, h5, h6 {
    color: var(--l-ht);
}

  a {
    border-bottom: 1px solid var(--l-un);
  }

  a:hover {
    border-bottom: 1px solid var(--l-bt);
  }

  blockquote {
    color: var(--l-bqt);
  }

  em, strong {
    color: inherit;
  }

  hr {
    color: var(--l-hr);
  }

  pre {
    background-color: var(--l-cbbg);
  }
  p code, li code {
    background-color: var(--l-cbbg);
  }

  dt {
    color: var(--l-dldt);
  }
  dd {
    color: var(--l-dldd);
  }

  table {
    border: 1px solid var(--l-tbl);
  }

  th {
    font-style: normal;
    border: 1px solid var(--l-th);
    background-color: var(--l-thbg);
  }

  tr {
    border: 1px solid var(--l-tr);
  }

}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--d-bt);
    background-color: var(--d-bg);
    background: var(--d-bg);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--d-ht);
  }

  a {
    border-bottom: 1px solid var(--d-un);
  }

  a:hover {
    border-bottom: 1px solid var(--d-bt);
  }

  blockquote {
    color: var(--d-bqt);
  }

  em, strong {
    color: inherit;
  }

  hr {
    color: var(--d-hr);
  }

  pre {
    background-color: var(--d-cbbg);
  }
  p code, li code {
    background-color: var(--d-cbbg);
}
dt {
    color: var(--d-dldt);
  }
  dd {
    color: var(--d-dldd);
  }

  table {
    border: 1px solid var(--d-tbl);
}

  th {
    font-style: normal;
    border: 1px solid var(--d-th);
    background-color: var(--d-thbg);
}

    tr {
        border: 1px solid var(--d-tr);
    }

}

/* ************************************************************************* */
/*                                BASIC STYLE                                */
/* ************************************************************************* */

/* CONTENT SPACING & POSITIONING ******************************************* */

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-wrapper {
    width: 100%;
    max-width: 820px;
    overflow-x: hidden;
    /* Remove padding from here */
    margin: 0 auto;
}

.content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(20px, 3vh, 200px) clamp(20px, 5vw, 60px);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: normal;
    font-style: normal;
    font-family: var(--font-family);
    word-wrap: break-word;
}

/* Simplify the media query */
@media (max-width: 820px) {
    .content {
        padding: clamp(20px, 3vh, 200px) clamp(20px, 5vw, 60px);
    }
}

/* STYLING NORMAL ELEMENTS ************************************************* */
/* Note: liberal use of '::before' to prefix content into foredge */

/* the most boring possible paragraph/body text */
p {
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: normal;
    position: relative;
}

p::before {
    content: var(--cbp) var(--prespace);
    opacity: var(--cbp-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
}

/* Reset heading styles to match body text */
h1, h2, h3, h4, h5, h6 {
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: normal;
    position: relative;
  }

/* Add a bit of non-optional boldness to H1–3 headings */
h1, h2, h3 {
    font-weight: bold;
}

/* Add '#' prefixes but with consistent spacing */
h1::before {
    content: var(--cbh) var(--prespace);
    opacity: var(--cbh-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
  }

h2::before {
    content: var(--cbh) var(--cbh) var(--prespace);
    opacity: var(--cbh-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
  }
  
  h3::before {
    content: var(--cbh) var(--cbh) var(--cbh) var(--prespace);
    opacity: var(--cbh-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
  }
  
  h4::before {
    content: var(--cbh) var(--cbh) var(--cbh) var(--cbh) var(--prespace);
    opacity: var(--cbh-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
  }
  
  h5::before {
    content: var(--cbh) var(--cbh) var(--cbh) var(--cbh) var(--cbh) var(--prespace);
    opacity: var(--cbh-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
  }
  
  h6::before {
    content: var(--cbh) var(--cbh) var(--cbh) var(--cbh) var(--cbh) var(--cbh) var(--prespace);
    opacity: var(--cbh-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
    font-weight: normal;
  }
  
img {
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none;
}

cite {
    font-style: inherit;
}



/* BLOCKQUOTES ------------------------------------- */
blockquote {
    margin: 0;
    position: relative;
    padding-left: 2ch;
}

/* pseudo element before block quote to display a `>` inline */
blockquote p::before {
  content: var(--cbbq) " ";
  opacity: var(--cbbq-opacity);
  position: absolute;
  right: 100%;
  white-space: pre;
}



/* LISTS ------------------------------------------- */
/* lists! yes! styling & indenting/offsetting ... */

:where(main ul, main ol, main dl) {
    margin: 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

ul li, ol li {
    word-break: break-word;
}

li {
    list-style-position: outside;
}


/* when nesting unordered lists, we want asterisk, then plus, then hypen */
ul {
    /* border: 1px dotted red; */
    list-style: "* ";
    padding-inline-start: 2ch;
}

ul ul {
    list-style: "+ ";
}

ul ul ul {
    list-style: "- ";
}


/* When styling nested ordered lists, we have to do more to guarantee character alignment! */
ol {
    list-style: none;
    padding-inline-start: 3ch;
    counter-reset: item;
    position: relative;
}

ol li {
    counter-increment: item;
    position: relative;
}

ol li::before {
    content: counter(item, decimal) ". ";
    position: absolute;
    right: 100%;
    width: 4ch;
    text-align: right;
    white-space: pre;
    font-family: var(--code-font-family);
}

/* Nested list styles with alphabetical counters */
ol ol {
    counter-reset: subitem;
    padding-inline-start: 3ch; /* offset the second level */
}

ol ol li {
    counter-increment: subitem;
}

ol ol li::before {
    content: counter(subitem, lower-alpha) ". ";
    width: 4ch;
}

/* If you need a third level, you could add (for example): */
ol ol ol {
    counter-reset: subsubitem;
}

ol ol ol li {
    counter-increment: subsubitem;
}

ol ol ol li::before {
    content: counter(subsubitem, lower-greek) ". ";
    width: 3ch;
}


/* when handling the rarely-used definition lists (terms & descriptions),  */
/* we want sensible offsetting */
dl {
    position: relative;
    margin: 0;
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0 2ch; /* Horizontal gap of exactly 2 characters */
}

dt {
    grid-column: 1;
    padding-top: calc(0.5 * var(--line-height));
    position: relative;
    /* Remove the padding-left since we're using grid */
}

dd {
    grid-column: 2;
    margin: 0; /* Reset default margin */
    /* Remove the padding-left since we're using grid */
}

dt::before {
    content: var(--cbdl) var(--prespace);
    opacity: var(--dbdl-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
}


/* HORIZONTAL RULES ------------------------------ */
/* just displaying actual text content (box-drawing characters + silcrow) */

hr {
    position: relative;
    border: none;
    overflow: visible;
    text-align: center;
    height: var(--line-height);
    margin: 0;
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
}

hr::after { 
    content: var(--hr-content); /* the content of the horizontal rule itself */
}

hr::before {
    content: var(--cbhr) var(--prespace);
    opacity: var(--cbhr-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
}


/* CODE BLOCKS -------------------------- */
pre, code {
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: normal;
    font-style: normal;
    font-family: var(--code-font-family);
}

pre {
    position: relative;
    padding: 2ch;
    display: block;
    /* show scroll if needed */
    overflow-x: auto;
}

pre::before {
    content: var(--cbcb) var(--prespace);
    opacity: var(--cbcb-opacity);
    position: absolute;
    right: 100%;
    white-space: pre;
}



/* TABLES -------------------------------- */
/* tables are a bit more complex, but we can still style them! */
/* we really just want monospace to not totally suck here */



table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.5ch 1ch;
}

/* ************************************************************************* */
/* CONVENIENCE CLASSES ----------------------------------- */
/* sometimes you want to make something transparent, or less prominent, or  */

.opq75 {
    opacity: 0.75;
}

.opq50 {
    opacity: 0.5;
}

.opq25 {
    opacity: 0.25;
}

.opq10 {
    opacity: 0.1;
}

.transparent {
    opacity: 0;
}

.right {
    text-align: right;
}

/* ************************************************************************* */

/* */
/* Add support for ligatures in Fira Code VF */
@supports (font-variation-settings: normal) {
    :root {
        --font-family: 'Fira Code VF', 'Fira Code', 'Fira Mono', Consolas, monaco, monospace;
    }
}