:root {
  --clr-text: hsl(0, 0%, 100%);
  --clr-backgroundtext: hsla(0, 0%, 0%, 0.5);
  --clr-bground-header: hsla(0, 0%, 0%, 0.6);
  --clr-bground-footer: hsla(0, 0%, 32%, 0.75);
  --clr-bground-column: hsl(195, 69%, 20%);
  --clr-bground-section-dl: hsla(0, 0%, 0%, 0.92);
  
  --clr-bground-input: hsl(42, 99%, 46%);
  --clr-foreground: hsla(0, 0%, 21%, 0.5);
  --clr-bground-btn: hsl(180, 65%, 27%);
  --clr-color-input: hsl(0, 0%, 0%);
  --clr-color-btn: hsl(0, 0%, 100%);
  --clr-color-btn-hover: hsl(80, 77%, 31%);
  --clr-borders: hsl(42, 99%, 46%);
  --clr-border-btn: hsl(0, 0%, 60%);
  --clr-error: hsl(0, 100%, 27%);
  --clr-succes: hsl(80, 77%, 31%);
  --clr-focus: hsl(0, 100%, 27%);
  --clr-a-link: hsl(180, 65%, 27%);
  --clr-a-hover: hsl(0, 0%, 60%);
  --clr-ol-a-link:hsl(0, 0%, 100%);
  --clr-ol-a-hover:hsl(80, 77%, 31%);

  --clr-nav-a: hsl(0, 0%, 60%);
  --clr-nav-color: hsl(0, 0%, 100%);
  --clr-nav-border: hsl(180, 65%, 27%);
  --clr-nav-bars: hsl(180, 65%, 27%);
  --clr-nav-bground: hsl(0, 0%, 0%);
  --clr-nav-bground-hover: hsl(0, 0%, 21%);
  --clr-nav-bground-subm: hsl(120, 34%, 18%);
  --clr-fieldset: hsl(42, 99%, 46%);

  --clr-popup-bground-overlay: hsla(0, 0%, 0%, 0.7);
  --clr-popup-bground-popup: hsl(0, 0%, 100%);
  --clr-popup-close: hsl(0, 0%, 20%);
  --clr-popup-color-hr: hsl(0, 0%, 20%);

  --clr-flip-back: hsl(0, 0%, 0%);
  --clr-flip-back-padd: hsl(180, 65%, 27%); 

  /* --font-size: 16; 
    --font-unit: 1pt;
    --font-dyn-size: calc(var(--font-size) * var(--font-unit));
    ---------------------------------------
    primary-background
    secondairy-background, etc.

    */
}

.overlay {
  border-image:
    linear-gradient(
      hsl(240 100% 50% / .3),
      hsl(0 100% 50% / .3))
      fill 1 ;
}