@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Thin.woff2') format('woff2'),
		url('fonts/Raleway-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ThinItalic.woff2') format('woff2'),
		url('fonts/Raleway-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraLight.woff2') format('woff2'),
		url('fonts/Raleway-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraLightItalic.woff2') format('woff2'),
		url('fonts/Raleway-ExtraLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Light.woff2') format('woff2'),
		url('fonts/Raleway-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-LightItalic.woff2') format('woff2'),
		url('fonts/Raleway-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Regular.woff2') format('woff2'),
		url('fonts/Raleway-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Italic.woff2') format('woff2'),
		url('fonts/Raleway-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Medium.woff2') format('woff2'),
		url('fonts/Raleway-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-MediumItalic.woff2') format('woff2'),
		url('fonts/Raleway-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-SemiBold.woff2') format('woff2'),
		url('fonts/Raleway-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-SemiBoldItalic.woff2') format('woff2'),
		url('fonts/Raleway-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Bold.woff2') format('woff2'),
		url('fonts/Raleway-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-BoldItalic.woff2') format('woff2'),
		url('fonts/Raleway-BoldItalic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraBold.woff2') format('woff2'),
		url('fonts/Raleway-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraBoldItalic.woff2') format('woff2'),
		url('fonts/Raleway-ExtraBoldItalic.woff') format('woff');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Black.woff2') format('woff2'),
		url('fonts/Raleway-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-BlackItalic.woff2') format('woff2'),
		url('fonts/Raleway-BlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--ff-primary: 'Raleway', 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: #000;
	--color-accent: #dd4897;

	--color-brand: var(--color-accent);
	--color-brand-alt: #b359bf;

	--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);
	}
}