@custom-media --viewport-xlarge (width > 1350px);
@custom-media --viewport-large (width > 950px) and (width < 1350px);
@custom-media --viewport-alldesktop (width > 950px);
@custom-media --viewport-alldevice (width <= 950px);
@custom-media --viewport-medium-up (width >= 800px);
@custom-media --viewport-medium (width <= 950px) and (width >= 800px);
@custom-media --viewport-small (width < 800px);
@custom-media --viewport-notsmall (width >= 800px);

@custom-selector :--heading h1, h2, h3;
@custom-selector :--link &:hover, &:active;

:root {
	--body-font: "sofia-pro", sans-serif;
	--serif-type: "adobe-garamond-pro", serif;
	--global-links: #033963;
	--global-body-text: #252629;
	--global-highlight-color: #033963;
	--gray-900: #252629;
	--gray-700: #3E3F45;
	--gray-600: #738087;
	--gray-500: #C2C8CC;
	--gray-400: #E9E9EB;
	--gray-300: #EEEEF0;
	--gray-200: #F2F2F7;
	--gray-100: #F8F8FA;
	--body-text-1: var(--gray-900);
	--body-text-2: var(--gray-700);
	--body-text-3: var(--gray-600);
	--primary-accent: #996E2E;
	--muted-accent: #293A47;
	--highlight-color: #996E2E;
	--links: #996E2E;
	--secondary-links: #09304F;
	--titles: var(--gray-900);
	--link-hover: #996E2E;
	--main-button: #09304F;
	--page-bg: var(--gray-100);
	--secondary-page-bg: var(--gray-200);
	--inverse-page-bg: #293A47;
	--inverse-page-bg-text: var(--gray-100);
	--header-bg: #ffffff;
	--header-text-color: var(--gray-100);
	--header-text-color-rgb: 248,248,250;
	--header-dropdown: var(--gray-200);
	--header-font: "adobe-garamond-pro", serif;
	--header-font2: "adobe-garamond-pro", serif;
}