:root {
	--background: #fec;
	--text: #291603;
	--accent: #463;
}

main {
	max-inline-size: 140ch;
}

#splash {
	position: fixed;
	inset-block-start: 1em;
	inset-inline-end: 1em;
	z-index: -5;

	inline-size: 30vw;

	mix-blend-mode: multiply;
}

h1 {
	margin-block: 1rem 1.5rem;
	margin-inline-start: clamp(-2rem, 1350px - 100vw, 0px);

	font-family: var(--cormorant);
	font-size: clamp(2.75rem, 6.5vw, 3.5rem);
	font-style: italic;
	font-weight: 300;
	line-height: 0.9;
	text-align: start;

	text-shadow: 0 0 5px var(--background), 0 0 5px var(--background),
		0 0 15px var(--background), 0 0 15px var(--background);
}

p {
	max-inline-size: 70ch;
	margin-inline-start: 1.5em;
	padding-inline-end: 1em;

	backdrop-filter: blur(1em);
	background-color: #fecc;
}

h2 {
	margin-block: 1rem;

	font-family: var(--cormorant);
	font-size: 2.5em;
	font-style: italic;
	font-weight: 300;
	text-align: start;
	text-shadow: 0 0 5px var(--background), 0 0 5px var(--background),
		0 0 15px var(--background), 0 0 15px var(--background);
}

.flag {
	border: 1px solid var(--accent-translucent);
	box-shadow: 0 0 3px var(--accent-translucent);
}

.continent {
	column-count: 2;

	@media screen and (max-width: 999px) {
		column-count: 1;
	}

	& h3 {
		margin-block-end: 0;
		margin-inline-start: 1rem;

		font-size: 1.4rem;
		font-weight: normal;
		text-shadow: 0 0 5px var(--background), 0 0 5px var(--background),
			0 0 15px var(--background), 0 0 15px var(--background);

		&:first-child {
			margin-block-start: 0;
		}

		& + ul,
		& + h4 {
			margin-block-start: 0.5em;
		}
	}

	& h4 {
		position: relative;
		z-index: 10;

		margin-block-end: 0;
		margin-inline-start: 1rem;

		font-weight: normal;
		font-size: 1.2rem;
		font-style: italic;

		& + ul {
			margin-block-start: 0;
		}
	}

	& ul {
		padding-inline-start: 0;
	}

	& li {
		display: block;

		inline-size: fit-content;
		margin-inline: 2.5rem 0;
		margin-block: 0;
		padding: 0.1em;
		padding-inline-end: 1em;

		backdrop-filter: blur(1em);
		background-color: #fecc;
		break-inside: avoid;

		& a {
			font-weight: bold;
			text-decoration-color: var(--accent-seethrough);
			
			transition: text-decoration-color 0.2s;

			&:focus,
			&:hover {
				text-decoration-color: var(--accent);
			}
		}
	}

	& small.exp-note {
		display: block;
		margin-inline-start: 1.5em;

		color: var(--text);
		font-size: 1rem;
		font-style: italic;

		opacity: 0.8;
	}
}

.names {
	color: var(--accent);
	font-family: "Caveat", var(--sans-serif);
	font-style: italic;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	src: local("Cormorant Garamond Light"), local("CormorantGaramond-Light"),
		url("/fonts/cormorant-light.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	src: local("Cormorant Garamond Light Italic"),
		local("CormorantGaramond-LightItalic"),
		url("/fonts/cormorant-light-italic.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Caveat";
	font-style: italic;
	src: local("Caveat"), url("/fonts/Caveat.woff2") format("woff2");
	font-display: fallback;
}