@layer reset, defaults, user;



/* ====================================
	USER
==================================== */

@layer user {

:root {
	--fore-colour: black;
	--back-colour: #ffe5f0;
	--filament-colour: white;
	--glow-colour: #f1b;
	--detail-colour: #906;
	--accent-colour: var(--back-colour);
	--meta-fore-colour: white;
	--meta-back-colour: black;
	--background-grid: transparent 0px, #e684 40px, transparent 50px;

}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: #ffe5f0;
		--back-colour: #1c1540;
		--filament-colour: var(--fore-colour);
		--glow-colour: #f1b;
		--detail-colour: var(--glow-colour);
		--accent-colour: var(--fore-colour);
		--meta-fore-colour: white;
		--meta-back-colour: black;
		--background-grid: transparent 0px, transparent 40px, #e684 50px;
	}
}

/* ===================== END USER */ }



/* ====================================
	RESET
==================================== */

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
}

/* ===================== END RESET */ }



/* ====================================
	DEFAULTS
==================================== */

@layer defaults {

/* FONTS */

@font-face {
	font-family: Neoneon;
	font-weight: normal;
	font-style: normal;
	descent-override: 0%;
	src:
		url("data:application/font-woff2;base64,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")
		format("woff2");
}
@font-face {
	font-family: Nunito;
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src:
		url("./fonts/Nunito-Regular.woff2?v=2025-03-02")
		format("woff2");
}
@font-face {
	font-family: Nunito;
	font-weight: bold;
	font-style: normal;
	font-display: swap;
	src:
		url("./fonts/Nunito-Bold.woff2?v=2025-03-02")
		format("woff2");
}
@font-face {
	font-family: Nunito;
	font-weight: normal;
	font-style: italic;
	font-display: swap;
	src:
		url("./fonts/Nunito-Italic.woff2?v=2025-03-02")
		format("woff2");
}
@font-face {
	font-family: Nunito;
	font-weight: bold;
	font-style: italic;
	font-display: swap;
	src:
		url("./fonts/Nunito-BoldItalic.woff2?v=2025-03-02")
		format("woff2");
}

/* BASE */

:root {
	--unit-padding-block: 0.5rem;
	--body-unit-padding-block: var(--unit-padding-block) 0.3rem;
	--unit-padding-inline: 1rem;
	--unit-border-radius: 1rem;

	--body-font-size: 1.1rem;
	--body-font-stack: Roboto, Verdana, Arial, sans-serif;
	--meta-font-stack: Nunito, var(--body-font-stack);

	--line-width: 1px;
	--accent-line: var(--line-width) solid var(--accent-colour);

	--drop-shadow: 0 0 5px var(--glow-colour);

	font-size: 100%;
	scrollbar-color: var(--glow-colour) var(--back-colour);
}
body {
	--background-grid-1: transparent 0px, #e684 20px, transparent 25px, transparent 50px;
	--background-shade-top: transparent 0%, transparent 90vb, black 200vb;
	--background-shade-side: black 0%, transparent 10%;
	/*background-image:
		repeating-linear-gradient(-0.125turn, var(--background-grid-2)),
		repeating-linear-gradient(0.125turn, var(--background-grid-2)),
		linear-gradient(var(--background-shade-top)),
		linear-gradient(0.25turn, var(--background-shade-side)),
		linear-gradient(0.75turn, var(--background-shade-side)); */
	margin: 0;
	line-height: 1.5;
	font-family: var(--body-font-stack);
	color: var(--fore-colour);
	background-color: #2c1530;
	background-image:
		repeating-linear-gradient(-0.125turn, var(--background-grid)),
		repeating-linear-gradient(0.125turn, var(--background-grid)),
		linear-gradient(var(--background-shade-top)),
		linear-gradient(0.25turn, var(--background-shade-side)),
		linear-gradient(0.75turn, var(--background-shade-side));
}
a {
	text-underline-offset: 0.15em;
}

/* STRUCTURE */

main {
	padding-block: 3rem;
	padding-inline: 2rem;
	background-color: #2006;
}

/* PAGE HEADER */

h1 {
	--glow-wide: 0 0 2.5rem var(--glow-colour);
	--glow-mid: 0 0 0.5rem var(--glow-colour);
	--glow-narrow: 0 0 0.1rem var(--glow-colour);
	margin-block: 0;
	text-align: center;
	line-height: 1.25;
	font-size: min(8rem, 10vi);
	font-family: Neoneon, sans-serif;
	color: var(--filament-colour);
	text-shadow:
		var(--glow-wide),
		var(--glow-wide),
		var(--glow-wide),
		var(--glow-mid),
		var(--glow-mid),
		var(--glow-narrow),
		var(--glow-narrow),
		var(--glow-narrow);
}
#feed-description {
	margin-block-start: 2rem;
}
.page-info {
	text-align: center;
	font-size: var(--body-font-size);
	font-family: var(--meta-font-stack);
	filter: drop-shadow(var(--drop-shadow));
	& > * {
		margin-block: 0;
		padding-block: var(--unit-padding-block);
		padding-inline: var(--unit-padding-inline);
		color: var(--meta-fore-colour);
		background-color: var(--meta-back-colour);
	}
	& > :first-child {
		border-start-start-radius: var(--unit-border-radius);
		border-start-end-radius: var(--unit-border-radius);
	}
	& > :last-child {
		border-end-start-radius: var(--unit-border-radius);
		border-end-end-radius: var(--unit-border-radius);
	}
	& a {
		color: var(--glow-colour);
	}
}

