:root {
	color-scheme: light dark;
	--text-color: light-dark(#333b3c, #efefec);
	--background-color: light-dark(#efedea, #2c1f31);
	--secondary-bg-color: light-dark(#f0f0f0, #3d3042);
	--border-radius: 5px;
}

body {
	color: var(--text-color);
	background-color: var(--background-color);
	margin: auto;
	max-width: 1280px;
	padding: 7px;
}

menu {
	list-style: none;
	padding: 0;
}

menu>li {
	border-radius: var(--border-radius);
	box-shadow: 0 0 5px gray;
	background-color: var(--secondary-bg-color);
	margin-bottom: 10px;
}

menu a {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 10px;
}

menu h1 {
	text-align: center;
}

menu h2 {
	margin: 0;
}

menu p {
	margin: 5px 0;
}

hgroup {
	border-left: 3px solid var(--secondary-bg-color);
	padding-left: 1em;
}

article h1 {
	margin: 0;
}

article h2 {
	margin: 0;
	font-weight: lighter;
	font-size: 1em;
	font-style: italic;
}

img {
	max-width: 100%;
	max-height: 50vh;
	border-radius: var(--border-radius);
}

figure {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 5px;
}

nav {
	display: flex;
	justify-content: space-between;
}