/* ====================================
	EXTEND
==================================== */

@layer extend {

:root {
	--fore-colour: #000;
	--back-colour: #fea;
	--hot-colour: #a00000;
	--logo-colours: linear-gradient(
		to right,
		var(--hot-colour),
		var(--hot-colour)
	);
}
@media (prefers-color-scheme: dark) {
	:root {
		--red: #ff7979;
		--yellow: #f7cc01;
		--purple: #ef70ff;

		--fore-colour: #fff;
		--back-colour: #14181c;

		--hot-colour: var(--red);

		--logo-colours: linear-gradient(
			to right,
			var(--red) 33.3%,
			var(--yellow) 33.3%,
			var(--yellow) 66.6%,
			var(--purple) 66.6%
		);
	}
	#items {
		& > :nth-child(3n+2 of :not([hidden])) {
			--hot-colour: var(--yellow);
			accent-color: var(--hot-colour);
		}
		& > :nth-child(3n+3 of :not([hidden])) {
			--hot-colour: var(--purple);
			accent-color: var(--hot-colour);
		}
	}
}
:root {
	--mid-fore-colour: color-mix(in srgb, var(--fore-colour), var(--back-colour) 25%);
	--line: var(--line-width) solid var(--mid-fore-colour);
	--cold-colour: var(--fore-colour);
	--title-font-stack: Georgia, Garamond, serif;
}
body {
	font-family: "Roboto Condensed", Roboto, system-ui, sans-serif;
}
h1 {
	font-family: var(--title-font-stack);
	letter-spacing: 0.05em;
}
[rel="index"] {
	font-weight: bold;
	color: inherit;
	text-decoration-color: transparent;
	&:hover {
		text-decoration-color: var(--fore-colour);
	}
	&::before {
		content: "ᓚᘏᗢ" / "";
		display: inline-block;
		margin-inline-end: 0.5em;
		font-family: monospace;
		color: transparent;
		background-image: var(--logo-colours);
		background-clip: text;
	}
}
#review-container h1 {
	margin-block: 0;
	line-height: 1.2;
	font-family: var(--title-font-stack);
}
#items a {
	line-height: 1.3;
	font-size: 1.3em;
	font-family: var(--title-font-stack);
}
main a:visited {
	text-decoration-color: var(--hot-colour);
}
select, .text-input {
	border-radius: 0.2em;
}

/* ===================== END EXTEND */ }