:root {
	--primary: #517;
	--primary-l: oklch(from var(--primary) calc(l + 0.1) c h);
	--primary-d: oklch(from var(--primary) calc(l - 0.1) c h);
	--secondary: #fc2;
	--secondary-l: oklch(from var(--secondary) calc(l + 0.1) c h);
	--secondary-d: oklch(from var(--secondary) calc(l - 0.1) c h);
}

html, body {
	margin: 0;
	height: 100%;
}

body {
	font-size: 16px;
	font-family: "DM Mono";

	color: #ddd;
	background-color: #999;
	background-image: url( "/img/bg.webp" ), repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 5px,
		rgba(0, 0, 0, 0.1) 5px,
		rgba(0, 0, 0, 0.1) 10px
	);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-blend-mode: multiply;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

a {
	color: var(--secondary);
	text-decoration: none;

	&:hover {
		color: var(--secondary-l);
	}

	&:active {
		color: var(--secondary-d);
	}
}

hr {
	border: 0;
	border-bottom: 2px dotted #ddd;
}

ul.posts {
	list-style: none;
	padding: 0;
	margin: 0;

	& > li {
		margin-bottom: 5px;
	}
}

main {
	padding-top: 50px;
	padding-bottom: 50px;
	margin-inline: auto;
	width: 100%;
	max-width: 900px;

	& > header {
		padding: 20px;
		margin-bottom: 10px;

		border: 1px solid var(--primary-l);

		background-color: rgb( from var(--primary) r g b / 0.75 );
		backdrop-filter: blur( 10px );

		box-shadow: var(--primary-d) 0 0 10px;
		text-shadow: 0 0 5px #333;
	}

	& > article {
		padding: 20px;
		background-color: rgba( 0, 0, 0, 0.65 );
		backdrop-filter: blur( 10px );

		border: 1px solid #333;
		box-shadow: inset #111 0 0 10px;

		margin-bottom: 10px;

		& > header {
			margin-bottom: 10px;
		}

		& img {
			display: block;
			margin: 0 auto;
			max-width: 75%;
		}

		& pre {
			display: block;
			margin: 10px;
			padding: 10px;
			background-color: rgba( 0, 0, 0, 0.5 );
		}
	}

	& > footer {
		text-align: center;
		text-shadow: #333 0 0 5px;
	}
}