@layer vars, core, page;

@layer vars {
	:root {
		--prime: #1eff00;
		--accent: #387d42;
		--pill: #1276391a;
		--bg: #0e2316;
		--link: cyan;
	}
}

@layer core {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;

		scrollbar-width: thin;
		scrollbar-color: #444 transparent;
	}

	::selection {
		color: white;
		background-color: #f70;
	}

	::-webkit-scrollbar { width: 8px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb { background: #444; border-radius: 1em; }
	::-webkit-scrollbar-thumb:hover { background: #666; }

	a {
		color: var(--link);
		text-decoration: none;

		&:visited {
			color: color-mix(in srgb, purple, var(--link) 70%);
		}

		&:hover {
			color: color-mix(in srgb, white, var(--link) 90%);
			text-decoration: underline;
		}

		&:active {
			color: color-mix(in srgb, white, var(--link) 50%);
		}
	}
}

@layer page {
	:root {
		height: 100%;
		font-size: 21px;
		font-family: sans-serif;

		color-scheme: dark;
		scrollbar-gutter: stable;

		color: color-mix(in lch, var(--prime), #fff8 50%);
		background: radial-gradient(
			circle,
			var(--bg),
			color-mix(in lch, var(--bg), black 80%)
		);
	}

	body {
		width: 100%;
		min-height: 100%;
		max-width: 32em;
		margin: auto;
		padding: 1em;
		padding-bottom: 6em;

		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1em;
	}

	.icon {
		display: block;
		width: 100%;
		max-width: 24em;
		max-height: 30vh;
		object-fit: contain;
	}

	.lil {
		opacity: 0.6;
		font-size: 0.8em;
	}

	.demo {
		width: 100%;
	}

	:not(:defined) {
		display: none;
	}
}