html {
			/* this allows for easy conversion between px and rem, so 10 px is 1rem */
			font-size: 62.5% !important;
		}
		
				
		:root {
			--color-primary: #3B82F6;
		  	--color-primary-50: #EFF6FF;
		  	--color-primary-100: #DBEAFE;
		  	--color-primary-200: #BFDBFE;
		  	--color-primary-300: #93C5FD;
		  	--color-primary-400: #60A5FA;
		  	--color-primary-500: #3B82F6;
		  	--color-primary-600: #2563EB;
		  	--color-primary-700: #1D4ED8;
		  	--color-primary-800: #1E40AF;
		  	--color-primary-900: #1E3A8A;
		  	--color-secondary: #3B82F6;
		  	--color-secondary-50: #EFF6FF;
		  	--color-secondary-100: #DBEAFE;
		  	--color-secondary-200: #BFDBFE;
		  	--color-secondary-300: #93C5FD;
		  	--color-secondary-400: #60A5FA;
		  	--color-secondary-500: #3B82F6;
		  	--color-secondary-600: #2563EB;
		  	--color-secondary-700: #1D4ED8;
		  	--color-secondary-800: #1E40AF;
		  	--color-secondary-900: #1E3A8A;
		  	--color-text: #18181B;
		  	--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: #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: 59,130,246;
		  	--color-primary-50-rgbv: 239,246,255;
		  	--color-primary-100-rgbv: 219,234,254;
		  	--color-primary-200-rgbv: 191,219,254;
		  	--color-primary-300-rgbv: 147,197,253;
		  	--color-primary-400-rgbv: 96,165,250;
		  	--color-primary-500-rgbv: 59,130,246;
		  	--color-primary-600-rgbv: 37,99,235;
		  	--color-primary-700-rgbv: 29,78,216;
		  	--color-primary-800-rgbv: 30,64,175;
		  	--color-primary-900-rgbv: 30,58,138;
		  	--color-secondary-rgbv: 59,130,246;
		  	--color-secondary-50-rgbv: 239,246,255;
		  	--color-secondary-100-rgbv: 219,234,254;
		  	--color-secondary-200-rgbv: 191,219,254;
		  	--color-secondary-300-rgbv: 147,197,253;
		  	--color-secondary-400-rgbv: 96,165,250;
		  	--color-secondary-500-rgbv: 59,130,246;
		  	--color-secondary-600-rgbv: 37,99,235;
		  	--color-secondary-700-rgbv: 29,78,216;
		  	--color-secondary-800-rgbv: 30,64,175;
		  	--color-secondary-900-rgbv: 30,58,138;
		  	--color-text-rgbv: 24,24,27;
		  	--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,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 */ 
					  
		}