:root,
:root.dark {
	font-family:
		Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
		Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--active: #81f0ff;
	--light-active: #31616a;
	--foreground: white;
	--light-foreground: #dedede;
	--bg-green: #193337;
	--background: #131619;
	--bg-contrast: #222;
	--light-bg: #fff1;
	--bg-light-transparent: #2225;
	--box-shadow-light-only: none;
	--font-small: 14px;
	--font-medium: 18px;
	--font-large: 24px;
	--font-huge: 32px;
	font-size: var(--font-medium);
}

body {
	background: linear-gradient(
		to bottom right,
		#04040e,
		#060616,
		black,
		#03041d
	);
	color: var(--foreground);
	margin: 0;
}

@media (prefers-color-scheme: light) {
	:root {
		--active: #ff7b3a;
		--light-active: #ffdac8;
		--foreground: #222;
		--light-foreground: #222;
		--background: white;
		--light-bg: #0001;
		--bg-green: #e8f8fa;
		--bg-contrast: #0001;
		--bg-light-transparent: #eee5;
		--box-shadow-light-only: 2px 2px 3px #00000038;
	}
	body {
		background: linear-gradient(to bottom right, white, #f8f9fb);
	}
	img.dark-mode {
		filter: invert(1);
	}
	::selection {
		background: #ffb7b7;
	}
}
/* copy of everything above */
:root.light {
	--active: #ff7b3a;
	--light-active: #ffdac8;
	--foreground: #222;
	--light-foreground: #555;
	--background: white;
	--light-bg: #0001;
	--bg-green: #e8f8fa;
	--bg-contrast: #0001;
	--bg-light-transparent: #eee5;
	--box-shadow-light-only: 2px 2px 3px #00000038;
}
:root.light body {
	background: linear-gradient(to bottom right, white, #f8f9fb);
}
:root.light img.dark-mode {
	filter: invert(1);
}
:root.light ::selection {
	background: #ffb7b7;
}

main {
	max-width: 800px;
	margin: 0 auto;
	padding: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
	margin: 0;
}

h1 {
	font-size: var(--font-large);
}
h2 {
	font-weight: 300;
	font-size: var(--font-large);
}

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

/* css for staggered class. Easier than a svelte component */

@keyframes slide-in {
	from {
		transform: translate(20px);
		opacity: 0;
	}
	to {
		transform: translate(0px);
		opacity: 1;
	}
}

.staggered {
	--max-depth: 20;
	--max-delay: 500ms;
}

.staggered > * {
	animation: slide-in 0.5s forwards;
	display: block;
	/* number 0 to 1 based off of index/max_index */
	--percentage: min(calc(var(--index) / var(--max-depth)), 1);
	/* Quadratic easing curve. Still a number 0 to 1 */
	--curve: calc(1 - (1 - var(--percentage)) * (1 - var(--percentage)));
	/* make delay percentage * delay */
	animation-delay: calc(var(--curve) * var(--max-delay));
	opacity: 0;
}