:root {
	--green: #879a48;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: inherit;
	font-style: inherit;
	line-height: inherit;
}

html, body {
	width: 100%;
	height: 100%;
	text-rendering: optimizeLegibility;
	font-family: 'Inter', sans-serif;
}

.clamp {
	height: inherit;
	padding: 0 40px;
	width: 100%;
}

.container {
	max-width: 1440px;
	height: inherit;
	margin: auto;
	display: flex;
	gap: 50px;
	justify-content: space-between;
	align-items: center;
}

header {
	font-size: 14px;
	font-weight: 500;

	.container-top, .container-bottom {
		height: 72px;
		width: 100%;
	}

	.container-bottom {
		height: 40px;
		background-color: #eff1eb;
	}

	nav ul {
		display: flex;
		list-style-type: none;
		gap: 20px;
	}

	img {
		height: 36px;
		transform: translate(3px);
	}
}

footer {
	width: 100%;
	.clamp {
		padding: 100px 40px;
	}
}

.flex, .flex-column {
	display: flex;
	gap: 20px;
	flex-direction: column;
}
.flex { flex-direction: row }

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

#main-header {
	grid-column: span 12;
	background: black;
	position: relative;
	width: 100%;
	height: 100%;

	> div {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50%;
	}

	#background {
		opacity: 0.85;
	}
}

.cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.logo {
	color: white;
	font-family: 'Aleo', serif;
	font-size: clamp(20px, 4vw, 50px);

	grid-column: 1 / span 12;

	img {
		max-width: 100%;
		width: 100%;
	}
}

a {
	text-decoration: none;
}

main ul {
	list-style-type: none;
	display: block;

	li {
		height: 40px;
		width: 100%;
		/*background-color: #9db356;*/
		/*padding: 0 1rem;*/
	}

	/*li:not(:last-child) {
		border-bottom: 1px grey solid;
	}*/

	li a {
		display: flex;
		align-items: center;
		width: 100%;
		height: 40px;
		padding: 0 10px;
	}

	li a:hover {
		background-color: #eee;
		border-radius: 4px;
		text-decoration: none;
	}

	/*li a:hover span {
		content: " —>";
	}*/
}

#country-selector {
	grid-column: 1 / span 12;
	h3 {
		margin: 1em 0;
	}
	> div {
		padding: 1rem;
	}
}

.spacing > *:not(:last-child) {
	margin-bottom: 20px;
}

@media (width >= 1280px) {
	#main-header {
		grid-column: 1 / span 9;
		height: 80vh;
	}

	#country-selector {
		grid-column: 10 / span 2;

		> div {
			margin-top: 4rem;
			border-radius: 10px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		}
	}

	.logo {
		grid-column: 1 / span 8;
		img {
			max-width: 75%;
		}
	}

	/*#country-selector {
		position: fixed;
		top: 800px;
		left: calc(100% / 2 + 720px - 230px);
		width: 230px;
	}*/
}

.icon-flag {
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	margin-right: 1rem;
}