:root {
	--background-primary: #1a1410;
	--background-secondary: #2d231c;
	--background-tertiary: #3d302a;
	--background-quaternary: #4a3d35;

	--accent-primary: #d4834f;
	--accent-secondary: #b86f3f;
	--accent-tertiary: #8b5a33;
	--accent-quaternary: #e8a76a;

	--text-primary: #f5e6d3;
	--text-secondary: #d4c4b0;
	--text-tertiary: #a89680;

	--border: #4a3d35;
	--shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--background-primary);
	
	color: var(--text-primary);
	font-family: "IBM Plex Sans", sans-serif;
}

main {
	flex: 1;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

button, a.button {
	border: none;
	border-radius: 8px;
	background: var(--accent-secondary);
	cursor: pointer;
	padding: 8px;
	text-decoration: none;
	color: inherit;
}

footer {
	background: var(--accent-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: black;
}

header {
	background: var(--accent-secondary);
	padding: 10px 20px;
	color: black;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .wordmark {
	font-size: 1.3rem;
}

header .wordmark a {
	text-decoration: none;
	color: inherit;
}

header nav {
	display: flex;
	gap: 20px;
	font-size: 1.1rem;
}

header nav a {
	color: black;
	text-decoration: none;
}

ul, ol, li {
	padding: revert;
}

a {
	color: var(--text-secondary);
}

.menu-dropdown {
	display: none;
	position: absolute;
	top: 30px;
	background: var(--accent-tertiary);
	border: var(--border) solid 1px;
	border-radius: 8px;
	list-style-type: none;
	padding: 10px;
}
.menu-dropdown a { color: var(--text-primary); }
nav .menu::before {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	height: 30px;
}
nav .menu { position: relative; }
nav .menu:hover .menu-dropdown,
nav .menu:focus-within .menu-dropdown { display: block; }