html {
			/* this allows for easy conversion between px and rem, so 10 px is 1rem */
			font-size: 62.5% !important;
		}
		
				
		:root {
			--color-primary: #db2c2b;
		  	--color-primary-50: #fbeaea;
		  	--color-primary-100: #f5c4c4;
		  	--color-primary-200: #ee9e9d;
		  	--color-primary-300: #e87877;
		  	--color-primary-400: #e15251;
		  	--color-primary-500: #db2c2b;
		  	--color-primary-600: #b42423;
		  	--color-primary-700: #8c1c1c;
		  	--color-primary-800: #651414;
		  	--color-primary-900: #3d0c0c;
		  	--color-secondary: #fecd07;
		  	--color-secondary-50: #fffae6;
		  	--color-secondary-100: #fff1ba;
		  	--color-secondary-200: #ffe88d;
		  	--color-secondary-300: #fedf60;
		  	--color-secondary-400: #fed634;
		  	--color-secondary-500: #fecd07;
		  	--color-secondary-600: #d0a806;
		  	--color-secondary-700: #a38304;
		  	--color-secondary-800: #755e03;
		  	--color-secondary-900: #473902;
		  	--color-text: #1C1917;
		  	--color-accent: #3B82F6;
		  	--color-accent-50: #EFF6FF;
		  	--color-accent-100: #DBEAFE;
		  	--color-accent-200: #BFDBFE;
		  	--color-accent-300: #93C5FD;
		  	--color-accent-400: #60A5FA;
		  	--color-accent-500: #3B82F6;
		  	--color-accent-600: #2563EB;
		  	--color-accent-700: #1D4ED8;
		  	--color-accent-800: #1E40AF;
		  	--color-accent-900: #1E3A8A;
		  	--color-gray-50: #FAFAF9;
		  	--color-gray-100: #F5F5F4;
		  	--color-gray-200: #E7E5E4;
		  	--color-gray-300: #D6D3D1;
		  	--color-gray-400: #A8A29E;
		  	--color-gray-500: #78716C;
		  	--color-gray-600: #57534E;
		  	--color-gray-700: #44403C;
		  	--color-gray-800: #292524;
		  	--color-gray-900: #1C1917;
		  	--color-light: #fff;
			  
			--color-primary-rgbv: 219,44,43;
		  	--color-primary-50-rgbv: 251,234,234;
		  	--color-primary-100-rgbv: 245,196,196;
		  	--color-primary-200-rgbv: 238,158,157;
		  	--color-primary-300-rgbv: 232,120,119;
		  	--color-primary-400-rgbv: 225,82,81;
		  	--color-primary-500-rgbv: 219,44,43;
		  	--color-primary-600-rgbv: 180,36,35;
		  	--color-primary-700-rgbv: 140,28,28;
		  	--color-primary-800-rgbv: 101,20,20;
		  	--color-primary-900-rgbv: 61,12,12;
		  	--color-secondary-rgbv: 254,205,7;
		  	--color-secondary-50-rgbv: 255,250,230;
		  	--color-secondary-100-rgbv: 255,241,186;
		  	--color-secondary-200-rgbv: 255,232,141;
		  	--color-secondary-300-rgbv: 254,223,96;
		  	--color-secondary-400-rgbv: 254,214,52;
		  	--color-secondary-500-rgbv: 254,205,7;
		  	--color-secondary-600-rgbv: 208,168,6;
		  	--color-secondary-700-rgbv: 163,131,4;
		  	--color-secondary-800-rgbv: 117,94,3;
		  	--color-secondary-900-rgbv: 71,57,2;
		  	--color-text-rgbv: 28,25,23;
		  	--color-accent-rgbv: 59,130,246;
		  	--color-accent-50-rgbv: 239,246,255;
		  	--color-accent-100-rgbv: 219,234,254;
		  	--color-accent-200-rgbv: 191,219,254;
		  	--color-accent-300-rgbv: 147,197,253;
		  	--color-accent-400-rgbv: 96,165,250;
		  	--color-accent-500-rgbv: 59,130,246;
		  	--color-accent-600-rgbv: 37,99,235;
		  	--color-accent-700-rgbv: 29,78,216;
		  	--color-accent-800-rgbv: 30,64,175;
		  	--color-accent-900-rgbv: 30,58,138;
		  	--color-gray-50-rgbv: 250,250,249;
		  	--color-gray-100-rgbv: 245,245,244;
		  	--color-gray-200-rgbv: 231,229,228;
		  	--color-gray-300-rgbv: 214,211,209;
		  	--color-gray-400-rgbv: 168,162,158;
		  	--color-gray-500-rgbv: 120,113,108;
		  	--color-gray-600-rgbv: 87,83,78;
		  	--color-gray-700-rgbv: 68,64,60;
		  	--color-gray-800-rgbv: 41,37,36;
		  	--color-gray-900-rgbv: 28,25,23;
		  	--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 */ 
					  
		}