@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
	--font-body: system-ui, sans-serif;
	--font-heading: Nunito, var(--font-body);

	--color-stroke: #523431;
	--color-body: #eab67d;
	--color-body-highlight: #fce0b8;
	--color-blue: #6f9dc8;
	--color-green: #6fbc4b;
	--color-red: #e85a58;
	--color-yellow: #fcc355;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	font: 100%/1.5 var(--font-body);
	color: var(--color-stroke);
}

a {
	color: var(--color-blue);

	&:not(:hover) {
		text-decoration: none;
	}
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-weight: 600;

	h1, p {
		margin: 0;
	}

	.wordmark {
		display: block;
		width: 6ch;
	}
}

h1, h2, h3, .hfont {
	font: 900 400%/1 var(--font-heading);
	color: var(--color-body-highlight);


}

.logo {
	max-width: min(90vmin, 12rem);
}

nav {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-weight: 600;

	ul {
		display: flex;
		align-items: baseline;
		justify-content: space-around;
		gap: 1.5rem;
		padding: 0;
	}

	li {

		margin: 0;
		padding: 0;

		&:first-child {
			list-style: none;
		}
	}
}