/* Code generated by tui/cmd/theme; DO NOT EDIT. */

:root {
  --color-bg: #282c34;
  --color-fg: #abb2bf;
  --color-muted: #565c64;
  --color-subtle: #545862;
  --color-accent: #61afef;
  --color-link: #61afef;
  --color-link-hover: #56b6c2;

  --color-heading-marker: #545862;
  --color-heading-1: #61afef;
  --color-heading-2: #c678dd;
  --color-heading-3: #56b6c2;
  --color-heading-4: #98c379;
  --color-heading-5: #e5c07b;
  --color-heading-6: #e06c75;

  --color-code-fg: #abb2bf;
  --color-code-bg: #353b45;
  --color-code-border: #545862;

  --color-quote-fg: #56b6c2;
  --color-quote-marker: #545862;
  --color-quote-bg: #353b45;

  --color-rule: #545862;
  --color-selection: #3e4451;

  --font-body: ZedMono Nerd Font, ZedMono Nerd Font Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-heading: ZedMono Nerd Font, ZedMono Nerd Font Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --line-height-body: 1.65;

  --background-color: var(--color-bg);
  --header-background-color: var(--color-code-bg);
  --text-color: var(--color-fg);
  --text-accent-color: var(--color-muted);
  --border-color: var(--color-rule);
  --link-color: var(--color-link);
  --link-hover-color: var(--color-link-hover);
  --link-hover-line-color: var(--color-link-hover);
  --icon-color: var(--color-fg);
  --icon-hover-color: var(--color-link-hover);
  --code-background: var(--color-code-bg);
  --table-header-background-color: var(--color-code-bg);
}

::selection {
  background: var(--color-selection);
  color: var(--color-fg);
}

html {
  font-family: var(--font-body);
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

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

a:hover,
a:focus,
a:active,
a.active {
  color: var(--color-link-hover);
}

article.post,
article.post .content {
  color: var(--color-fg);
}

article.post .content h1,
article.post .content h2,
article.post .content h3,
article.post .content h4,
article.post .content h5,
article.post .content h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
}

article.post .content h1 {
  color: var(--color-heading-1);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

article.post .content h2 {
  color: var(--color-heading-2);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

article.post .content h3 {
  color: var(--color-heading-3);
}

article.post .content h4 {
  color: var(--color-heading-4);
}

article.post .content h5 {
  color: var(--color-heading-5);
}

article.post .content h6 {
  color: var(--color-heading-6);
}

article.post .content h1::before {
  content: "# ";
  color: var(--color-heading-marker);
  font-weight: 400;
}

article.post .content h2::before {
  content: "## ";
  color: var(--color-heading-marker);
  font-weight: 400;
}

article.post .content h3::before {
  content: "### ";
  color: var(--color-heading-marker);
  font-weight: 400;
}

article.post .content h4::before {
  content: "#### ";
  color: var(--color-heading-marker);
  font-weight: 400;
}

article.post .content h5::before {
  content: "##### ";
  color: var(--color-heading-marker);
  font-weight: 400;
}

article.post .content h6::before {
  content: "###### ";
  color: var(--color-heading-marker);
  font-weight: 400;
}

article.post .content a {
  color: var(--color-link);
}

article.post .content a:hover,
article.post .content a:focus {
  color: var(--color-link-hover);
}

article.post .content code {
  color: var(--color-code-fg);
  background: var(--color-code-bg);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}

article.post .content pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  color: var(--color-code-fg);
  padding: 1rem;
  overflow-x: auto;
}

article.post .content pre code {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

article.post .content blockquote {
  background: var(--color-quote-bg);
  border-left: 0.25rem solid var(--color-quote-marker);
  color: var(--color-quote-fg);
  margin-left: 0;
  padding: 0.75rem 1rem;
}

article.post .content hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
}