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

@layer extend {

/* =============
	SETTINGS
============= */

@font-face {
	font-family: "Overpass";
	font-weight: 100 900;
	font-style: normal;
	font-display: block;
	src:
		url("Overpass-VariableFont_wght.69e8fe4036.woff2") format("woff2");
}
@font-face {
	font-family: "Overpass";
	font-weight: 100 900;
	font-style: italic;
	font-display: block;
	src:
		url("Overpass-Italic-VariableFont_wght.1b27b58f65.woff2") format("woff2");
}

/* THEMES */

:root {
	--fore-colour: black;
	--back-colour: #89cff0;
	--hot-colour: #180070;
	--cold-colour: #6f003f;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: white;
		--back-colour: #181818;
		--hot-colour: #f070f0;
		--cold-colour: #f0c0f0;
	}
}

/* VARIABLES */

:root {
	--main-column-max-inline-size: 60ch;
}
body {
	font-family: "Overpass", sans-serif;
	image-rendering: pixelated;
}

/* ==============
	STRUCTURE
============== */

#banner {
	padding-block: 0;
	background-color: var(--back-colour);
	border-block-end-width: 1px;
	& [rel~="index"] {
		text-decoration-line: underline;
		text-decoration-thickness: 0.1em;
		text-decoration-style: solid;
		text-decoration-color: var(--fore-colour);
		text-underline-offset: 0.1em;
		font-size: 3.2em;
		font-weight: bold;
		color: color-mix(var(--fore-colour), var(--hot-colour));
	}
}

/* ============
	CONTENT
============ */

/* GENERAL */

a {
	color: var(--hot-colour);
	&:is(:visited, :active) {
		color: var(--cold-colour);
	}
	&:visited:active {
		color: var(--hot-colour);
	}
}

/* CONTROLS */

summary {
	color: var(--hot-colour);
}
[open] > summary {
	color: var(--cold-colour);
}
.text-input, select {
	border-width: 2px;
	border-color: color-mix(var(--fore-colour), var(--back-colour));
	border-radius: 1lh;
}
select {
	padding-block-start: 0.35em;
	padding-block-end: 0.15em;
}

/* ITEMS */

#items {
	gap: 3px;
	& > li {
		gap: unset;
		@media (min-width: 600px) {
			grid-template-columns: auto max-content;
			gap: 16px;
		}
		padding-block: 4px;
		padding-inline: 10px;
		&:not(:last-child) {
			border-block-end: 1px solid color-mix(var(--fore-colour) 35%, var(--back-colour));
		}
	}
	& a {
		text-underline-offset: 0.15em;
	}
}
.rating {
	color: var(--hot-colour);
}
.metadata {
	font-weight: normal;
	white-space: pre;
	font-size: 0.8em;
	color: color-mix(var(--fore-colour), var(--back-colour) 25%);
}

/* REVIEWS */

dl {
	display: grid;
	grid-template-columns: max-content auto;
	margin-block: 0;
	& > div {
		display: grid;
		grid-column: span 2;
		grid-template-columns: subgrid;
		column-gap: 1ch;
	}
	& dt {
		text-align: end;
		font-variant-caps: all-small-caps;
		font-weight: bold;
	}
	& dd {
		margin-inline-start: 0;
	}
}

/* ==========
	KIRBY
========== */

/* SMALL */

#banner [rel~="index"]::before,
#index-header::after,
#controls-container::before,
#index-footer::before,
#review-container > header::after,
summary::before {
	--frame: 0;
	content: "";
	block-size: var(--size);
	inline-size: auto;
	aspect-ratio: 1;
	background-image: url("data:image/png;base64,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");
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: left calc(-1 * var(--frame) * var(--size));
}

#banner [rel~="index"]::before {
	--size: 64px;
	display: inline-block;
	vertical-align: -6px;
	margin-inline-end: 0.2em;
	animation-name: asleep;
	animation-direction: alternate;
	animation-duration: 3s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
#banner [rel~="index"]:hover::before {
	--wakeup-delay: 1s;
	animation-name: YOU-WOKE-HIM, awake;
	animation-duration: var(--wakeup-delay), 3s;
	animation-delay: 0s, var(--wakeup-delay);
	animation-direction: normal;
	animation-iteration-count: 1, infinite;
}
#index-header::after,
#controls-container::before,
#index-footer::before,
#review-container > header::after {
	--size: 32px;
	display: block;
	margin-inline: auto;
}
summary::before {
	--frame: 4;
	--size: 32px;
	display: inline-block;
	margin-inline-end: 0.2em;
	vertical-align: -0.4em;
}
[open] > summary::before {
	--frame: 5;
}
@keyframes asleep {
	0%,		40%		{ --frame: 0; }
	40.1%,	50%		{ --frame: 1; }
	50.1%,	60%		{ --frame: 2; }
	60.1%,	100%	{ --frame: 3; }
}
@keyframes YOU-WOKE-HIM {
	0%				{ --frame: 4; }
	15%,	100%	{ --frame: 5; }
}
@keyframes awake {
	0%,		30%		{ --frame: 7; }
	30.1%,	35%		{ --frame: 6; }
	35.1%,	92.5%	{ --frame: 7; }
	95%				{ --frame: 6; }
	97.5%			{ --frame: 7; }
	100%			{ --frame: 6; }
}

