/* --variables.scss */
/* https://www.htmlsymbols.xyz/geometric-symbols */
/* _functions.scss */
/* also look at https://www.fluid-type-scale.com */
/*
use of clamped():
  cssProperty: clamped(min-size in px without unit,
    max-size in px without unit
    [, min-breakpoint in px without unit
    [, max-breakpoint in px without unit],
    [, places after decimal devider]);
*/
:root {
  --max-width: 1200px;
  --brand-color-1: hsl(27, 86%, 58%);
  --brand-color-1-dark: hsl(27, 100%, 44%);
  --brand-color-1-light: #F3A462;
  --brand-color-1-lighter: #F7C69E;
  --brand-color-1-lightest: #FDF4EA;
  --brand-color-2: #42A6D9;
  --brand-color-2-light: #66BAE2;
  --brand-color-2-lighter: HSL(200.3, 66.5%, 75%);
  --brand-color-2-lightest: #eaf5fb;
  --bg-color:  hsl(196, 29%, 87%);
  --bg-color-light: #fff;
  --header-bg-color: #fff;
  --footer-bg-color: HSL(200.5, 65.5%, 92.6%);
  --font-color-dark: #333;
  --font-color-dimmed: #888;
  --font-color-light: #fff;
  --link-color: var(--brand-color-2);
  --border-color: #ccc;
  --label-color: #888;
  --line-height: 1.3;
  --max-length: 80ch;
  /* Menu */
  --menu-default-bg: white;
  --menu-hover-bg: white;
  --menu-active-bg: white;
  --menu-trail-bg: white;
  --menu-default-color: var(--font-color-dark);
  --menu-hover-color: var(--brand-color-2);
  --menu-active-color: var(--brand-color-1);
  --menu-trail-color: var(--brand-color-1);
  --menu-border-color: var(--border-color);
  /* Menu 2nd level */
  --menu-default-bg-l2: white;
  --menu-hover-bg-l2: white;
  --menu-active-bg-l2: white;
  --menu-trail-bg-l2: white;
  --menu-default-color-l2: var(--font-color-dark);
  --menu-hover-color-l2: var(--brand-color-2);
  --menu-active-color-l2: var(--brand-color-1);
  --menu-trail-color-l2: var(--brand-color-1);
  --menu-border-color-l2: var(--border-color);
  /* Button */
  --button-default-bg: var(--brand-color-1);
  --button-hover-bg: var(--brand-color-2);
  --button-default-color: white;
  --button-hover-color: white;
  --button-border-color: var(--border-color);
  --content-space-y: 2rem;
  --content-space-y-small: 1rem;
  --inner-space-x: 1em;
  --module-space-bottom: 2rem;
  --ce-space-bottom: 3rem;
  --paragraph-margin-bottom: 1em;
  --tiles-min-width: clamp(220px, 20vw, 240px);
  --divider-space: 5px;
  --arrow-down: "▾";
  --font-family-mono: Consolas, monospace;
}
/* Dynamic values */
/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
    --content-space-x:  clamp(0.625rem, 12.5vw + -2.5rem, 6.875rem);
    --logo-space-y-top: clamp(1.25rem, 3.8vw + 0.3rem, 3.125rem);
  }
}
/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size: 1rem;
    --content-space-x: 0.625rem;
  }
  @media screen and (min-width: 1200px) {
    :root {
      --font-size: 1.25rem;
      --content-space-x: 6.875rem;
    }
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22html%2F_c4_globolog.net%2Ffiles%2Fcss%2F_variables.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AACA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAANA%3BAAAA%3BAAkGA%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAnGF%3BAA8GA%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%22%7D */