@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 400;
  font-display: swap;
  src:
    local('Encode Sans Semi Expanded'),
    local('Encode Sans'),
    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke83OhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TO401LgrjKXY.woff2) format('woff2');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 700;
  font-display: swap;
  src:
    local('Encode Sans Semi Expanded Bold'),
    local('Encode Sans Semi Expanded'),
    local('Encode Sans'),
    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke8yOhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TMzYQOyfBJFyUGWQ.woff2) format('woff2');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 100;
  font-display: swap;
  src:
    local('Encode Sans Condensed Thin'),
    local('Encode Sans Condensed'),
    local('Encode Sans'),
    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_76_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-5Z-OJwsnIHKQ.woff2) format('woff2');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 200;
  font-display: swap;
  src:
    local('Encode Sans Condensed ExtraLight'),
    local('Encode Sans Condensed Extra Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans'),
    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-SY6ZAC4ICHiYFQ.woff2) format('woff2');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 300;
  font-display: swap;
  src:
    local('Encode Sans Condensed Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans'),
    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-LY2ZAC4ICHiYFQ.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local('mononoki'),
    url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    local('mononoki Bold'),
    local('mononoki'),
    url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src:
    local('mononoki'),
    url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'mononoki';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src:
    local('mononoki Bold'),
    local('mononoki'),
    url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
}

:root {
  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  --font-stretch-base: semi-expanded;
  --font-weight-base: 400;
  --line-height-base: 2;
  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
  --font-stretch-headings: condensed;
  --font-weight-headings: 100;
  --line-height-headings: 1.5;
  --font-family-monospace: 'mononoki';
  --font-size-root: 16px;
  --opacity-light: 0.25;
  --opacity-lighter: 0.5;
  --opacity-lightest: 0.75;
}

:root {
  --color-bg: var(--color-negative, white);
  --color-fg: var(--color-positive, black);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-negative, black);
    --color-fg: var(--color-positive, white);
  }
}

:root {

  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--font-size-root);
  font-family: var(--font-family-base), sans-serif;
  font-stretch: var(--font-stretch-base, normal);
  font-weight: var(--font-weight-base, 400);
  line-height: var(--line-height-base, 2);
  transition-property: color, background-color;
  transition-timing-function: ease;
  transition-duration: 350ms;
}

h1 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h2 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h3 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h4 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h5 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h6 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

code {
  font-family: var(--font-family-monospace), monospace;
}

pre {
  font-family: var(--font-family-monospace), monospace;
}

a {
  color: var(--color-accent);
}