* {
	box-sizing: border-box;
}

:root {
	--jewel-red: #660808;
	--jewel-orange: #9d3900;
	--jewel-blue: #17283d;
	--jewel-purple: #401928;
	--jewel-cream: #f5e6c8;
}

body {
	display: flex;
	min-height: 100vh;
	background-color: var(--jewel-blue);
	margin: 0;
}

#site-nav {
	width: 240px;
	padding: 12px;
	background:
		linear-gradient(135deg, #0000 20%, var(--jewel-blue) 20% 30%, #0000 0),
		repeating-linear-gradient(
			45deg,
			var(--jewel-blue),
			color-mix(in oklch, var(--jewel-blue), black 30%) 70%
		);
	background-size: 36px 36px;
	background-attachment: fixed;
}

#site-nav {
	width: 240px;
	padding: 12px;

	--c1: oklch(from var(--jewel-blue) calc(l * 0.7) calc(c * 0.7) h);
	--c2: var(--jewel-blue);
	--c: var(--c2) 20% 30%;
	background:
		linear-gradient(135deg, #0000 20%, var(--c), #0000 0),
		repeating-linear-gradient(45deg, var(--c), var(--c1) 0 70%);
	background-size: 36px 36px;

	background-attachment: fixed;

	nav {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	#hero {
		text-align: center;
		font-size: 3em;
		text-decoration: none;
	}
	a {
		color: lightgray;
	}
}

.box {
	background-color: var(--jewel-orange);
	border-top: 4px solid color-mix(in oklch, var(--jewel-orange), white 10%);
	border-left: 4px solid color-mix(in oklch, var(--jewel-orange), white 10%);
	border-bottom: 4px solid transparent;
	border-right: 4px solid color-mix(in oklch, var(--jewel-orange), black 20%);
	padding-bottom: 1px;
	padding-right: 1px;
}

.box.button:hover {
	background-color: color-mix(in oklch, var(--jewel-orange), black 8%);
	border-top: 4px solid color-mix(in oklch, var(--jewel-orange), black 15%);
	border-left: 4px solid color-mix(in oklch, var(--jewel-orange), black 15%);
	border-bottom: 4px solid var(--jewel-orange);
	border-right: 4px solid color-mix(in oklch, var(--jewel-orange), white 10%);
	padding-left: 1px;
	padding-top: 1px;
	padding-bottom: 0px;
	padding-right: 0px;
}

main {
	background-color: var(--jewel-blue);
	flex-grow: 1;
}

#posts {
	padding: 24px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 960px;
}

.blog-post {
	--bg: #999999;
	background-color: var(--bg);
	display: flex;
	flex-direction: column;
	padding: 12px 0;

	border-top: 4px solid oklch(from var(--bg) calc(l * 1.1) c h);
	border-left: 4px solid oklch(from var(--bg) calc(l * 1.1) c h);
	border-bottom: 4px solid oklch(from var(--bg) calc(l * 0.8) calc(c * 0.8) h);
	border-right: 4px solid oklch(from var(--bg) calc(l * 0.8) calc(c * 0.8) h);

	header {
		border-bottom: 2px solid var(--jewel-blue);
		padding: 0px 24px 12px 24px;
		a {
			text-decoration: none;
		}
		h2 {
			margin: 0;
			padding-bottom: 4px;
			color: var(--jewel-orange);
		}
		margin-bottom: 8px;
	}
	p {
		margin: 8px 24px;
	}
}

#page-nav {
	display: flex;
	gap: 8px;
	font-size: 1.5em;
	color: lightgray;
	margin-left: 32px;
}

#page-nav span,
#page-nav a {
	color: var(--jewel-cream);
	padding: 4px 8px;
}

#page-nav span {
	background-color: var(--jewel-orange);
}

#page-nav a:hover {
	background-color: color-mix(in oklch, var(--jewel-orange), black 15%);
}