:root {
	--rem-base: 10px;
	--base-font-size: 20px;
	--base-line-height: 1.7;
	--base-font-weight: 400;
	--vertical-rhythm: calc(var(--base-line-height) * 1em);
	--font-size-lg: calc(var(--base-font-size) * 1.5);
	--font-onest: "Onest";
	--font-barlow: "Barlow";
	--font-barlow-cn: "Barlow Semi Condensed";
	--base-main-font: var(--font-onest);
	--base-font-sans-serif: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
	--base-font-serif: "Times New Roman", "Times", "Baskerville", "Georgia", serif;
	--base-font: var(--base-main-font), var(--base-font-sans-serif);
	--accent-font: var(--font-barlow), var(--base-font-sans-serif);
	--color-white: #fff;
	--color-white--rgb: 255, 255, 255;
	--color-white--darken: #ccc;
	--color-white--lighten: white;
	--color-black: #000;
	--color-black--rgb: 0, 0, 0;
	--color-black--darken: black;
	--color-black--lighten: rgb(63.75, 63.75, 63.75);
	--color-gray-100: #f1f1f1;
	--color-gray-100--rgb: 241, 241, 241;
	--color-gray-100--darken: #bebebe;
	--color-gray-100--lighten: white;
	--color-gray-200: #f3f3f3;
	--color-gray-200--rgb: 243, 243, 243;
	--color-gray-200--darken: silver;
	--color-gray-200--lighten: white;
	--color-gray-300: #c0c0c0;
	--color-gray-300--rgb: 192, 192, 192;
	--color-gray-300--darken: #8d8d8d;
	--color-gray-300--lighten: white;
	--color-blue-600: #6d99cd;
	--color-blue-600--rgb: 109, 153, 205;
	--color-blue-600--darken: rgb(54.0816326531, 101.6734693878, 157.9183673469);
	--color-blue-600--lighten: rgb(203.9744897959, 219.3520408163, 237.5255102041);
	--color-blue-700: #475a96;
	--color-blue-700--rgb: 71, 90, 150;
	--color-blue-700--darken: rgb(38.2307692308, 48.4615384615, 80.7692307692);
	--color-blue-700--lighten: rgb(145.3846153846, 159.2692307692, 203.1153846154);
	--color-blue-800: #20316a;
	--color-blue-800--rgb: 32, 49, 106;
	--color-blue-800--darken: rgb(8.347826087, 12.7826086957, 27.652173913);
	--color-blue-800--lighten: rgb(67.1956521739, 97.3152173913, 198.3043478261);
	--color-blue-850: #182757;
	--color-blue-850--rgb: 24, 39, 87;
	--color-blue-850--darken: rgb(1.9459459459, 3.1621621622, 7.0540540541);
	--color-blue-850--lighten: rgb(51.5675675676, 83.7972972973, 186.9324324324);
	--color-blue-900: #0d274c;
	--color-blue-900--rgb: 13, 39, 76;
	--color-blue-900--darken: black;
	--color-blue-900--lighten: rgb(31.6235955056, 94.8707865169, 184.8764044944);
	--color-red: #de1f22;
	--color-red--rgb: 222, 31, 34;
	--color-red--darken: rgb(132.4980237154, 18.5019762846, 20.2924901186);
	--color-red--lighten: rgb(239.1324110672, 141.3675889328, 142.9031620553);
	--brand-color: var(--color-black);
	--accent-color: var(--color-blue-800);
	--accent-blog-color: var(--accent-color);
	--caption-color: #b0aeae;
	--base-text-color: rgba(var(--color-black--rgb), 0.8);
	--base-link-color: var(--color-red);
	--h1-h6-color: var(--accent-color);
	--animation-duration: 0.3s;
	--animation-timing-function: ease;
	--container: 1440px;
	--container-md: 1300px;
	--container-sm: 1200px;
	--gutter: 25px;
	--offset-header: 105px;
	--base-radius: 1.25rem;
	--input-x: 2.5rem;
	--input-y: 1.5rem;
	--input-color: var(--brand-color);
	--input-placeholder-color: var(--brand-color);
	--input-bg-color: var(--color-gray-100);
	--input-radius: 0;
	--input-border: 2px;
	--input-border-color: transparent;
	--input-focus-border-color: var(--color-gray-200);
	--input-fz: 2rem;
	--input-lh: 1.2;
	--form-theme-color: var(--brand-color);
	--checkbox-size: 4rem;
	--radio-size: 4rem;
	--label-fz: var(--base-font-size);
	--label-lh: 1.2;
	--label-color: currentColor;
	--error-color: var(--color-red);
	--error-bg-color: var(--color-red);
	--form-col-gutter: 3rem;
	--form-row-margin: var(--form-col-gutter) * 1.5;
	--h1: 10rem;
	--h2: 8rem;
	--h3: 6rem;
	--h4: 4.5rem;
	--h5: 3rem;
	--h6: 2rem;
}
:root .dark {
	--h1-h6-color: var(--color-white);
	--base-text-color: var(--color-white);
}
@media (max-width: 1199px) {
	:root {
		--base-font-size: 18px;
	}
}
@media (max-width: 1023px) {
	:root {
		--offset-header: 75px;
	}
	:root {
		--h1: 8rem;
		--h2: 7rem;
		--h3: 5rem;
		--h4: 4rem;
		--h5: 3rem;
		--h6: 2rem;
	}
}
@media (max-width: 767px) {
	:root {
		--base-font-size: 16px;
	}
}
@media (max-width: 666px) {
	:root {
		--gutter: 20px;
	}
	:root {
		--offset-header: 60px;
	}
	:root {
		--h1: 7rem;
		--h2: 6rem;
		--h3: 4.5rem;
		--h4: 3.2rem;
		--h5: 2.4rem;
		--h6: 16px;
	}
}
@media (max-width: 567px) {
	:root {
		--h1: 6rem;
		--h2: 5rem;
		--h3: 4rem;
		--h4: 3.2rem;
		--h5: 2.4rem;
		--h6: 16px;
	}
}
@media (min-width: 812px) and (max-height: 414px) and (orientation: landscape) {
	:root {
		--gutter: 50px;
	}
}