@layer vars, core, basics, page;

@layer vars {
	:root {
		color-scheme: dark;
		--link: cyan;
		--prime: #ccc;
		--bg: #181818;
		--bg2: #111111;
	}
}

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

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

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

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

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

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

@layer basics {
	html { height: 100%; }
	body { min-height: 100%; }

	html, body {
		font-family: sans-serif;
		font-size: 12px;
		color: var(--prime);
		background: var(--bg);
	}
}

@layer page {
	body {
		display: flex;
		flex-direction: column;
		align-items: center;

		gap: 1em;
		padding: 2em;

		> * {
			width: 100%;
			max-width: 42em;
		}

		> header {
			padding: 0 2em;
			h1 small { font-size: 0.6em; font-weight: normal; }
			* + * { margin-top: 0.5em; }
		}

		> section {
			padding: 0 2em;
			ul {
				padding-left: 1em;
			}
		}
	}
}