/* ------------------------------------------
 Variables
 ----------------------------------------- */
 
:root {
	
	 /* Colors */
	 
	--beige:		#f2f0eb;
	--text-black:	#353535;
	--black: 		#000;
	--blue:			#6445ff;
	--red:			#ff1229;
	--yellow:		#ffef00;
	--grey:			#747371;
	--light-grey:	#cacaca;

	--bg-color:					var(--beige);
	--text-color:				var(--text-black);
	--accent-color--primary:	var(--red);
	--accent-color--secondary:	var(--blue);
	--bg-color-slider:			var(--yellow);
	--alert-color:	var(--red);
	
	
	/* Dimensions */

	--post-content-max-width: 44em;
	
	--font-size: clamp(.96em, 0.625vw + .7rem, 1.3em);

	--line-height: 1.5;

	--font-size--hero: 3em;
	--font-size--xx-large: 1.75em;
	--font-size--x-large: 1.5em;
	--font-size--large: 1.2em;
	--font-size--small: .9em;
	--font-size--x-small: .7em;

	@media screen and (min-width: 800px) {
		--font-size--small: .8em;
		--font-size--xx-large: 1.8em;
		--font-size--hero: 4em;
	}
}