@layer fonts {
  @font-face {
    font-family: "Noto Serif";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/noto-serif-v9-latin-regular-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Serif";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/noto-serif-v9-latin-italic-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Serif";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/noto-serif-v9-latin-700-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Serif";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/noto-serif-v9-latin-700italic-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/notosans-regular-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/notosans-italic-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/notosans-bold-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/notosans-bolditalic-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/notosans-black-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 900;
    src: url("../fonts/notosans-blackitalic-webfont.woff2") format("woff2");
    font-display: block;
  }
  @font-face {
    font-family: "Adjusted Arial";
    src: local(Arial);
    size-adjust: 104%;
    ascent-override: 102%;
    descent-override: 34%;
  }
  @font-face {
    font-family: "Adjusted Times";
    src: local(Times New Roman);
    size-adjust: 106%;
    ascent-override: 80%;
    descent-override: 20%;
  }
}
@layer variables {
  :root {
    --serif: "Noto Serif", "Adjusted Times", Times New Roman, serif;
    --sans: "Noto Sans", "Adjusted Arial", Arial, sans-serif;
    --web-sans: Arial, "Helvetica Nueue", "Liberation Sans", Freesans, sans-serif;
    --system-sans: "Lucida Grande", Tahoma, "Liberation Sans", "Lucida Sans Unicode", sans-serif;
    --color-crimson: #900;
    --color-gold: #c93;
    --color-olive: #993;
    --color-seafoam: #696;
    --color-jade: #256063;
    --color-azure: #369;
    --color-blue: #114b76;
    --color-orchid: #636;
    --color-crimson-dark: color-mix(in oklch, var(--color-crimson), black 24%);
    --color-gold-dark: color-mix(in oklch, var(--color-gold), black 14%);
    --color-olive-dark: color-mix(in oklch, var(--color-olive), black 16%);
    --color-seafoam-dark: color-mix(in oklch, var(--color-seafoam), black 14%);
    --color-jade-dark: color-mix(in oklch, var(--color-jade), black 18%);
    --color-azure-dark: color-mix(in oklch, var(--color-azure), black 18%);
    --color-blue-dark: color-mix(in oklch, var(--color-blue), black 22%);
    --color-orchid-dark: color-mix(in oklch, var(--color-orchid), black 22%);
    --color-about: var(--color-gold);
    --color-admin: var(--color-crimson);
    --color-archive: var(--color-olive);
    --color-essential: var(--color-crimson);
    --color-commentary: var(--color-seafoam);
    --color-chronology: var(--color-orchid);
    --color-multimedia: var(--color-jade);
    --color-press: var(--color-seafoam);
    --color-speeches: var(--color-azure);
    --section-color: #333;
    --section-triangle: #fff;
    --btn: var(--color-blue);
    --px1: .0625rem;
    --px2: .125rem;
    --px3: .1875rem;
    --px4: .25rem;
    --px5: .3125rem;
    --px6: .375rem;
    --px7: .4375rem;
    --px8: .5rem;
    --px9: .5625rem;
    --px10: .625rem;
    --px11: .6875rem;
    --px12: .75rem;
    --px13: .8125rem;
    --px14: .875rem;
    --px15: .9375rem;
    --px16: 1rem;
    --px17: 1.0625rem;
    --px18: 1.125rem;
    --px19: 1.1875rem;
    --px20: 1.25rem;
    --px21: 1.3125rem;
    --px22: 1.375rem;
    --px24: 1.5rem;
    --px25: 1.5625rem;
    --px30: 1.875rem;
  }
  .page-wrapper.essential {
    --section-color: var(--color-essential);
    --section-triangle: var(--color-essential);
  }
  .page-wrapper.speeches {
    --section-color: var(--color-speeches);
    --section-triangle: var(--color-speeches);
  }
  .page-wrapper.archive {
    --section-color: var(--color-archive);
    --section-triangle: var(--color-archive);
  }
  .page-wrapper.multimedia {
    --section-color: var(--color-multimedia);
    --section-triangle: var(--color-multimedia);
  }
  .page-wrapper.commentary {
    --section-color: var(--color-commentary);
    --section-triangle: var(--color-commentary);
  }
  .page-wrapper.press {
    --section-color: var(--color-press);
    --section-triangle: var(--color-press);
  }
  .page-wrapper.chronology {
    --section-color: var(--color-chronology);
    --section-triangle: var(--color-chronology);
  }
  .page-wrapper.about {
    --section-color: var(--color-about);
    --section-triangle: var(--color-about);
  }
  .page-wrapper.admin {
    --section-color: var(--color-admin);
  }
}