source ⟩ hypertext ⟩ public ⟩ new ⟩ new.css

:root {
	--background: #000c;
	--text: #fffe;
	--accent: #fffe;
}

body {
	font-family: var(--sans-serif);

	background-image: url("/new/ultradeepfield.jpg");
	background-size: auto;
	background-repeat: repeat;
}

main {
	background-color: var(--background);
	backdrop-filter: blur(0.5rem);
}

/* Inline | https://satyrs.eu/new */

.sparkles > * {
	display: block;
}

.sparkles {
	position: relative;

	display: block;

	& > * {
		display: block;

		mix-blend-mode: screen;

		&.green,
		&.blue {
			position: absolute;
			inset-block-start: 0;

			inline-size: 100%;

			text-align: center;
		}

		&.red {
			color: red;
		}

		&.green {
			color: #0f0;
			translate: 2px 1px;
		}

		&.blue {
			color: blue;
			translate: -3px 0px;
		}
	}
}

article h1,
h1 strong {
	font-style: italic;
	font-weight: 900;
	font-size: 2.2rem;
}

article {
	margin-block-start: 3.5rem;
	margin-block-end: 1em;

	& h1 {
		margin: 0;
	}
}

h1 .subtitle {
	display: block;
	margin-block-start: 0.25em;

	font-size: 1rem;
	font-weight: normal;
}

article header .subtitle {
	font-variant-caps: small-caps;
	letter-spacing: var(--caps-spacing);
	text-align: center;
}

li {
	&:nth-child(6n+1) {
		--accent: oklch(0.85 0.125 0);
	}
	&:nth-child(6n+2) {
		--accent: oklch(0.85 0.125 60);
	}
	&:nth-child(6n+3) {
		--accent: oklch(0.85 0.125 120);
	}
	&:nth-child(6n+4) {
		--accent: oklch(0.85 0.125 180);
	}
	&:nth-child(6n+5) {
		--accent: oklch(0.85 0.125 240);
	}
	&:nth-child(6n+0) {
		--accent: oklch(0.85 0.125 300);
	}

	&::marker {
		color: var(--accent);
	}
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-blackitalic.woff2") format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: fallback;
}