@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100;
	src: local('Montserrat Thin'), url('fonts/Montserrat-Thin.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 100;
	src: local('Montserrat Thin Italic'), url('fonts/Montserrat-ThinItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 200;
	src: local('Montserrat ExtraLight'), url('fonts/Montserrat-ExtraLight.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 200;
	src: local('Montserrat ExtraLight Italic'), url('fonts/Montserrat-ExtraLightItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: local('Montserrat Light'), url('fonts/Montserrat-Light.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300;
	src: local('Montserrat Light Italic'), url('fonts/Montserrat-LightItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat Regular'), url('fonts/Montserrat-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 400;
	src: local('Montserrat Italic'), url('fonts/Montserrat-Italic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	src: local('Montserrat Medium'), url('fonts/Montserrat-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 500;
	src: local('Montserrat Medium Italic'), url('fonts/Montserrat-MediumItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: local('Montserrat SemiBold'), url('fonts/Montserrat-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 600;
	src: local('Montserrat SemiBold Italic'), url('fonts/Montserrat-SemiBoldItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat Bold'), url('fonts/Montserrat-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 700;
	src: local('Montserrat Bold Italic'), url('fonts/Montserrat-BoldItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 800;
	src: local('Montserrat ExtraBold'), url('fonts/Montserrat-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 800;
	src: local('Montserrat ExtraBold Italic'), url('fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: local('Montserrat Black'), url('fonts/Montserrat-Black.woff') format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 900;
	src: local('Montserrat Black Italic'), url('fonts/Montserrat-BlackItalic.woff') format('woff');
}

:root {
	--ff-primary: Montserrat, sans-serif;
	--fs-primary: var(--fs-medium);

	--fw-thin: 100;
	--fw-extralight: 200;
	--fw-light: 300;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--fw-black: 900;

	--fw-hairline: var(--fw-thin);
	--fw-ultralight: var(--fw-extralight);
	--fw-regular: var(--fw-normal);
	--fw-demibold: var(--fw-semibold);
	--fw-ultrabold: var(--fw-extrabold);
	--fw-heavy: var(--fw-black);


	--color-primary: #141414; /* black */
	--color-accent: #c7050c; /* red */

	--color-brand: var(--color-accent);
	--color-brand-alt: #22c4d2; /* cyan */

	--color-brand-primary: var(--color-primary);
	--color-brand-accent: var(--color-accent);

	--logo-brand: url('imgs/logo.png');
	--logo-brand-small: url('imgs/logo.png');

	--color-warnings: tomato;

	--thumbnail-ratio: 16 / 9;
	--mosaic-min-width: 40ch;
}

@media screen and (max-width: 960px){
	html {
		font-size: var(--fs-smaller);
	}
}