@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Instrument+Serif:ital@0;1&family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=menu");
@import url("https://use.fontawesome.com/releases/v7.2.0/css/all.css");


:root {
	--color-black-blackmamba: #332F21;			/* Pantone Black 2 C */
	--color-gold-harvest: #d19000;				/* Pantone 7550 C */
	--color-teal-slate: #508590;				/* Pantone 2212 C */
	--color-rye-golden: #8b7c5e;				/* Pantone 2326 C */
	--color-cream-pearly: #d6d2c4;				/* Pantone 7527 C */

	--color-gray-dark: #63666a;				/* Pantone Cool Gray 10 C */
	--color-gray: #a8a8aa;						/* Pantone Cool Gray 6 C */
	--color-gray-light: #d9d9d6;				/* Pantone Cool Gray 1 C */
	--color-white-off: #f0f0f0;

	--button-border-radius: 2rem;
	--container-border-radius: 0.6rem;

	--container-margin-xsmall: 1.08rem;
	--container-margin-small: 2.16rem;
	--container-margin-medium: 4.32rem;
	--container-margin-large: 6.48rem;
	--container-margin-xlarge: 10.8rem;

	--container-padding: 0.88rem;

	--font-heading: "Merriweather Sans", sans-serif;
	--font-sans-serif: "Outfit", sans-serif;
	--font-serif: "Instrument Serif", serif;
	--font-size-default: 0.88rem;
}
* {
	margin: 0px;
	padding: 0px;
}
html {								/* Default width = 320px (iPhone 4/5/SE portrait) */
	font-size: 16px;
}
body {
	font-family: var(--font-sans-serif);
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 300;
	min-width: 320px;
}
a,
a:visited {
	color: var(--color-gold-harvest);
	-moz-text-decoration-color: var(--color-gray-light);
		-webkit-text-decoration-color: var(--color-gray-light);
		text-decoration-color: var(--color-gray-light);
	-moz-text-decoration-style: dotted;
		-webkit-text-decoration-style: dotted;
		text-decoration-style: dotted;
	text-underline-offset: 4px;
}
a:hover,
a:focus {
	-moz-text-decoration-color: var(--color-gold-harvest);
		-webkit-text-decoration-color: var(--color-gold-harvest);
		text-decoration-color: var(--color-gold-harvest);
	-moz-text-decoration-style: solid;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
}
a.btn,
a.btn:visited {
	border-radius: var(--button-border-radius);
	background-color: var(--color-teal-slate);
	font-weight: 500;
	padding: 0.52rem 2rem;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
a.btn:hover,
a.btn:focus {
	opacity: 0.8;
}





@media (min-width: 375px) {					/* Width >= 375 (iPhone 6/7/8/SE/X portrait) */
	html {
		font-size: 17px;
	}
}
@media (min-width: 390px) {					/* Width >= 390 (iPhone 12 Pro portrait) */
	html {
		font-size: 17.5px;
	}
}
@media (min-width: 402px) {					/* Width >= 414 (iPhone 16 Pro portrait) */
	html {
		font-size: 18px;
	}
}
@media (min-width: 414px) {					/* Width >= 414 (iPhone 6+/7+/8+, XR portrait) */
	html {
		font-size: 18.5px;
	}
}
@media (min-width: 430px) {					/* Width >= 430 (iPhone 14 Pro Max portrait) */
	html {
		font-size: 19.5px;
	}
}
@media (min-width: 551px) {					/* Width >= 551 */
	:root {
		--container-margin-xsmall: 1.6rem;
		--container-margin-small: 3.2rem;
		--container-margin-medium: 6.4rem;
		--container-margin-large: 12.8rem;
		--container-margin-xlarge: 25.6rem;
	}
	html {
		font-size: 17.5px;
	}
}
@media (min-width: 678px) {					/* Width >= 768 (iPad portrait) */

}
@media (min-width: 768px) {					/* Width >= 768 (iPad portrait) */
	:root {
		--container-margin-xsmall: 2rem;
		--container-margin-small: 4rem;
		--container-margin-medium: 8rem;
		--container-margin-large: 16rem;
		--container-margin-xlarge: 24rem;
	}
}
@media (min-width: 820px) {					/* Width >= 820 (iPad Air portrait) */

}
@media (min-width: 981px) {					/* Width >= 981 (Small desktop) */
	html {
		font-size: 18px;
	}
}
@media (min-width: 1024px) {					/* Width >= 1024 (iPad landscape) */
	
}
@media (min-width: 1180px) {					/* Width >= 1180 (iPad Air landscape, desktop medium) */

}
@media (min-width: 1366px) {					/* Width >= 1366 (iPad Pro landscape, MacBook desktop) */

}








@media (min-width: 1500px) {
	html {
		font-size: 18.5px;
	}
}
@media (min-width: 1800px) {
	html {
		font-size: 19px;
	}
}
@media (min-width: 2100px) {
	html {
		font-size: 19.5px;
	}
}
@media (min-width: 2700px) {
	html {
		font-size: 20px;
	}
}
@media (min-width: 2400px) {
	html {
		font-size: 20.5px;
	}
}
@media (min-width: 3000px) {
	html {
		font-size: 21px;
	}
}