@layer vars, core, page;

@layer vars {
	:root {
		color-scheme: dark;

		--link: cyan;
		--text: #ccc;
		--bg: #181818;
	}
}

@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 page {
	html { height: 100%; }
	body { min-height: 100%; }

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

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

		gap: 1em;
		padding: 0.5em;

		> * {
			width: min(100%, 50em);
		}
	}
}