html {
			/* this allows for easy conversion between px and rem, so 10 px is 1rem */
			font-size: 62.5% !important;
		}
		
				
		:root {
			--color-primary: #335ea5;
		  	--color-primary-50: #ebeff6;
		  	--color-primary-100: #c6d2e6;
		  	--color-primary-200: #a1b5d6;
		  	--color-primary-300: #7c98c5;
		  	--color-primary-400: #587bb5;
		  	--color-primary-500: #335ea5;
		  	--color-primary-600: #2a4d87;
		  	--color-primary-700: #213c6a;
		  	--color-primary-800: #172b4c;
		  	--color-primary-900: #0e1a2e;
		  	--color-secondary: #cc3e32;
		  	--color-secondary-50: #faeceb;
		  	--color-secondary-100: #f1c9c6;
		  	--color-secondary-200: #e8a6a1;
		  	--color-secondary-300: #de837c;
		  	--color-secondary-400: #d56157;
		  	--color-secondary-500: #cc3e32;
		  	--color-secondary-600: #a73329;
		  	--color-secondary-700: #832820;
		  	--color-secondary-800: #5e1d17;
		  	--color-secondary-900: #39110e;
		  	--color-text: #18181B;
		  	--color-accent: #ffd703;
		  	--color-accent-50: #fffbe6;
		  	--color-accent-100: #fff4b8;
		  	--color-accent-200: #ffed8b;
		  	--color-accent-300: #ffe55e;
		  	--color-accent-400: #ffde30;
		  	--color-accent-500: #ffd703;
		  	--color-accent-600: #d1b002;
		  	--color-accent-700: #a38a02;
		  	--color-accent-800: #756301;
		  	--color-accent-900: #473c01;
		  	--color-gray-50: #FAFAFA;
		  	--color-gray-100: #F4F4F5;
		  	--color-gray-200: #E4E4E7;
		  	--color-gray-300: #D4D4D8;
		  	--color-gray-400: #A1A1AA;
		  	--color-gray-500: #71717A;
		  	--color-gray-600: #52525B;
		  	--color-gray-700: #3F3F46;
		  	--color-gray-800: #27272A;
		  	--color-gray-900: #18181B;
		  	--color-light: #fff;
			  
			--color-primary-rgbv: 51,94,165;
		  	--color-primary-50-rgbv: 235,239,246;
		  	--color-primary-100-rgbv: 198,210,230;
		  	--color-primary-200-rgbv: 161,181,214;
		  	--color-primary-300-rgbv: 124,152,197;
		  	--color-primary-400-rgbv: 88,123,181;
		  	--color-primary-500-rgbv: 51,94,165;
		  	--color-primary-600-rgbv: 42,77,135;
		  	--color-primary-700-rgbv: 33,60,106;
		  	--color-primary-800-rgbv: 23,43,76;
		  	--color-primary-900-rgbv: 14,26,46;
		  	--color-secondary-rgbv: 204,62,50;
		  	--color-secondary-50-rgbv: 250,236,235;
		  	--color-secondary-100-rgbv: 241,201,198;
		  	--color-secondary-200-rgbv: 232,166,161;
		  	--color-secondary-300-rgbv: 222,131,124;
		  	--color-secondary-400-rgbv: 213,97,87;
		  	--color-secondary-500-rgbv: 204,62,50;
		  	--color-secondary-600-rgbv: 167,51,41;
		  	--color-secondary-700-rgbv: 131,40,32;
		  	--color-secondary-800-rgbv: 94,29,23;
		  	--color-secondary-900-rgbv: 57,17,14;
		  	--color-text-rgbv: 24,24,27;
		  	--color-accent-rgbv: 255,215,3;
		  	--color-accent-50-rgbv: 255,251,230;
		  	--color-accent-100-rgbv: 255,244,184;
		  	--color-accent-200-rgbv: 255,237,139;
		  	--color-accent-300-rgbv: 255,229,94;
		  	--color-accent-400-rgbv: 255,222,48;
		  	--color-accent-500-rgbv: 255,215,3;
		  	--color-accent-600-rgbv: 209,176,2;
		  	--color-accent-700-rgbv: 163,138,2;
		  	--color-accent-800-rgbv: 117,99,1;
		  	--color-accent-900-rgbv: 71,60,1;
		  	--color-gray-50-rgbv: 250,250,250;
		  	--color-gray-100-rgbv: 244,244,245;
		  	--color-gray-200-rgbv: 228,228,231;
		  	--color-gray-300-rgbv: 212,212,216;
		  	--color-gray-400-rgbv: 161,161,170;
		  	--color-gray-500-rgbv: 113,113,122;
		  	--color-gray-600-rgbv: 82,82,91;
		  	--color-gray-700-rgbv: 63,63,70;
		  	--color-gray-800-rgbv: 39,39,42;
		  	--color-gray-900-rgbv: 24,24,27;
		  	--color-light-rgbv: 255,255,255;
			--border-width: 1px;
			--color-background-light: var(--color-gray-50);
			--color-background-dark: var(--color-text);
			--color-dimmed: rgba(var(--color-text-rgbv), .5);
			--font-body-normal: 400;
			--font-body-bold: 700;
			--font-heading-normal: 700;
			--font-heading-bold: 700;
			--height-small: 30rem;
			--height-normal: 40rem;
			--height-big: 50rem;
			--padding-small:1.2rem;
			--padding-normal:2.4rem;
			--padding-big:4.8rem;
			--rounded-small: 8px;
			--rounded-normal: 40px;
			--width-small: 40rem;
			--width-normal: 70rem;
			--width-big: 90rem;  
			  
			  
			
			/* BREAKDANCE SPECIFIC VARIABLES */
			--column-gap-small: 1.2rem;
			--column-gap-normal: var(--bde-column-gap);
			--column-gap-big: 4.8rem;
			--content-gap-small: 0.8rem;
			--content-gap-normal: 2.4rem;
			--content-gap-big: 4.8rem;
			--gap-small: var(--content-gap-small);
			--gap-normal: var(--content-gap-normal);
			--gap-big: var(--content-gap-big);  
			--font-heading: var(--bde-heading-font-family);
		  	--font-body: var(--bde-body-font-family);		  	
		  	--text-xs: calc( var(--bde-body-font-size) - .4rem );
		  	--text-sm: calc( var(--bde-body-font-size) - .2rem );
		  	--text-md: var(--bde-body-font-size);
		  	--text-lg: calc( var(--bde-body-font-size) + .2rem );
		  	--text-xl: calc( var(--bde-body-font-size) + .4rem );
		  	--text-2xl: calc( var(--bde-body-font-size) + .6rem );
		  	--text-h1: var(--bde-h1-font-size);
		  	--text-h2: var(--bde-h2-font-size);
		  	--text-h3: var(--bde-h3-font-size);
		  	--text-h4: var(--bde-h4-font-size);
		  	--text-h5: var(--bde-h5-font-size);
		  	--text-h6: var(--bde-h6-font-size);		  	
		  	--transition-base: var(--bde-transition-duration);		  	
		  	--border-base: var(--border-base);		  	
		  	--w-xs: calc( var(--bde-section-width) * 0.1 );
		  	--w-sm: calc( var(--bde-section-width) * 0.2 );
		  	--w-md: calc( var(--bde-section-width) * 0.4 );
		  	--w-lg: calc( var(--bde-section-width) * 0.6 );
		  	--w-xl: calc( var(--bde-section-width) * 0.8 );
		  	--w-2xl: calc( var(--bde-section-width) * 0.9 );
		  	--w-full: var(--bde-section-width);		  	
		  	--section-padding-horizontal: var(--bde-section-horizontal-padding);
		  	--section-padding-vertical: var(--bde-section-vertical-padding);
			  
			  
			/* OVERRIDES OR ADDS */ 
			--font-body-normal: 300;
--gap-small: var(--content-gap-small);
--gap-normal: var(--content-gap-normal);
--gap-big: var(--content-gap-big);
--column-gap-big: 6.4rem;
--rounded-small: 5px;
--rounded-normal: 5px;
		  
		}