@import "https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Strichpunkt+Sans:wght@400..900&display=swap";

/* css/theme.css */
:root {
  --background-light: #ffffff;
  --background-light-translucent: rgb(255 255 255 / 0.3);
  --surface-light: #ffffff;
  --surface-light-alt: #d3d3d3;
  --surface-light-translucent: rgb(211 211 211 / 0.3);
  --text-primary-light: #232323;
  --text-secondary-light: #555555;
  --background-dark: #4c4c4c;
  --background-dark-translucent: rgb(39 39 39 / 0.3);
  --surface-dark: #8a8a8a;
  --surface-dark-alt: #424242;
  --surface-dark-translucent: rgb(66 66 66 / 0.3);
  --text-primary-dark: #eaeaea;
  --text-secondary-dark: #dfdfdf;
  --accent: #e87633;
}
:root {
  --background: var(--background-light);
  --background-translucent: var(--background-light-translucent);
  --surface: var(--surface-light);
  --surface-alt: var(--surface-light-alt);
  --surface-translucent: var(--surface-light-translucent);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-inverted: var(--background-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--background-dark);
    --background-translucent: var(--background-dark-translucent);
    --surface: var(--surface-dark);
    --surface-alt: var(--surface-dark-alt);
    --surface-translucent: var(--surface-dark-translucent);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-inverted: var(--background-dark);
  }
}
:root {
  --max-content-width: 1080px;
  --max-article-width: 940px;
  --dim-small: 8px;
  --dim-medium: 16px;
  --dim-large: 24px;
  --dim-x-large: 48px;
  --dim-xx-large: 96px;
  --thumb-size: 48px;
  --dim-logo-max-height: 85px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-major: 36px;
}
:root {
  --font-family:
    "Manrope",
    "Inter",
    sans-serif;
  --font-fancy: "Instrument Serif", serif;
  --font-icon: "";
  --shadow-small: 0 0 12px rgba(0, 0, 0, 0.25);
}

/* css/article-page.css */
#main {
  grid-column: 2 / -2;
  width: 100%;
  max-width: var(--max-article-width);
}