/* ------------------------------------------------------------ *\
	Variables
\* ------------------------------------------------------------ */

/*
	Breakpoint contract (desktop-first, max-width). Mirrored in js/globals/global.js.
	mobile-small:   374px
	mobile-medium:  575px
	mobile:         767px
	tablet:         1023px
	small-desktop:  1199px
	middle-desktop: 1399px
	large-desktop:  1599px
*/

:root {
	/* Colors */
	--c-navy: #001432;
	--c-navy-light: #063056;
	--c-green: #bcd800;
	--c-pink: #d9176d;
	--c-grey: #f0f0f0;
	--c-white: #fff;

	/* Fonts */
	--ff-regular: 'Montserrat Regular', sans-serif;
	--ff-medium: 'Montserrat Medium', sans-serif;
	--ff-bold: 'Montserrat Bold', sans-serif;

	--fs-h1: 50px;
	--fs-h2: 32px;
	--fs-h3: 22px;
	--fs-body: 18px;
	--fs-small: 14px;
	--lh-title: 1.5;

	/* Layout */
	--container-max-width: 1300px;
	--container-max-width-small: 1240px;
	--container-gutter: 20px;

	--header-offset: 50px;
	--header-height: 93px;

	/* Overlaps between sections */
	--countdown-overlap: 49px;
	--stats-overlap: 86px;
	--photo-overflow: 91px;

	--gap-big: 50px;
	--gap: 30px;
	--gap-medium: 20px;
	--gap-small: 16px;
	--gap-xs: 8px;

	--b-space-big: 40px;
	--b-space: 36px;
	--b-space-medium: 24px;
	--b-space-small: 20px;
	--b-space-xs: 8px;

	--section-spacing: 120px;

	--border-radius: 24px;
	--border-radius-mid: 16px;
	--border-radius-big: 66px;

	--t-dur: .3s;
}

@media (max-width: 1199px) {
	:root {
		--fs-h1: 42px;
		--section-spacing: 100px;
	}
}

@media (max-width: 1023px) {
	:root {
		--fs-h1: 38px;
		--fs-h2: 28px;
		--header-offset: 20px;
		--countdown-overlap: 40px;
		--gap-big: 40px;
		--section-spacing: 80px;
	}
}

@media (max-width: 575px) {
	:root {
		--lh-title: 1.2;
		--countdown-overlap: 72px;
		--stats-overlap: 171px;
		--photo-overflow: 35px;
	}
}

@media (max-width: 374px) {
	:root {
		--fs-h1: 32px;
		--fs-h2: 24px;
		--container-gutter: 16px;
		--b-space-big: 28px;
		--b-space: 24px;
	}
}