/* ENTRIES */

#entries {
	--block-gap: 3rem;
	list-style-type: "";
	margin-block: var(--block-gap);
	padding-block: var(--block-gap);
	padding-inline-start: 0;
	font-size: var(--body-font-size);
	border-block: var(--accent-line);
	& > li {
		--card-angle: calc(0.01turn);
		transform-origin: center;
		&:not(:first-child) {
			margin-block-start: var(--block-gap);
		}
	}
}
.card {
	filter: drop-shadow(var(--drop-shadow));
}
.card header {
	padding-block: var(--unit-padding-block);
	padding-inline: 1.25rem;
	font-family: var(--meta-font-stack);
	color: var(--meta-fore-colour);
	background-color: black;
	border-block-end-width: var(--line-width);
	border-block-end-style: solid;
	border-block-end-color: var(--meta-fore-colour);
	border-start-start-radius: var(--unit-border-radius);
	border-start-end-radius: var(--unit-border-radius);
	& > time::before {
		content: "\2022 \0a";
		color: var(--glow-colour);
	}
}
.title {
	margin-block: 0;
}
.content {
	padding-block: var(--body-unit-padding-block);
	padding-inline: var(--unit-padding-inline);
	background-color: var(--back-colour);
	border-end-start-radius: var(--unit-border-radius);
	border-end-end-radius: var(--unit-border-radius);
	& > :first-child {
		margin-block-start: 0;
	}
	& > :last-child {
		margin-block-end: 0;
	}
	& a {
		color: var(--detail-colour);
	}
}
.cover {
	display: none;
}

/* RESPONSIVITY */

body {
	container-name: body;
	container-type: inline-size;
}
@container body (min-inline-size: 40rem) {
	:root {
		--body-font-size: 1.2rem;
	}
	.page-info > * {
		margin-block: 1em;
		border-radius: var(--unit-border-radius);
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
	#entries > li {
		display: grid;
		grid-template-columns: 10rem auto;
		gap: 1rem;
		&:nth-child(odd) {
			transform: rotate(calc(-1 * var(--card-angle)));
		}
		&:nth-child(even) {
			transform: rotate(var(--card-angle));
		}
	}
	.card header {
		border-radius: var(--unit-border-radius);
		border-block-end: unset;
	}
	.content {
		margin-block-start: 1em;
		padding: unset;
		background-color: unset;
		border-radius: unset;
		& > * {
			padding-block: var(--body-unit-padding-block);
			padding-inline: var(--unit-padding-inline);
			background-color: var(--back-colour);
			border-radius: var(--unit-border-radius);
		}
	}
	.cover {
		display: block;
		inline-size: 100%;
		color: var(--meta-fore-colour);
		filter: saturate(2) brightness(1.3) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">\
			<filter id="colourise" x="0" y="0" width="100%" height="100%">\
				<feComponentTransfer color-interpolation-filters="sRGB">\
					<feFuncR type="table" tableValues="0.067 0.5 1" />\
					<feFuncG type="table" tableValues="0 0.03 0.894" />\
					<feFuncB type="table" tableValues="0.2 0.35 0.937" />\
				</feComponentTransfer>\
			</filter>\
		</svg>#colourise');
		box-shadow: var(--drop-shadow);
	}
}
@container body (min-inline-size: 55rem) {
	:root {
		--body-font-size: 1.3rem;
	}
	main {
		max-inline-size: min(90%, 50rem);
		margin-inline: auto;
		border-inline: var(--accent-line);
	}
}

/* ================== END DEFAULTS */ }