/* === Font Face === */

@font-face {
	font-family: 'TT Octosquares';
	src: url('../fonts/TTOctosquares-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TT Octosquares';
	src: url('../fonts/TTOctosquares-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TT Octosquares';
	src: url('../fonts/TTOctosquares-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* === CSS Variables === */

:root {
	--color-bg: #E6E6E6;
	--color-accent: #839074;
	--color-text: #0D0D0D;
	--color-white: #FFFFFF;

	--font-primary: 'TT Octosquares', sans-serif;

	--container-max: 1920px;
	--container-padding: 40px;

	--header-height: 150px;
}

/* === Reset === */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-bg);
}

a {
	text-decoration: none;
	color: inherit;
}

ul, ol {
	list-style: none;
}

img, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}