html {
	scroll-behavior: smooth;

	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	background: var(--background);
	background-size: 180px;
	image-rendering: pixelated;

	margin: min(3vw, 24px);

	font-family: sans-serif, serif;
}

header {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.5cm;

	max-width: var(--main-width);
	margin: 0 auto;
	margin-block-end: 0.5cm;
}

soundtrack-controls {
	display: block;
	width: fit-content;
	border-radius: 12px;
	background: black;
	color: white;

	figcaption {
		margin: 0.25cm;
	}
}

main {
	max-width: var(--main-width);
	padding: min(3vw, 24px);
	margin: auto;

	border-radius: 12px;
	background-color: var(--colour-primary-2);
	border: 4px solid var(--colour-primary-1);

	& > :first-child {
		margin-block-start: 0;
	}
}

wiggly-image {
	[hover] {
		display: none;
	}

	&:hover {
		* {
			display: none;
		}

		[hover] {
			display: revert;
		}
	}
}

img {
	border-radius: 6px;
}

.italics {
	font-style: italic;
}

.post {
	img {
		max-width: 100%;
		width: 400px;
		object-fit: contain;
		border-radius: 12px;
	}
}