html {
  --button-one-hover: #39a2ff;
  --button-one: #1e88e5;
  --button-two-hover: #444;
  --button-two: #585f66;
  --code-button-focus-background: var(--markdown-syntax-background-color);
  --code-button-background: var(--markdown-table-row-odd-background-color);
  --code-tabs-tabs-background: var(--page-background);
  --contrast-color-dark: #1d3557;
  --contrast-color-light: #fff;
  --footer-background: rgba(0, 0, 0, 0.02);
  --header-color: white;
  --markdown-link-color: #1a81fa;
  --markdown-syntax-background-color: #f9f9f9;
  --markdown-table-row-odd-background-color: #efefef;
  --owc-active-color: #1a81fa;
  --owc-hover-color: #39a2ff;
  --page-background: white;
  --primary-color-accent: #cee5f6;
  --primary-color-darker: #39a2ff;
  --primary-color-lighter: #449ad7;
  --primary-color: rgb(44, 62, 80);
  --primary-lines-color: #ccc;
  --primary-text-color: #2c3e50;
}

@media (prefers-color-scheme: dark) {
  html {
    --header-color: #2f3136;
    --footer-background: rgba(255, 255, 255, 0.1);
    --page-background: #36393e;
    --text-color: #eee;
    --primary-text-color: #eee;
    --primary-color: white;
    --primary-color-lighter: #449ad7;
    --primary-color-darker: #39a2ff;
    --primary-color-accent: #cee5f6;
    --contrast-color-light: #fff;
    --contrast-color-dark: #1d3557;
    --primary-lines-color: #333;
    --owc-active-color: #41ffb0;
    --owc-hover-color: #6dffc2;
    --button-one: #9b03fe;
    --button-one-hover: #a724ff;
    --button-two: black;
    --button-two-hover: rgb(36, 36, 36);
    --rocket-search-background-color: #4a4d52;
    --rocket-search-highlight-color: #41ffb0;
    --rocket-search-hover-background-color: #6b717a;
    --rocket-search-fill-color: #fff;

    /* Markdown */
    --markdown-octicon-link: var(--primary-text-color);
    --markdown-link-color: #41ffb0;
    --markdown-divider-color: #e1e4e8;
    --markdown-blockquote-border-color: #dfe2e5;
    --markdown-blockquote-color: #90aac7;
    --markdown-kbd-background-color: #fafbfc;
    --markdown-kbd-border-color: #c6cbd1;
    --markdown-kbd-border-bottom-color: #959da5;
    --markdown-kbd-color: #444d56;
    --markdown-heading-color-6: #6a737d;
    --markdown-table-background-color: var(--markdown-syntax-background-color);
    --markdown-table-row-odd-background-color: var(--markdown-kbd-color);
    --markdown-table-border-color: transparent;
    --markdown-code-background-color: rgba(27, 31, 35, 0.05);
    --markdown-pre-background-color: rgb(49, 49, 49);

    /* syntax */
    --markdown-syntax-color: #f8f8f2;
    --markdown-syntax-background-color: #2e3440;
    --markdown-syntax-atrule-color: #88c0d0;
    --markdown-syntax-attr-name-color: #a3be8c;
    --markdown-syntax-attr-value-color: #88c0d0;
    --markdown-syntax-builtin-color: #a3be8c;
    --markdown-syntax-boolean-color: #81a1c1;
    --markdown-syntax-class-name-color: #88c0d0;
    --markdown-syntax-constant-color: #81a1c1;
    --markdown-syntax-char-color: #a3be8c;
    --markdown-syntax-deleted-color: #81a1c1;
    --markdown-syntax-entity-color: #81a1c1;
    --markdown-syntax-function-color: #88c0d0;
    --markdown-syntax-inserted-color: #a3be8c;
    --markdown-syntax-keyword-color: #81a1c1;
    --markdown-syntax-number-color: #b48ead;
    --markdown-syntax-operator-color: #81a1c1;
    --markdown-syntax-property-color: #81a1c1;
    --markdown-syntax-punctuation-color: #81a1c1;
    --markdown-syntax-regex-color: #81a1c1;
    --markdown-syntax-important-color: #81a1c1;
    --markdown-syntax-selector-color: #a3be8c;
    --markdown-syntax-symbol-color: #81a1c1;
    --markdown-syntax-string-color: #a3be8c;
    --markdown-syntax-tag-color: #81a1c1;
    --markdown-syntax-url-color: #81a1c1;
    --markdown-syntax-variable-color: #81a1c1;
    --markdown-syntax-hotkey-selector-color: #d73a49;
    --markdown-syntax-keyword-color: #22863a;
    --markdown-syntax-background-color: rgb(27, 29, 35);
    --markdown-syntax-atrule-color: rgb(198, 120, 221);
    --markdown-syntax-attr-name-color: rgb(198, 120, 221);
    --markdown-syntax-boolean-color: rgb(209, 154, 102);
    --markdown-syntax-class-name-color: rgb(97, 175, 239);
    --markdown-syntax-constant-color: rgb(220, 220, 170);
    --markdown-syntax-entity-color: rgb(220, 220, 170);
    --markdown-syntax-function-color: rgb(97, 175, 239);
    --markdown-syntax-inserted-color: rgb(220, 220, 170);
    --markdown-syntax-keyword-color: rgb(198, 120, 221);
    --markdown-syntax-number-color: rgb(220, 220, 170);
    --markdown-syntax-operator-color: rgb(220, 220, 170);
    --markdown-syntax-property-color: rgb(220, 220, 170);
    --markdown-syntax-punctuation-color: white;
    --markdown-syntax-regex-color: rgb(209, 154, 102);
    --markdown-syntax-selector-color: rgb(86, 156, 214);
    --markdown-syntax-symbol-color: rgb(220, 220, 170);
    --markdown-syntax-tag-color: rgb(86, 156, 214);
    --markdown-syntax-url-color: rgb(220, 220, 170);
    --markdown-syntax-variable-color: rgb(220, 220, 170);
  }

  .string {
    color: rgb(152, 195, 121);
  }

  .comment {
    color: #7d7d7d;
  }

  .language-css {
    --markdown-syntax-string-color: #81a1c1;
  }
}

body[layout='home'] .markdown-body .call-to-action:nth-of-type(2) {
  --primary-color: #222;
  --primary-color-lighter: #333;
  --primary-color-darker: #000;
}

mdjs-preview {
  --primary-lines-color: transparent;
}