:root {
	--primary-color: #184059;
	--background-color: #ece7ca;

	--line-thickness: round(0.3rem, 1px);

	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-display: swap;
	font-size: 13pt;
}

body {
	min-height: 100vh;
	max-width: 100vw;
	margin: 0;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	background-color: var(--background-color);
}

header {
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	> a{
		display: block;
		padding: 2rem 1rem;
	}
}

header, nav {
	font-family: "Lexend", sans-serif;
	text-align: center;
	a {
		color: var(--background-color);
		text-shadow: 0 0 1rem black;
		text-decoration: none;
	}
}

#languages {
	text-align: right;
	> :first-child {
		cursor: pointer;
		background-color: var(--primary-color);
		font-size: 150%;
	}
	a {
		display: inline-block;
		padding: 0.5rem;
	}
	/* relies on tab-index attribute being set on the HTML tag */
	&:not(:focus-within) > :not(:first-child) {
		display: none;
	}
	> div {
		text-align: left;
		display: inline-flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.5rem;
		padding-top: 1rem;
		background-color: var(--primary-color);
	}
}

nav {
	font-weight: bold;
	background-color: var(--primary-color);

	display: flex;
	justify-content: center;
	gap: 2.5rem;
	padding: .6rem 0;

	> * {
		opacity: 0.8;
		&:hover {
			opacity: 1;
		}
	}

	> label, hr {
		display: none;
	}
}


@media (max-width: 90ch) {
	nav {
		/* relies on tab-index attribute being set on the HTML tag */
		&:not(:focus-within) > :not(:first-child){
			display: none;
		}
		gap: 0;
		flex-direction: column;
		&:focus-within > label {
			transform: skew(10deg);
		}
		> hr {
			display: block;
			border-color: var(--background-color);
		}
		label {
			display: flex;
			flex-direction: column;
			cursor: pointer;
			align-items: flex-end;
			padding: 0.2rem 1rem;
			gap: 0.3rem;
			hr {
				display: block;
				width: 2rem;
				height: var(--line-thickness);
				background-color: var(--background-color);
				margin: 0;
				border: none;
			}
		}
		a {
			padding: 0.7rem;
			margin-top: 1rem;
			font-size: 120%;
			border: 0.1rem solid var(--primary-color);
		}
	}
}

main {
	padding: 1.5rem;
	box-sizing: border-box;
	color: var(--primary-color);

	width: min(100%, 90ch);
	margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	scroll-margin-top: 1em;
	position: relative;
	margin: 0;
	font-family: "Lexend", sans-serif;
}

* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
	margin-top: 1em;
}

* + h1 {
	margin-top: 2em;
}

p {
	line-height: 1.5em;
	margin: 1em 0 0 0;
}

a {
	&:active {
		scale: 0.98;
	}

	/* crazy hack to get the cool 'open-in-new-tab' icon on external links */
	&[target="_blank"]::after {
		content: "";
		width: 1em;
		height: 1em;
		margin: 0 0.05em 0 0.1em;
		background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZWNlN2NhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+Cg==)
			no-repeat;
		background-size: contain;
		display: inline-block;
		vertical-align: text-top;
	}
}

li {
	margin-top: 1em;
	&::marker {
		font-weight: bold;
	}
}

figure {
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;

	img {
		width: min(100%, 50ch);
		height: auto;
	}

	figcaption {
		font-style: italic;
		margin-top: 0.5em;
	}
}

hr {
	width: 100%;
}