:root {
	--font-scale: 1;

	--en-blue: #2863B0;
	--en-blue-alt: #F2F6FA;
	--eo-green: #009900;
	--eo-green-alt: #F0F9F0;
	--text: #1D2933;

	--en-blue-acrylic: #2863B033;
	--eo-green-acrylic: #00990033;

	--water-blue: #A4D0F9;
}

@media screen and ((max-width: 1000px) or (max-height: 800px)) {
	:root {
		--font-scale: 0.75;
	}
}

* {
	margin: 0;
	box-sizing: border-box;
	font-family: Lexend, sans-serif;
}

a,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	color: inherit;
}

header {
	position: static;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 62px;
	top: 0;
	z-index: 1;
	padding-top: 11px;
	padding-left: 2.3vw;
	padding-right: 2.3vw;

	img {
		height: 40px;
		z-index: inherit;
	}

	lang-switcher {
		margin-top: 7px;
		margin-right: 14px;
	}
}

.overlay {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	background-color: white;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;

	animation: fade 2s;
}

@keyframes fade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.overlay.move {
	animation: fade 2s forwards, fade 2s reverse forwards;
}

.mobile {
	display: none;
}

.fullwidth {
	display: unset;
}

button {
	cursor: pointer;
}

@media screen and (max-width: 480px) {
	.mobile {
		display: unset;
	}

	.fullwidth {
		display: none;
	}
}