:root {
	font-size: 1.5rem;

	/* Material Light (https://github.com/dexpota/kitty-themes/blob/master/themes/Material.conf) */
	--light-color0:  #212121;
	--light-color8:  #424242;
	--light-color1:  #b7141e;
	--light-color9:  #e83a3f;
	--light-color2:  #457b23;
	--light-color10: #7aba39;
	--light-color3:  #f5971d;
	--light-color11: #fee92e;
	--light-color4:  #134eb2;
	--light-color12: #53a4f3;
	--light-color5:  #550087;
	--light-color13: #a94dbb;
	--light-color6:  #0e707c;
	--light-color14: #26bad1;
	--light-color7:  #eeeeee;
	--light-color15: #d8d8d8;
	--light-background: #eaeaea;
	--light-foreground: #222221;

	--light-toggle-transform: 16px;

	/* Default kitty theme (https://sw.kovidgoyal.net/kitty/conf/#the-color-table) */
	--dark-color0:  #000000;
	--dark-color8:  #767676;
	--dark-color1:  #cc0403;
	--dark-color9:  #f2201f;
	--dark-color2:  #19cb00;
	--dark-color10: #23fd00;
	--dark-color3:  #cecb00;
	--dark-color11: #fffd00;
	--dark-color4:  #0d73cc;
	--dark-color12: #1a8fff;
	--dark-color5:  #cb1ed1;
	--dark-color13: #fd28ff;
	--dark-color6:  #0dcdcd;
	--dark-color14: #14ffff;
	--dark-color7:  #dddddd;
	--dark-color15: #ffffff;
	--dark-foreground: #dddddd;
	--dark-background: #000000;

	--dark-toggle-transform: -768px;

	/* Default to light */
	--main-color0:  var(--light-color0);
	--main-color8:  var(--light-color8);
	--main-color1:  var(--light-color1);
	--main-color9:  var(--light-color9);
	--main-color2:  var(--light-color2);
	--main-color10: var(--light-color10);
	--main-color3:  var(--light-color3);
	--main-color11: var(--light-color11);
	--main-color4:  var(--light-color4);
	--main-color12: var(--light-color12);
	--main-color5:  var(--light-color5);
	--main-color13: var(--light-color13);
	--main-color6:  var(--light-color6);
	--main-color14: var(--light-color14);
	--main-color7:  var(--light-color7);
	--main-color15: var(--light-color15);
	--main-foreground: var(--light-foreground);
	--main-background: var(--light-background);
	--main-toggle-transform: var(--light-toggle-transform);
	--alt-color0:  var(--dark-color0);
	--alt-color8:  var(--dark-color8);
	--alt-color1:  var(--dark-color1);
	--alt-color9:  var(--dark-color9);
	--alt-color2:  var(--dark-color2);
	--alt-color10: var(--dark-color10);
	--alt-color3:  var(--dark-color3);
	--alt-color11: var(--dark-color11);
	--alt-color4:  var(--dark-color4);
	--alt-color12: var(--dark-color12);
	--alt-color5:  var(--dark-color5);
	--alt-color13: var(--dark-color13);
	--alt-color6:  var(--dark-color6);
	--alt-color14: var(--dark-color14);
	--alt-color7:  var(--dark-color7);
	--alt-color15: var(--dark-color15);
	--alt-foreground: var(--dark-foreground);
	--alt-background: var(--dark-background);
	--alt-toggle-transform: var(--dark-toggle-transform);
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-color0:  var(--dark-color0);
		--main-color8:  var(--dark-color8);
		--main-color1:  var(--dark-color1);
		--main-color9:  var(--dark-color9);
		--main-color2:  var(--dark-color2);
		--main-color10: var(--dark-color10);
		--main-color3:  var(--dark-color3);
		--main-color11: var(--dark-color11);
		--main-color4:  var(--dark-color4);
		--main-color12: var(--dark-color12);
		--main-color5:  var(--dark-color5);
		--main-color13: var(--dark-color13);
		--main-color6:  var(--dark-color6);
		--main-color14: var(--dark-color14);
		--main-color7:  var(--dark-color7);
		--main-color15: var(--dark-color15);
		--main-foreground: var(--dark-foreground);
		--main-background: var(--dark-background);
		--main-toggle-transform: var(--dark-toggle-transform);
		--alt-color0:  var(--light-color0);
		--alt-color8:  var(--light-color8);
		--alt-color1:  var(--light-color1);
		--alt-color9:  var(--light-color9);
		--alt-color2:  var(--light-color2);
		--alt-color10: var(--light-color10);
		--alt-color3:  var(--light-color3);
		--alt-color11: var(--light-color11);
		--alt-color4:  var(--light-color4);
		--alt-color12: var(--light-color12);
		--alt-color5:  var(--light-color5);
		--alt-color13: var(--light-color13);
		--alt-color6:  var(--light-color6);
		--alt-color14: var(--light-color14);
		--alt-color7:  var(--light-color7);
		--alt-color15: var(--light-color15);
		--alt-foreground: var(--light-foreground);
		--alt-background: var(--light-background);
		--alt-toggle-transform: var(--light-toggle-transform);
	}
}

