/* Nunito */
@font-face {
	font-family: 'Nunito';
	src: 	url("/resources/fonts/Nunito/Nunito-VariableFont_wght.ttf") format("truetype supports variations"),
			url("/resources/fonts/Nunito/Nunito-VariableFont_wght.ttf") format("truetype-variations");
	font-weight: 200 1000;
}

@font-face {
	font-family: 'Exo2';
	src: 	url("/resources/fonts/Exo2/Exo2-VariableFont_wght.ttf") format("truetype supports variations"),
			url("/resources/fonts/Exo2/Exo2-VariableFont_wght.ttf") format("truetype-variations");
	font-weight: 200 1000;
}

/* Nunito_Sans */
/* Выглядит очень обычным, тот же нунито, только без скруглений. Похож на какойто Arial */
/* @font-face {
	font-family: 'Nunito_Sans';
	src: 	url("../fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype supports variations"),
			url("../fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype-variations");
} */

/* Rubik */
/* Ровно расположен, но более жирный и мелкий (17px) */
/* @font-face {
	font-family: 'Rubik';
	src: 	url("../fonts/Rubik/Rubik-VariableFont_wght.ttf") format("truetype supports variations"),
			url("../fonts/Rubik/Rubik-VariableFont_wght.ttf") format("truetype-variations");
	font-weight: 100 1000;
} */

/* tilda_sans */
/* Идеальное положение, очень обычный, цифры крупнее текста */
/* @font-face {
	font-family: 'tilda_sans';
	src: 	url("../fonts/tilda_sans/tilda-sans_vf.ttf") format("truetype supports variations"),
			url("../fonts/tilda_sans/tilda-sans_vf.ttf") format("truetype-variations");
} */

/* Advent_Pro */
/* Значительно мельче (18-19px), малый интервал, конденсед, странное написание, есть ось ширины, странное написание некоторых символов */
/* @font-face {
	font-family: 'Advent_Pro';
	src: 	url("../fonts/Advent_Pro/AdventPro-VariableFont_wdth,wght.ttf") format("truetype supports variations"),
			url("../fonts/Advent_Pro/AdventPro-VariableFont_wdth,wght.ttf") format("truetype-variations");
} */

/* geologica */
/* Очень обычный, идеально расположен, более жирный, нет оси жирности */
/* @font-face {
	font-family: 'geologica';
	src: 	url("../fonts/geologica/Geologica[CRSV,SHRP,slnt,wght].ttf") format("truetype supports variations"),
			url("../fonts/geologica/Geologica[CRSV,SHRP,slnt,wght].ttf") format("truetype-variations");
} */

/* PT_Root_UI */
/* Идеально расположен, очень обычный, четкий, хорошо читается, нет оси ширины, малый набор толщин */
/* @font-face {
	font-family: 'PT_Root_UI';
	src: 	url("../fonts/PT_Root_UI/PT-Root-UI_VF.ttf") format("truetype supports variations"),
			url("../fonts/PT_Root_UI/PT-Root-UI_VF.ttf") format("truetype-variations");
} */





/* Exo2 */
/* Очень смещен */
/* @font-face {
	font-family: 'Nunito';
	src: 	url("/resources/fonts/Exo2/Exo2-VariableFont_wght.ttf") format("truetype supports variations"),
			url("/resources/fonts/Exo2/Exo2-VariableFont_wght.ttf") format("truetype-variations");
} */




body{
	/* display: flex; */
	margin: 0;
	background-color: white;
	/* justify-content: center; */
	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-size: var(--font-size);
}

#page{
	display: table;
	width: 100%;
	max-width: 1920px;
}
#page > div{
	display: flex;
	/* min-height: 100vh; Из-за этого стиля, при уменьшении масштаба высота страницы становится аномально большой, снизу появляется большая область пустоты */
	background-color: #fff;
	flex-direction: column;
	align-items: center;
}
#page > div.grey{
	background-color: var(--grey-10);
}



/* Input */
input[type = "number"],
input[type = "text"]{
	font-family: var(--font-family);
}

/* Headers */
h1, h2, h3, h4, h5{
	line-height: 1;
	font-weight: 100;
}