@view-transition {
	navigation: auto;
}

:root {
	color-scheme: light dark;
	--color-primary: #ff3000;
	--color-background: light-dark(#fafafa, #1d1d1d);
	--color-foreground: light-dark(#0a0a0a, #fcfcfc);
	--color-muted: light-dark(#ececec, #2e2e2e);
	--color-muted-foreground: light-dark(#666666, #a0a0a0);
}

::selection {
	background: var(--color-muted);
}

body {
	color: var(--color-foreground);
	background-color: var(--color-background);
	accent-color: var(--color-primary);
	font-style: code;
	font-family: system-ui, sans-serif;
}

main {
	max-width: 700px;
	padding: 64px 16px;
	margin-inline: auto;
}

p {
	margin-block: 1lh;
	margin-trim: block;
	color: var(--color-muted-foreground);
}

a:hover {
	color: var(--color-background);
	background-color: var(--color-foreground);
	text-decoration: none;
}

header a {
	color: var(--color-foreground);
}

section#projects {
	h2 {
		font-size: 18px;
		margin-bottom: 16px;
	}

	a {
		line-height: 1;
	}
}

.list {
	display: grid;
	gap: 12px;
	justify-items: start;
	color: var(--color-muted-foreground);
}