:root {
	--peach: #efc4df;
	--strawberry: #e5a0a0;
	--cantaloupe: #f9b28c;
	--banana: #f0cf9f;
	--watermelon: #b0d2b0;
	--mint: #95fecc;
	--water: #80bbdb;
	--ube: #a99dbd;
	--tapioca: #c1c1c1;
	--dark: #282828;
	--light: #eee;
	--accent: var(--cantaloupe);
	--foreground: var(--dark);
	--background: var(--light);
}

html {
	font-family: "Berkeley Mono", monospace;
	background-color: var(--background);
	color: var(--foreground);
}

body {
	max-width: 50rem;
	margin: auto;
	padding: 2rem;
}

.prose {
	p {
		text-indent: 4ch;
	}
}

.artwork {
	width: 100%;
	figure {
		margin: auto;
		width: max-content;
		max-width: 100%;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}

a {
	color: inherit;
	text-decoration: var(--accent) underline 2px;
	transition: text-decoration 0.2s ease-in-out;
	&:hover {
		text-decoration: currentColor underline 2px;
	}

	&:has(figure) {
		text-decoration: none;
	}
}

hr {
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--tapioca);

	&.feed-separator {
		border-style: dashed;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--foreground: var(--light);
		--background: var(--dark);
	}
}

@media (forced-colors: active) {}

.post-tags {
	list-style: none;
	padding: 0;

	li {
		display: inline;
		&:not(:last-of-type)::after {
			content: ", ";
		}
	}
}

.recipe-ingredients ul {
	list-style: none;
	padding-left: 0.25em;

	input[type="checkbox"] {
		margin-right: 1em;
	}
}

.image-group {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
	padding-bottom: 1em;
	/* position: absolute;
	box-sizing: border-box;
	padding: 1em;
	width: 100vw;
	justify-content: center;
	left: 0; */
}

figure {
	margin: 0;

	width: min-content;
	text-align: center;
}

nav ul {
	list-style: none;
	padding: 0;

	li {
		display: inline;

		&:not(:first-of-type)::before {
			content: " | ";
		}
	}
}

@media print {
	html {
		background-color: white;
		color: black;
	}

	a {
		text-decoration: solid underline currentColor 1px;
		text-underline-offset: 4px;

		&[href]::before {
			content: "[";
		}
		&[href]::after {
			content: "](" attr(href) ") ";
		}
	}

	.print-hidden {
		display: none;
	}

	.post-tags::before {
		content: "Tags: ";
	}
}