:root {
	--rem-base: 8px;
	--base-font-size: clamp(16px, 2.4rem, 26px);
	--base-line-height: 1.8;
	--vertical-rhythm: calc(var(--base-line-height) * 0.6em);
	--ff-base: "Brut Grotesque";
	--ff-accent: "Copernicus";
	--ff-cursive: "Cedarville Cursive";
	--color-black: #020711;
	--color-black-lighten: #030e25;
	--color-white: #fff;
	--color-white-80: rgba(255, 255, 255, 0.8);
	--color-gray: #444;
	--color-gray-light: #eae4e1;
	--color-sand: #ccc8c7;
	--color-sand-light: #d0c2bb;
	--color-sand-dark: #c2b1a8;
	--color-blue: #00708c;
	--color-accent: var(--color-blue);
	--base-text-color: var(--color-black);
	--a-duration: 0.28s;
	--a-easing: ease;
	--container: 1028px;
	--container-md: 1075px;
	--container-xl: 1324px;
	--gutter: 30px;
	--h1: clamp(28px, 7.2rem, 72px);
	--h2: clamp(26px, 6.4rem, 64px);
	--h3: clamp(22px, 4.4rem, 44px);
	--h4: clamp(20px, 3.6rem, 36px);
	--h5: clamp(18px, 3.2rem, 32px);
	--h6: clamp(16px, 2.8rem, 28px);
}
@media (max-width: 1439px) {
	:root {
		--rem-base: 7px;
	}
}
@media (max-width: 1199px) {
	:root {
		--rem-base: 6px;
	}
}
@media (max-width: 1023px) {
	:root {
		--rem-base: 5px;
	}
}
@media (max-width: 666px) {
	:root {
		--gutter: 20px;
	}
}
@media (max-width: 567px) {
	:root {
		--h1: 28px;
		--h2: 26px;
		--h3: 22px;
		--h4: 20px;
		--h5: 18px;
		--h6: 16px;
	}
}
@media (min-width: 812px) and (max-height: 414px) and (orientation: landscape) {
	:root {
		--gutter: 50px;
	}
}