/*
	unfucking some spacing after replacing
	padding/border/margin with kirby spacer
*/

#index-header {
	margin-block-end: 0;
	padding-block-end: 0;
	border: unset;
}
#controls-container {
	padding-block-start: 0;
	border: unset;
	&::before {
		margin-block-end: var(--gap-size);
	}
}
#index-footer {
	padding-block-start: 0;
	border: unset;
	&::before {
		margin-block-end: var(--gap-size);
	}
}
#review-container > header {
	padding-block-end: 0;
	border: unset;
}

/* BIG */

body {
	--main-padding-inline: 16px;
	--shadow-inline-size: 256px;
	--kirby-colour-overlay: color-mix(transparent 20%, var(--back-colour));
	--shadow-outer-stop: calc(
		var(--main-column-max-inline-size) / 2
		+ var(--main-padding-inline)
		+ var(--shadow-inline-size)
	);
	--shadow-inner-stop: calc(
		var(--main-column-max-inline-size) / 2
		+ var(--main-padding-inline)
	);
	background-image:
		linear-gradient(
			to right,
			transparent calc(50% - var(--shadow-outer-stop)),
			var(--back-colour) calc(50% - var(--shadow-inner-stop)) calc(50% + var(--shadow-inner-stop)),
			transparent calc(50% + var(--shadow-outer-stop))
		),
		linear-gradient(
			to right,
			var(--kirby-colour-overlay),
			var(--kirby-colour-overlay)
		),
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAAHqsLF6AAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAEVQTFRFAAAAAAAAAAAAAAAAAAAhAAAAAAAAcABYKCBIMCBYwAAAMDAwwBCw+BAgAGAA4EDQsGB48HDgWMAA8KC4+KDo+OAA+Pj4GiNu9wAAAAF0Uk5TAEDm2GYAAAOcSURBVFjD7VbZjuM4DCSfOBtrdNv//6lbJCVbTifdM9jGAgMMgcSRqYNHVSlEd2P9xEj1OIikF+q9371m8MZWaaOCGSLU6cU+NRK1g+novbTSw6t9iCI+mTofRT/0yuJePa5aq41bEGHKjOA6PPmRUukJMziVxB83qHu0R/V9qmfFMXSNinNHHsH2KaUw8SPQbxnPM0eAeOz2KtaIYuKk4ziapZBF8KOFbiG0htogB83eY8qcUtccHmIx/cLhz8NRpDMWdEtjqPk4Nn0eSF/gQE96xlM6XiSLRRKegkBKEmJBCBqDcKFvM2ZeImZUarRl9Frjrvt8o8OmxYvjBQqqY7zxAm85Jy1dF2st5gUfGzL4OJBNTxKQmk7AWvzuVm0Ajn7kHLa5IND/Ycg33gpQIy/DHTnDzvx3K8eVPvopsNR8vMXDLQ9/awFoRnbF6yEzOx3nI2s9FP/cgXTUQ5JhsSenUpOSeqc/2PiOsA+QM4DdW7CvPYl1lHxt0fKCAcGsGDxRq01ZmhafeqLClf1FHBugylbzMaFuTSVtdHVtWlJ3btXaNmHejmY/BcC2LjvKu7ddrKs20K5ql1nbXCYOVCizFA/BYUA5bz9DSqqjSn21h4BKpaQx/CM6/4X3pjR2nWwrLnZalGdKU1yVybm5wgJztmu/SJc0GSxW7TLpMvL6BJ5SNhbwphcbTe0ycZNV3FzbqLh0KS449EXsWjMY2A4pDFxAwbEJoGVjrCyFptopLrZyQU130DEEpKTguHgYCvSFOJUegBL9tW+G7gb47Ya3jd/A14Xr5YTpM0DuK8rvM/YxJz7/aajV/PEyfl4ez9Uml7coVBOrq+K0Fj9MwBa5TcjfdoAb4G8tB5NBl8LGt/O3ky7zhMxLbTiHUzUXrZwXgK7PLV8yqP8KsisGI3C4psQWl058F9/A/BBlCU8H9O7/NlkDk3PVpbRJLr9KcFIudc0xYJ5mWYxmOKHpnZBSueLTeNzt/iasy04rbOH4jH+Qo/D22BahV6FIswj83p6vyrfev/afrH5Cb/q83MZ+esPeQW/Xj7fuavfbK/YOeq/sfsN+esneSe+3+nGxn16w1yZsn+mHyYOznyb6g2S+rVf9uOTjph+D/eBv6fRM3q/1Q9kXebJfb/Cg6gGmya/ph/0LkPOe/UjvNuTBuHtJQClTX5rpS/CtlxSCXPoAeYA+XALB1wGYkLP6XR3oBb1NP75QB/o2TfgXLBlqqXlW5KoAAAAASUVORK5CYII=");
	background-position: top center;
	background-size: 100%, 100%, 192px;
}

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