:root {
	--black: #000000;
	--cream: #EDD3BD;
	--desert: #C49B6D;
	--purple: #5E103D;
	--sand: #D5BB7D;
}

html {
	font-family: "Libertinus Serif", serif;
	height: 100vh;
	width: 100vw;
	display: grid;
	place-items: center;
}

html,
header,
#sidebar > address {
	background-image: url("../images/background.png");
}

body,
header,
#sidebar > address,
#sidebar > nav > a {
	border: 1px solid var(--black);
}

body {
	background: var(--desert);
	display: grid;
	grid-template-areas:
		"header header"
		"sidebar content"
		"sidebar footer";
	gap: 0 1.5rem;
	padding: 1rem;
}

#sidebar,
#sidebar > address,
#sidebar > nav,
header,
main {
	display: flex;
}

#sidebar,
#sidebar > address,
#sidebar > nav,
main {
	flex-direction: column;
}

#sidebar {
	gap: 0.5rem;
	padding-right: 1rem;
	width: 20ch;
	max-width: 20ch;
}

#sidebar > address,
#sidebar > nav {
	gap: 0.25rem;
}

#sidebar > address {
	padding: 0.5rem;
}

#sidebar > nav > a {
	background: var(--purple);
	text-decoration: none;
	color: var(--cream);
	padding: 0.25rem;
}

header {
	grid-area: header;
	align-items: center;
	justify-content: space-between;
	gap: 0 1rem;
	padding: 0.5rem;
}

header > h1 {
	font-style: italic;
	margin: 0;
}

header > h1 > span {
	font-variant: small-caps;
	font-size: 1.25rem;
}

footer {
	border-top: 1px solid var(--sand);
	grid-area: footer;
	font-size: 0.8rem;
}

p {
	max-width: 60ch;
}

main {
	margin: 0.5rem 0;
}

main > p {
	margin: 0.35rem 0;
}

.name {
	white-space: pre;
}

#toggle {
	appearance: none;
	margin: 0;
}

@media only screen and (max-width: 768px) {
	body {
		grid-template-areas:
			"header"
			"sidebar"
			"content"
			"footer";
	}
	#toggle {
		width: 100%;
		height: 1.5rem;
		border: 1px solid var(--black);
		transform: translateY(-0.075em);
		display: grid;
		place-content: center;
		background: var(--purple);
		color: var(--cream);
		font: inherit;
		font-style: italic;
	}

	#toggle::before {
		content: "Toggle navigation";
		width: 100%;
	}

	#sidebar {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	#sidebar > #toggle:not(:checked) ~ nav {
		display: none;
	}

	#sidebar > nav > a {
		text-align: center;
	}
}