:root:has(#dark-mode-toggle:not(:checked)) {
	/* Default to light */
	--color0:  var(--main-color0) !important;
	--color8:  var(--main-color8) !important;
	--color1:  var(--main-color1) !important;
	--color9:  var(--main-color9) !important;
	--color2:  var(--main-color2) !important;
	--color10: var(--main-color10) !important;
	--color3:  var(--main-color3) !important;
	--color11: var(--main-color11) !important;
	--color4:  var(--main-color4) !important;
	--color12: var(--main-color12) !important;
	--color5:  var(--main-color5) !important;
	--color13: var(--main-color13) !important;
	--color6:  var(--main-color6) !important;
	--color14: var(--main-color14) !important;
	--color7:  var(--main-color7) !important;
	--color15: var(--main-color15) !important;
	--foreground: var(--main-foreground) !important;
	--background: var(--main-background) !important;

	.dark-mode-svg {
		transform: translate(16px, var(--main-toggle-transform));
		@media (prefers-reduced-motion: no-preference) {
			transition: transform ease var(--anim-duration);
		}
	}
}

:root:has(#dark-mode-toggle:checked) {
	--color0:  var(--alt-color0) !important;
	--color8:  var(--alt-color8) !important;
	--color1:  var(--alt-color1) !important;
	--color9:  var(--alt-color9) !important;
	--color2:  var(--alt-color2) !important;
	--color10: var(--alt-color10) !important;
	--color3:  var(--alt-color3) !important;
	--color11: var(--alt-color11) !important;
	--color4:  var(--alt-color4) !important;
	--color12: var(--alt-color12) !important;
	--color5:  var(--alt-color5) !important;
	--color13: var(--alt-color13) !important;
	--color6:  var(--alt-color6) !important;
	--color14: var(--alt-color14) !important;
	--color7:  var(--alt-color7) !important;
	--color15: var(--alt-color15) !important;
	--foreground: var(--alt-foreground) !important;
	--background: var(--alt-background) !important;

	.dark-mode-svg {
		transform: translate(16px, var(--alt-toggle-transform));
		@media (prefers-reduced-motion: no-preference) {
			transition: transform ease var(--anim-duration);
		}
	}
}

body {
	/* Actual useful styles */
	--highlight: var(--color6);
	color: var(--foreground);
	background: var(--background);

	--content-gap: 10rem;

	height: 100dvh;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	margin: 0;
	font-family: sans-serif;

	--anim-duration: 0.25s;

	@media (prefers-reduced-motion: no-preference) {
		transition: color var(--anim-duration) ease, background-color var(--anim-duration) ease;
	}
}

#fetch-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#fetch {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1rem;
	row-gap: 1rem;
	font-family: "JetBrains Mono", "ui-monospace", "SF Mono", "Courier New", monospace;
	margin: 0 1rem;
	white-space: nowrap;
	font-size: clamp(0.5rem, 2.5dvw, 1rem);
}

p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.indent {
	text-indent: 2lh;
}

#michael-photo-container {
	flex: 1 1 9lh;
	max-width: 11lh;
	aspect-ratio: 1;
	padding-top: 1lh;

	:active {
		animation: spin 1s linear infinite forwards;
	}
}

#michael-photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: 0 10%;
	border: 0.2rem solid var(--highlight);

	@media (prefers-reduced-motion: no-preference) {
		transition: border ease var(--anim-duration);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

#basic-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.text-highlight {
	color: var(--highlight);
	font-weight: bold;
}

.whitespace {
	white-space: pre;
}

.blocks {
	letter-spacing: -1px;
	line-height: 1lh;
}

br {
	padding: 0;
	margin: 0;
	line-height: calc(1lh - 1px);
	:after {
		content: '\0200B';
	}
}

span {
	@media (prefers-reduced-motion: no-preference) {
		transition: color ease var(--anim-duration);
	}
}

.links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 1rem;
	row-gap: 1rem;
	width: min(40rem, 75%);

	a {
		flex: 1 1 1rem;
		max-width: 5rem;
		display: flex;
		justify-content: center;
		aspect-ratio: 1;
		svg {
			transition: fill var(--anim-duration) ease;
			fill: var(--foreground);
		}
		:hover {
			transition: fill var(--anim-duration) ease;
			fill: var(--color8);
		}
	}

	#dark-mode-toggle-label {
		flex: 1 1 1rem;
		max-width: 5rem;
		display: flex;
		justify-content: center;
		aspect-ratio: 1;

		overflow: hidden;
		border-radius: 50%;
		cursor: grab;
		transition-duration: var(--anim-duration);

		svg:hover {
			filter: brightness(85%);
		}
	}

	#dark-mode-toggle {
		display: none;
	}
}