:root{
  /* colors */
  --basic: rgba(0, 0, 153, 1); /* #000099 - logo color */
  --basictrans: rgba(0, 0, 153, 0.8); 
  --light: rgba(51, 171, 255, 1);
  --basicgradient: linear-gradient(165deg, rgba(122, 201, 255, 1) 0%, rgba(0, 0, 153, 1)  100%);
  --lightgradient: linear-gradient(10deg, rgba(0, 0, 153, 0.12) 0%, rgba(0, 0, 153, 0.05)  100%);
  --grey: #999;
  --greylighter: #eee;
  --greylight: #ccc;
  --greydark: #3d3c40;
  --greygradient: linear-gradient(165deg,rgba(233, 233, 233, 1) 0%, rgba(211, 211, 211, 1) 100%);
  --greylightgradient: linear-gradient(165deg,rgba(250, 250, 250, 1) 0%, rgba(235, 235, 235, 1) 100%);
  --greydarkgradient: linear-gradient(165deg,rgba(65, 67, 69, 1) 0%, rgba(35, 37, 38, 1) 100%); 

  /* spaces */
  --space-0-25: 12.5px;
  --space-0-5: 25px;
  --space-0-75: 37.5px;
  --space: 50px;
  --space-2: 100px;
  --space-3: 150px; 
  --space-4: 200px;

  /* dimensions (width & height) of social, cta, goback, anav */
  --icon: 40px;

  /* widths */
  --w-basic: 1800px;
  --w-txtmax: 1100px;


  /* FONT-SIZES */
  /* PRESERVED PIXEL VALUES */
  --fs-stable-big: 20px;
  --fs-stable-normal: 16px;
  /* HERO */
  --fs-xxl: clamp(3rem, 8vw + 0.5rem, 9.5rem);
  --fs-xl: clamp(2rem, 4vw + 0.5rem, 5rem);
  /* TITLES */
  --fs-biggg: clamp(1.5rem, 2.4vw + 0.5rem, 2.5rem);
  --fs-bigg: clamp(1.4rem, 1.6vw + 0.5rem, 1.8rem);
  --fs-big: clamp(1.3rem, 1.4vw + 0.5rem, 1.5rem);
  /* BODY */
  /* Based on 16px browsers default font-size */
  --fs-base: clamp(1rem, 0.8vw + 0.5rem, 1.2rem);
  /* SMALL */
  --fs-small-more: 0.95rem;
  --fs-small: 0.85rem;
  --fs-small-less: 0.75rem;
}