@charset "UTF-8";
:root {
  
  color-scheme: dark light;
  font-size: max(100%, 13px);
  --font-stretch: 100%;
  --initial-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  --size-body: 75rem;
  &.full-viewport {
    --size-body: min(100%, 160rem);
  }
  --size-body-largest: calc(75rem* 2);
  @media (max-width: 47.9375rem) {
    --font-size: 0.875rem;
  }
  @media (min-width: 48rem) and (max-width: 119.9375rem) {
    --font-size: clamp(1.0625rem, calc(1.0313rem + 0.1dvw), 1.1875rem);
  }
  @media (min-width: 120rem) {
    --font-size: 1.25rem;
    --size-body: 90rem;
  }
  &:not(.contrast) {
    --font-weight: 270;
    @media (prefers-color-scheme: light) {
      --font-weight: 320;
    }
  }
  &.contrast {
    --font-weight: 400;
  }
  @media (max-width: 47.9375rem) {
    --gutter: 2.5rem;
  }
  @media (min-width: 48rem) {
    --gutter: 3rem;
  }
  
  
  --buttonFace: ButtonFace;
  --buttonText: ButtonText;
  --field: Field;
  --fieldText: FieldText;
  --highlight: Highlight;
  --highlightText: HighlightText;
  --selectedItem: SelectedItem;
  --selectedItemText: SelectedItemText;
  --mark: Mark;
  --markText: MarkText;
  --accentColor: AccentColor;
  --accentColorText: AccentColorText;
  
  --buttonBorder: ButtonBorder;
  --grayText: GrayText;
  --linkText: LinkText;
  --visitedText: VisitedText;
  --activeText: ActiveText;
  
  --cols: 12;
  --radius: var(--small-gutter, 0.625rem);
  --font-weight-headers: unset;
  --lh: 1.618; 
  --font-family: var(--base-font);
  
  --darkblue: rgb(0,36,94);
  --lightblue: rgb(184,207,241);
  --lightgreen: rgb(212,249,201);
  --orange: rgb(193,71,5);
  --orangered: rgb(255,69,0);
  --raspberry: rgb(205,0,55);
  --red: rgb(213,43,30);
  --yellow: rgb(255,182,18);
  --maroon: rgb(154,90,12);
  --antigua: rgb(130,196,206);
  --lightgray: rgb(211,211,211);
  --whitesmoke: rgb(252,252,252);
  --teal: rgb(0,122,124);
  
  --blue: light-dark( rgb(47,110,190), rgb(138,180,249));
  --applegreen: light-dark( rgb(90,130,12), rgb(130,190,0));
  --green: light-dark( rgb(35,122,55), yellowgreen);
  --limegreen: light-dark( rgb(210,225,0), rgb(255,253,0));
  --carbon: light-dark( rgb(111,113,116), rgb(137,139,143));
  --basic-color: light-dark(black, white);
  --basic-color-reverse: light-dark(white, black);
  --basic-color-alpha: light-dark( rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
  --basic-color-reverse-alpha: light-dark( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.6));
  --text-decoration-style: solid;
  --text-decoration-color: currentColor;
  --text-decoration-thickness: 0.0625em;
  --small-radius: calc(var(--radius) / 2);
  --font-family-monospace: Consolas, Courier, monospace;
  --sticky-top: var(--header-outer-height);
  --negative-gutter: calc(var(--gutter) / 2 * -1);
  --half-gutter: calc(var(--gutter) / 2);
  --small-gutter: calc(var(--gutter) / 4);
  --tiny-gutter: calc(var(--gutter) / 8);
  --double-gutter: calc(var(--gutter) * 2);
  --negative-half-gutter: calc(var(--negative-gutter) / 2);
  --negative-small-gutter: calc(var(--negative-gutter) / 4);
  
  --canvas: light-dark( rgb(243,244,247), rgb(20,20,30)); 
  --canvasText: light-dark( rgb(86,98,111), rgb(197,213,231));
  --background-color-secondary: light-dark(white, rgb(26,26,41)); 
  --background-color-hero: light-dark( rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6));
  --background-color-menus: light-dark( rgb(255,255,255), rgb(37,37,37));
  --background-error-color: rgb(246,197,237);
  --background-forms-elements: light-dark( rgb(252,252,252), rgb(44,46,54));
  --heading-color: light-dark( rgb(17,17,17), white);
  
  --box-shadow: light-dark( rgb(219,219,219), rgba(42, 34, 90, 0.81)); 
  --box-shadow-light: light-dark( rgb(219,219,219), rgb(49,54,65));
  --box-shadow-forms-elements: light-dark(var(--box-shadow), rgba(255, 255, 255, 0.3));
  --under-box-shadow-color: light-dark( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
  --under-box-shadow: 0 0.4375rem 0.3125rem -0.375rem var(--under-box-shadow-color);
  
  --link-color: light-dark( rgb(0,80,179), rgb(102,170,255)); 
  --link-color-alternate: light-dark( rgb(0,50,255), rgb(102,133,255)); 
  --button-radius: 0.4375rem;
  --error-color: light-dark(var(--raspberry), rgb(255,169,174));
  --message-dialog-error: var(--basic-color-reverse);
  --highlight-sentence: light-dark( rgb(99,54,222), var(--antigua));
  
  --code-area-background: light-dark(rgba(99, 54, 222, 0.05), rgb(21,13,31));
  --code-area-foreground: var(--canvasText);
  --code-area-border: rgb(104,68,148);
  &.admin {
    --size-body: var(--size-body-largest);
  }
  @media (any-hover: none) {
    &:not([class*="dys"]) {
      --base-font: var(--initial-font);
      --font-family-headers: var(--initial-font);
    }
  }
  @media (any-hover: hover) {
    &:not([class*="dys"]) {
      --base-font: "Roboto Flex", var(--initial-font);
      --font-family-headers: "Roboto Flex", var(--initial-font);
    }
  }
  &.dyslexic {
    --base-font: 'Accessible DfA', var(--initial-font);
    --font-family-headers: 'Accessible DfA', var(--initial-font);
    .no-dyslexic {
      font-family: var(--initial-font);
    }
  }
  &.dyslexic-comic {
    --base-font: 'Comic Sans MS', var(--initial-font);
    --font-family-headers: 'Comic Sans MS', var(--initial-font);
  }
  &.initial-font {
    --initial-font: "";
    --base-font: var(--initial-font);
    --font-family-headers: var(--initial-font);
  }
  &[class*="dys"] .no-dyslexic {
    font-family: var(--initial-font);
  }
  
  --outline-offset: 0.1875rem;
  --outline-width: 0.125rem;
  --outline-style: solid;
  --outline-color: light-dark(var(--orangered), springgreen);
  &.use-keyboard {
    --outline: var(--outline-width) var(--outline-style) var(--outline-color);
  }
  &:not(.use-keyboard) {
    --outline: none;
  }
  
  @media (prefers-color-scheme: dark) {
    --under-box-shadow: 0 0.4375rem 0.1875rem -0.3125rem var(--under-box-shadow-color);
  }
  @media (max-width: 47.9375rem) {
    --size-icon-header: calc(var(--header-outer-height) * .35);
    @media (max-height: 47.9375rem) {
      --header-outer-height: 2.8125rem;
    }
    @media (min-height: 48rem) {
      --header-outer-height: 3.125rem;
    }
  }
  @media (min-width: 48rem) and (max-width: 89.9375rem) {
    --header-outer-height: 3.4375rem;
    --size-icon-header: calc(var(--header-outer-height) * .3);
  }
  @media (min-width: 90rem) {
    --size-icon-header: calc(var(--header-outer-height) * .35);
    @media (max-height: 47.9375rem) {
      --header-outer-height: 4.375rem;
    }
    @media (min-height: 48rem) {
      --header-outer-height: 5rem;
    }
  }
}
.initial-font {
  font-family: var(--initial-font);
}
.font-family-code {
  font-family: var(--font-family-monospace) !important;
}