:root {
  --bg-color: #f9f9f9;
  --bg-color-block: #eee;
  --bg-color-label: var(--bg-color-block);
  --bg-color-blockquote-note: #eef9fd;
  --bg-color-blockquote-tip: #e6f6e6;
  --bg-color-blockquote-important: #f4eefe;
  --bg-color-blockquote-warning: #fff8e6;
  --bg-color-blockquote-caution: #ffebec;
  --text-color-label-note: var(--border-color-blockquote-note);
  --text-color-label-tip: var(--border-color-blockquote-tip);
  --text-color-label-important: var(--border-color-blockquote-important);
  --text-color-label-warning: var(--border-color-blockquote-warning);
  --text-color-label-caution: var(--border-color-blockquote-caution);
  --text-color-primary: #474747;
  --text-color-secondary: #6b6b6b;
  --link-color: #f74c00;
  --link-color-hover: #ff4d00;
  --link-color-visited: #bd3900;
  --link-color-footnote: var(--link-color);
  --label-color: var(--text-color-secondary);
  --thead-color: var(--text-color-primary);
  --tbody-color: var(--text-color-secondary);
  --hr-color: var(--text-color-primary);
  --border-color-blockquote: var(--text-color-secondary);
  --border-color-blockquote-note: #4cb3d4;
  --border-color-blockquote-tip: #009400;
  --border-color-blockquote-important: #a371f7;
  --border-color-blockquote-warning: #e6a700;
  --border-color-blockquote-caution: #e13238;

  --font-family-base: "New Computer Modern", "Source Han Serif";
  --font-family-italic: "New Computer Modern Italic", "LXGWWenKai";
  --font-family-heading: "Source Han Serif";
  --font-weight-heading: bold;
  --font-family-mono: "Jetbrains Mono", "Source Han Sans";
  --font-family-label: "Source Han Sans";
  --font-family-thead: var(--font-family-heading);
  --font-family-tbody: var(--font-family-base);
  --md-opacity-heading: 50%;
  --md-opacity-link: 50%;
  --md-opacity-code: 50%;
  --md-opacity-list: 80%;
  --md-opacity-blockquote: 50%;
}

:root.dark {
  --bg-color: #1d1d1d;
  --bg-color-block: #2d2d2d;
  --bg-color-blockquote-note: #193c47;
  --bg-color-blockquote-tip: #003100;
  --bg-color-blockquote-important: #230555;
  --bg-color-blockquote-warning: #4d3800;
  --bg-color-blockquote-caution: #4b1113;

  --text-color-primary: #bbb;
  --text-color-secondary: #adadad;
  --link-color: #f74c00;
}

body {
  background-color: var(--bg-color);
}

div.container {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

@font-face {
  font-family: "New Computer Modern";
  src: url("./fonts/NewComputerModern/NewCM10-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}

@font-face {
  font-family: "New Computer Modern";
  src: url("./fonts/NewComputerModern/NewCM10-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}

@font-face {
  font-family: "New Computer Modern Italic";
  src: url("./fonts/NewComputerModern/NewCM10-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}

@font-face {
  font-family: "New Computer Modern Italic";
  src: url("./fonts/NewComputerModern/NewCM10-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}

@font-face {
  font-family: "Source Han Serif";
  src: url("./fonts/SourceHanSerif/SourceHanSerifSC-VF.otf.woff2")
    format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans";
  src: url("./fonts/SourceHanSans/SourceHanSansSC-VF.otf.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetbrainsMono/JetBrainsMono-Light.woff2") format("woff2");
  font-display: swap;
  font-feature-settings:
    "cv01", "cv03", "cv06", "cv07", "cv11", "cv12", "cv16", "cv18", "cv20",
    "zero";
  font-variant-ligatures: none;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetbrainsMono/JetBrainsMono-LightItalic.woff2")
    format("woff2");
  font-style: italic;
  font-display: swap;
  font-feature-settings:
    "cv01", "cv03", "cv06", "cv07", "cv11", "cv12", "cv16", "cv18", "cv20",
    "zero";
  font-variant-ligatures: none;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetbrainsMono/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
  font-feature-settings:
    "cv01", "cv03", "cv06", "cv07", "cv11", "cv12", "cv16", "cv18", "cv20",
    "zero";
  font-variant-ligatures: none;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetbrainsMono/JetBrainsMono-BoldItalic.woff2")
    format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
  font-feature-settings:
    "cv01", "cv03", "cv06", "cv07", "cv11", "cv12", "cv16", "cv18", "cv20",
    "zero";
  font-variant-ligatures: none;
}

@font-face {
  font-family: "LXGWWenKai";
  src: url("./fonts/LXGWWenKai/LXGWWenKai-Regular.woff2") format("woff2");
  font-display: swap;
}