:root {
  --br-color-dark-blue: 39 34 98;
  --br-color-gray: 159 160 178;
  --br-color-white: 255 255 255;
  --br-color-light-gray: 235 234 235;
  --br-color-green: 126 217 87;
  --br-color-black: 0 0 0;
  --br-color-purple: 39 34 98;
  --br-color-dark-purple: 5 8 67;

  --br-color-snow: 249 244 245;
  --br-color-rasberry-rose: 165 56 96;
  --br-color-cambridge-blue: 135 179 141;
  --br-color-thistle: 200 184 219;
  --br-color-yinmn-blue: 61 81 140;
  --br-color-powder-blue: 150 173 200;
  --br-color-sidecar: 238 225 170;
  --br-color-space-cadet: 22 41 82;
  --br-color-bright-snow: 248 250 252;
  --br-color-button-background:238 225 170;
  --br-color-button-background-hover: 246 240 213;

  --br-text-dark: rgb(var(--br-color-dark-blue));
  --br-text-light: rgb(var(--br-color-white));
  --br-h1-dark: rgb(var(--br-color-dark-blue));
  --br-h1-light: rgb(var(--br-color-white));
  --br-h2-dark: rgb(var(--br-color-dark-blue));
  --br-h2-light: rgb(var(--br-color-white));
  --br-h3-dark: rgb(var(--br-color-dark-blue));
  --br-h3-light: rgb(var(--br-color-white));
  --br-background-dark: rgb(var(--br-color-dark-blue));
  --br-background-light: rgb(var(--br-color-snow));
  --br-background-dark-purple: rgb(var(--br-color-dark-purple));

  --br-overlay-bk-10: rgb(var(--br-color-black) /.1);
  --br-overlay-bk-20: rgb(var(--br-color-black) /.2);
  --br-overlay-bk-30: rgb(var(--br-color-black) /.3);
  --br-overlay-bk-40: rgb(var(--br-color-black) /.4);
  --br-overlay-bk-50: rgb(var(--br-color-black) /.5);
  --br-overlay-bk-60: rgb(var(--br-color-black) /.6);
  --br-overlay-bk-70: rgb(var(--br-color-black) /.7);

  --br-overlay-white-10: rgb(var(--br-color-white) /.1);
  --br-overlay-white-20: rgb(var(--br-color-white) /.2);
  --br-overlay-white-30: rgb(var(--br-color-white) /.3);
  --br-overlay-white-40: rgb(var(--br-color-white) /.4);
  --br-overlay-white-50: rgb(var(--br-color-white) /.5);
  --br-overlay-white-60: rgb(var(--br-color-white) /.6);
  --br-overlay-white-70: rgb(var(--br-color-white) /.7);

  --br-color-ltgreen: rgb(var(--br-color-green) /.7);
  --br-hero-light-text-color: rgb(var(--br-color-white) /1); 
  --br-hero-dark-text-color: rgb(var(--br-color-dark-blue) /1);
  --br-roster-background: rgb(var(--br-color-purple));
  --br-roster-text-color: rgb(var(--br-color-white));

  --br-margin-top-scaleable-01: 200px;
  --br-margin-bottom-scaleable-01: 200px;
  --br-margin-top-scaleable-02: 100px;
  --br-margin-bottom-scaleable-02: 200px;
  /** universal margin or padding variables
      These values are for the largest screens
      and reduce as the screen becomes smaller
  **/
  --br-scaleable-01: 100px;
  --br-scaleable-02: 200px;
  --br-scaleable-03: 300px;
  --br-scaleable-04: 400px;
  --br-scaleable-05: 500px;
  
 /** common fonts that scale with screen size **/
 /**
      Brekpoints:
            < 1800 px
            < 1550 px
            < 1500 px
            < 1024 px
            < 740 px
            < 500 px
 **/
 /** common fonts that scale with screen size **/
  --br-media-font-01: 12px;
  --br-media-font-02: 22px; /* Paragraphs */
  --br-media-font-03: 30px; /* h3 and other larger text */
  --br-media-font-04: 48px; /* h2 and other large text */
  --br-media-font-05: 70px; /* h1 and other large text */
  --br-media-font-c1: 55px; /* custom large text */
  --br-media-font-c2: 75px; /* custom large text */
  
  /** Padding that adjusts with screen size **/

  --br-scalable-padding-01: 80px 280px; /*commonly used on blocks within pages */
  --br-scalable-padding-02: 40px 280px; /* About us page */
  --br-scalable-padding-03: 60px; /* not used yet */
  --br-scalable-padding-04: 80px; /* not used yet */
  --br-scalable-padding-05: 100px; /* not used yet */
/** scalable max content width 
    good for blocks centered on pages 
**/
  --br-scalable-max-width-large: 95%; /* 97% of max */
  --br-scalable-max-width-medium: 75%; /* 75% of max */
  --br-scalable-max-width-small: 50%; /* 50% of max */

@media (max-width: 1799px) {
  --br-scalable-padding-01: 80px 180px;
}

@media (max-width: 1549px) {
  --br-scalable-padding-01: 80px 100px;
  --br-scalable-padding-02: 40px 100px;
}

@media (max-width: 1499px) {
  --br-media-font-01: 14px;
  --br-media-font-02: 22px;
  --br-media-font-03: 28px;
  --br-media-font-04: 34px;
  --br-media-font-05: 60px;
  --br-media-font-c1: 40px;
  --br-media-font-c2: 55px;
  --br-scalable-padding-01: 60px 50px;
  --br-scaleable-01: 75px;
  --br-scaleable-02: 150px;
  --br-scaleable-03: 250px;
  --br-scaleable-04: 350px;
  --br-scaleable-05: 450px;
  }
  
  @media (max-width: 1023px) {
    --br-media-font-01: 12px;
    --br-media-font-02: 18px;
    --br-media-font-03: 20px;
    --br-media-font-04: 24px;
    --br-media-font-05: 42px;
    --br-media-font-c1: 30px;
    --br-media-font-c2: 45px;
    --br-scalable-padding-01: 40px 20px;
    --br-scalable-padding-02: 20px 50px;
    --br-margin-top-scaleable-01: 100px;
    --br-margin-bottom-scaleable-01: 100px;
    --br-scaleable-01: 50px;
    --br-scaleable-02: 125px;
    --br-scaleable-03: 200px;
    --br-scaleable-04: 300px;
    --br-scaleable-05: 400px;
  }
  
  @media (max-width: 739px) {
    --br-media-font-01: 12px;
    --br-media-font-02: 16px;
    --br-media-font-03: 18px;
    --br-media-font-04: 20px;
    --br-media-font-05: 30px;
    --br-media-font-c1: 25px;
    --br-media-font-c2: 35px;
    --br-margin-top-scaleable-01: 50px;
    --br-margin-bottom-scaleable-01: 50px;
    --br-scaleable-01: 25px;
    --br-scaleable-02: 50px;
    --br-scaleable-03: 150px;
    --br-scaleable-04: 200px;
    --br-scaleable-05: 300px;
  }

  @media (max-width: 499px) {
    --br-media-font-01: 12px;
    --br-media-font-02: 14px;
    --br-media-font-03: 16px;
    --br-media-font-04: 18px;
    --br-media-font-05: 28px;
    --br-media-font-c1: 22px;
    --br-media-font-c2: 35px;
  }

  --body-padding:20px 0;

}