:root {
  --color--text: red;
  --color--text--highlight: #ee2323;
  --color--link: #333333;
  --color--background: white;
  --color--background--overlay: black;
  --color--background--overlay--opacity: 0.25;

  --color--sprout-green: #73C389;
  --color--ada-green: #2F8360;
  --color--red: #E4504E;
  --color--blue: #4A4280;

  --color--teal: #32978d;
  --color--aqua: #63c4b3;
  --color--peach: #fed0a3;
  --color--yellow: #FBCA51;

  --rad--com--section--margin: calc(51/10 * 1rem);

  --rad--header-width: 100%;
  --rad--content-width: 90%;

  --component--inline--margin--normal: calc(15/10 * 1rem);
  --component--inline--margin--large: calc(30/10 * 1rem);

  --component--padding--small: calc(30/10 * 1rem);
  --component--padding--normal: calc(66/10 * 1rem);
  --component--padding--large: calc(80/10 * 1rem);
  --component--padding--xlarge: calc(100/10 * 1rem);

  --font-family--lexend: 'Lexend', sans-serif;
  --font-family--inter: 'Inter', "Inter-Sans-Fallback", sans-serif;
  --font-family--domine: 'Domine', serif;
  --font-family--barlow: 'Barlow', sans-serif;
  --font-family--roboto-flex: 'Roboto Flex', sans-serif;

  --rad--content-width-narrow: 90%;
  --rad--content-width-normal: 90%;
  --rad--content-width-wide: 90%
}






/* This uses a base font sie of 16 no matter what */

@media (min-width: calc(768/16 * 1rem)) {
  :root {
    --rad--content-width: calc(500 / 10 * 1rem);
    --rad--header-width: 90vw;

    --rad--content-width-narrow: calc(500 / 10 * 1rem);
    --rad--content-width-normal: calc(600 / 10 * 1rem);
    --rad--content-width-wide: calc(700 / 10 * 1rem);
  }
}

@media (min-width: calc(992/16 * 1rem)) {
  :root {
    --rad--content-width: calc(768 / 10 * 1rem);
    --rad--header-width: 90vw;

    --rad--content-width-narrow: calc(700 / 10 * 1rem);
    --rad--content-width-normal: calc(800 / 10 * 1rem);
    --rad--content-width-wide: calc(900 / 10 * 1rem);
  }
}

@media (min-width: calc(1200/16 * 1rem)) {
  :root {
    --rad--content-width: calc(992 / 10 * 1rem);
    --rad--header-width: calc(1130 / 10 * 1rem);

    --rad--content-width-narrow: calc(900 / 10 * 1rem);
    --rad--content-width-normal: calc(1000 / 10 * 1rem);
    --rad--content-width-wide: calc(1100 / 10 * 1rem);
  }
}

@media (min-width: calc(1500/16 * 1rem)) {
  :root {
    --rad--content-width: calc(1331 / 10 * 1rem);
    --rad--header-width: calc(1400 / 10 * 1rem);

    --rad--content-width-narrow: calc(1000 / 10 * 1rem);
    --rad--content-width-normal: calc(1200 / 10 * 1rem);
    --rad--content-width-wide: calc(1331 / 10 * 1rem);
  }
}