/* Defaults */
:root {
	--font-family: -apple-system, system-ui, sans-serif;
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}


/* Theme colors */
:root {
		/* cinnamon */
	/* hue 5 */
	--color-cinnamon-1: #fff8f3;
	--color-cinnamon-2: #ffdfc6;
	--color-cinnamon-3: #d57300;
	--color-cinnamon-4: #ac5c00;
	--color-cinnamon-5: #633300;
	--color-cinnamon-6: #371d00;

	/* emerald */
	/* hue 11 */
	--color-emerald-1: #dcffe6;
	--color-emerald-2: #5dffa2;
	--color-emerald-3: #00a05a;
	--color-emerald-4: #008147;
	--color-emerald-5: #004825;
	--color-emerald-6: #002812;

	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #636363;

	/* cerulean */
	/* hue 17 */
	--color-cerulean-1: #e8f6ff;
	--color-cerulean-2: #b9e3ff;
	--color-cerulean-3: #0092c5;
	--color-cerulean-4: #00749d;
	--color-cerulean-5: #003c54;
	--color-cerulean-6: #001d2a;

	/* magenta */
	/* hue 23 */
	--color-magenta-1: #fff3fc;
	--color-magenta-2: #ffd7f6;
	--color-magenta-3: #f911e0;
	--color-magenta-4: #ca00b6;
	--color-magenta-5: #740068;
	--color-magenta-6: #44003c;

	--background-color: var(--color-emerald-1);

	--text-header-color: var(--color-magenta-6);
	--text-color: var(--color-cinnamon-6);
	--text-color-link: var(--color-cinnamon-6);
	--text-color-link-active: var(--color-cerulean-5);
	--text-color-link-visited: var(--color-magenta-5);
	--link-color-unvisited: var(--color-cerulean-5);

	--syntax-tab-size: 2;
}

/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--background-color);
}
html {
	overflow-y: scroll;
}
body {
	max-width: 40em;
}


a[href] {
	color: var(--text-color-link);
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}

main {
	padding: 1rem;
}

header {
	border-bottom: 1px dashed var(--color-gray-20);
	font-family: var(--font-family);
	color: var(--text-color);
	font-size: 2em;
}

/* Header */
header {
	display: flex;
	gap: 1em .5em;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
}

.header .nav {
	padding: 0.5rem 1rem 1.5rem;
	white-space: nowrap;
}

li {
	line-height: 1.5;
}