/*
--------------------------------------
Main header
--------------------------------------
*/

.main-header {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(150px + (200 - 150) * ((100vw - 320px) / (1920 - 320)));
}

.main-header--is-hidden {
	display: none;
	pointer-events: none;
}

body:not(#quiz) .main-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.main-header .main-header__img {
	height: 130px;
}

/*
--------------------------------------
Header quiz
--------------------------------------
*/

#quiz .main-header .main-header__img {
	height: calc(130px + (195 - 130) * ((100vw - 320px) / (1920 - 320)));
}

/*
--------------------------------------
Header results
--------------------------------------
*/

.header-results .header-content {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.results-mode .main-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	height: 100px;
}