:root {
	color-scheme: light dark;

	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
	--color-dark: #2e303e;
	--color-dark-alt: #3c3f52;
	--color-light: #ebeeef;
	--color-light-alt: #dbe1e3;
	--color-teal-dark: #18737b;
	--color-teal-light: #25b0bc;
	--color-pink-dark: #94195d;
	--color-pink-light: #ee9fcb;

	--color-shadow: rgba(2, 10, 40, .25);

	/* Used for syntax highlighting */
	--color-red-light: #e95678;
	--color-orange-light: #fab795;
	--color-yellow-light: #fbe6bc;
	--color-green-light: #29d398;
	--color-blue-light: #26bbd9;
	--color-purple-light: #ddaeea;
	--color-grey-light: #b9c3c6;

	--color-red-dark: #991433;
	--color-orange-dark: #883206;
	--color-yellow-dark: #6a4906;
	--color-green-dark: #125940;
	--color-blue-dark: #125663;
	--color-purple-dark: #722999;
	--color-grey-dark: #4a4b64;

	--color-text: light-dark(var(--color-dark), var(--color-light));
	--color-bg: light-dark(var(--color-light), var(--color-dark));

	--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
	--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));

	--color-teal: light-dark(var(--color-teal-dark), var(--color-teal-light));
	--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));

	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
	--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
	--color-yellow: light-dark(var(--color-yellow-dark), var(--color-yellow-light));
	--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
}

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

body {
	font-family: var(--font-family);
	color: var(--color-text);
	background-color: var(--color-bg);
	max-width: 60vw;
	margin: 0 auto;
}