:root {
  /* Margins and paddings */
  --max-width: 1400px;
  --margin-x-desktop: 50px;
  --margin-y-desktop: 150px;
  --margin-x-mobile: 20px;
  --margin-y-mobile: 50px;

  /* Nav hover effects and timeline stroke */
  --brand-color: rgba(0, 90, 255, 1);

  /* Icon colors. Needs to be in this format */
  --primary-filter-color: invert(19%) sepia(81%) saturate(4093%)
    hue-rotate(218deg) brightness(102%) contrast(106%);
  --secondary-filter-color: invert(12%) sepia(62%) saturate(3447%)
    hue-rotate(354deg) brightness(90%) contrast(86%);

  /* Default font color */
  --font-color: rgba(31, 49, 68, 1);

  /* Links in text */
  --text-link-color: rgba(0, 90, 255, 1);

  /* Background color for the components when choosing "With-background" */
  --component-background-color: rgba(227, 229, 232, 0.25);

  /* Background color/highlight color for elements like icons and downloadable items */
  --element-background-color: rgba(227, 229, 232, 1);

  /* Hero colors */
  --primary-hero-color: 255, 255, 255;
  --primary-hero-bg-color: 31, 49, 68;

  --secondary-hero-color: 31, 49, 68;
  --secondary-hero-bg-color: 150, 200, 240;

  --tertiary-hero-color: 00, 90, 255;
  --tertiary-hero-bg-color: 225, 125, 40;

  /* Footer colors */
  --primary-footer-color: 255, 255, 255;
  --primary-footer-bg-color: 35, 31, 32;

  --secondary-footer-color: 31, 49, 68;
  --secondary-footer-bg-color: 150, 200, 240;

  --tertiary-footer-color: 00, 90, 255;
  --tertiary-footer-bg-color: 225, 125, 40;

  --secondary-brand-100: rgba(119, 34, 25, 1);
  --secondary-brand-75: rgba(119, 034, 025, 0.75);
  --secondary-brand-50: rgba(119, 034, 025, 0.5);
  --secondary-brand-25: rgba(119, 034, 025, 0.25);

  --secondary-brand-100-filter: invert(12%) sepia(62%) saturate(3447%)
    hue-rotate(354deg) brightness(90%) contrast(86%);
  --secondary-brand-75-filter: invert(31%) sepia(30%) saturate(917%)
    hue-rotate(317deg) brightness(110%) contrast(72%);
  --secondary-brand-50-filter: invert(69%) sepia(3%) saturate(2947%)
    hue-rotate(319deg) brightness(90%) contrast(82%);
  --secondary-brand-25-filter: invert(91%) sepia(3%) saturate(1257%)
    hue-rotate(315deg) brightness(99%) contrast(76%);
    
  --filter-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}