:root {
  color-scheme: light dark;

  --width: 34.5;
  --rounding: 4px;
  --color-accent: #268bd2;
  --color-background: light-dark(#ffffff, #0e0e0e);
  --color-background-off1: light-dark(#f9f9f9, #202020);
  --color-background-off2: light-dark(#e5e5e5, #333333);
  --color-background-off3: light-dark(#9a9a9a, #aaaaaa);
  --color-background-notice: light-dark(#fffbb4, #2e2e01);
  --color-text-title: light-dark(#000000, #ffffff);
  --color-text-main: light-dark(#111111, #eeeeee);
  --color-text-strong: light-dark(#000000, #ffffff);
  --color-text-weak: light-dark(#555555, #aaaaaa);
  --color-text-code: #bf616a;
}

html {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji;
  font-size: 1.3rem;
  font-weight: 350;
  font-size: clamp(18px, 100vw / var(--width), 20px);
  line-height: 1.5;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-main);
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 5em;

  @media only screen and (max-width: 820px) {
    margin: 0 10px;
  }
}

ul,
ol {
  padding-left: 2em;
}

/* Code */
code,
pre {
  font-family: Menlo, Monaco, "Courier New", monospace;
}
code {
  white-space: nowrap;
  padding: 0.25em 0.5em;
  font-size: 85%;
  color: var(--color-text-code);
  background-color: var(--color-background-off1);
  border: 1px solid var(--color-background-off2);
  border-radius: var(--rounding);
}
pre {
  display: block;
  overflow: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  background-color: var(--color-background-off1);
  border: 1px solid var(--color-background-off2);
  border-radius: var(--rounding);

  &:has(> code.hljs) {
    padding: 0;
    background-color: transparent;
  }

  code {
    white-space: pre;
    padding: 0;
    font-size: 100%;
    color: inherit;
    background-color: transparent;
    border: 0;
  }
}