.logoWrap.svelte-42yi1z {
		/* flex: 1; */
		align-self: center;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 1;
		/* font-size: 12px; */
		white-space: nowrap;
		text-decoration: none;
		height: fit-content;
		color: var(--on-bg-emphasis);
		transition: none;
		gap: 0;

		@media screen and (min-width: 800px) {
			top: 1px;
			/* margin-right: 2rem; */
			/* on desktop it seems like this specific wants need this 1 px nudge to feel in line with the rest of the menu */
		}
	}

	/* (unused) .logoWrap.variant-0 {
		color: var(--fire-yellow);
	}*/

	/* (unused) .logoWrap.variant-1,
	.logoWrap.variant-1 {
		color: var(--blueberry);
	}*/

	.logoWrap.variant-2.svelte-42yi1z,
	.logoWrap.variant-2.svelte-42yi1z {
		color: var(--primary-color);
	}
	/* (unused) .logoWrap.variant-3,
	.logoWrap.variant-3 {
		color: var(--tomato);
	}*/

	.logoWrap.svelte-42yi1z > :where(.svelte-42yi1z) {
		color: inherit;
		pointer-events: none;
		z-index: -1;
	}

	.grid.svelte-z19sje {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2em;
		/* gap: 1em; */
		align-items: start;
		justify-content: start;
		justify-items: start;
	}

	footer.svelte-z19sje {
		position: relative;
		width: 100%;
		padding: 7em 2em;
		transition: opacity 1s;
		background: var(--surface-color);
		margin-top: var(--gap-related-sections);

		@media screen and (min-width: 800px) {
			font-size: 0.9em;
		}
	}

	.inner.svelte-z19sje {
		max-width: var(--recommended-max-content-width);
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}

	footer.svelte-z19sje:not(.inView) {
		opacity: 0.2;
		/* transform: translateY(5em); */
	}

	footer.svelte-z19sje:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 200vw;
		height: 100%;
		transform: translateX(-50vw);
		/* background-color: rgba(0, 0, 0, 0.184); */
		z-index: -1;
	}

	.column.svelte-z19sje {
		display: flex;
		flex-direction: column;
		gap: 3px;
		/* gap: 1em; */
		align-items: flex-start;
		width: fit-content;

		/* width: 100%; */

		@media screen and (max-width: 800px) {
			gap: 10px;
		}

		/* width: 100%; */
		/* margin: 0 auto; */
	}

	@media only screen and (max-width: 800px) {
		.column.svelte-z19sje {
			display: flex;
			flex-direction: column;
			/* align-items: center; */
			padding: 1em 0em;
			width: 100%;
			margin: 0;
		}
	}

	@keyframes svelte-z19sje-bump {
		0% {
			transform: translateY(5em);
		}
		100% {
			transform: translateY(0);
		}
	}

	.bubble-anchor.svelte-z19sje {
		position: absolute;
		right: 100px;
		top: 0;
		translate: 0 -25%;
		rotate: -5deg;
		/* transform: translateY(-125%) rotate(-5deg); */
		transform-origin: center center;
		overflow: visible;

		@media screen and (max-width: 800px) {
			display: none;
		}

		/* z-index: 99999999999999999999; */
	}

	.bubble.svelte-z19sje {
		position: absolute;
		width: max-content;
		top: 0;
		left: 0;
		transform: translateX(-65%) translateY(-125%);
		padding: 2em;
		background: #242625;
		overflow: visible;
	}

	.stem.svelte-z19sje {
		padding: 0;
		margin: 0;
		position: absolute;
		top: 100%;
		/* bottom: 0; */
		right: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		/* background: red; */
		z-index: 99999999999999999999;

		/* transform: translateX(-50%); */
	}

	.arrow-down.svelte-z19sje {
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;

		border-top: 20px solid #242625;
	}

	.tools-menu.svelte-s87za7 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap-small-related-blocks);
		width: max-content;
		/* width: 100%; */
		/* max-width: 300px; */
	}

	@media only screen and (max-width: 800px) {
		/* (unused) .mainnav {
			min-height: 40px;
			padding: 1em 0em;
			position: relative;
		}*/

		/* (unused) .mainnav.stickydesktop {
			position: relative;
		}*/

		/* (unused) .content {
			justify-content: center;
			align-items: center;
		}*/
		/* (unused) .desktopMenu {
			display: none;
		}*/
	}

	.svelte-s87za7 {
		user-select: none;
	}

	.product-icon.svelte-s87za7 {
		width: 35px;
		height: 35px;
	}

	.title.svelte-1j45zw4 span {
		display: inline-block;
		transition: none;
		font-weight: inherit;
		padding: 0;
		white-space: normal;
		word-break: normal;
		opacity: 0;
		transform: translateY(40px) translateX(-40px);
	}

	.quick-link.svelte-1j45zw4 span:where(.svelte-1j45zw4) {
		display: inline-block;
	}
	.title-box.svelte-1j45zw4 {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: stretch;

		@media screen and (max-width: 1200px) {
			align-items: center;
			flex-direction: column-reverse;
		}
	}
	.title.svelte-1j45zw4 {
		max-width: calc(100% - 300px);
		font-display: swap;
		line-height: 1.2;
		min-height: 1.2em;

		/* width: 500px; */

		@media screen and (max-width: 1200px) {
			max-width: 100%;
		}
	}
	.home-hero.svelte-1j45zw4 {
		display: flex;
		flex-direction: column;
		gap: 0px;

		margin: 8px;

		margin-top: calc(var(--nav-height) * -1 + 8px);
		/* padding-top: calc(var(--nav-height) * 1 - 0px); */

		border-radius: var(--surface-border-radius);

		display: flex;
		align-items: center;
		justify-content: center;

		padding: 5rem;
		min-height: 70vh;

		@media screen and (max-width: 800px) {
			padding: 4rem 1rem;
		}

		position: relative;

		background: #242625;
		color: var(--primary-color);
	}

	.content.svelte-1j45zw4 {
		position: relative;
		display: grid;
		grid-template-columns: 0.8fr 0.2fr;
		gap: var(--gap-spacious-grid);
		align-items: stretch;
		justify-items: stretch;
		width: 100%;
		max-width: 1400px;

		@media screen and (max-width: 1200px) {
			grid-template-columns: 1fr;
			justify-items: center;
			align-items: center;
			text-align: center;
			justify-content: center;
		}
	}

	.content.svelte-1j45zw4 .column:where(.svelte-1j45zw4) {
		@media screen and (max-width: 800px) {
			align-items: center;
			justify-content: center;
		}
	}

	.main.svelte-1j45zw4 .column:where(.svelte-1j45zw4) {
		position: relative;
		margin: auto;
	}

	.main.svelte-1j45zw4 {
		display: flex;
		flex-direction: row;

		gap: var(--gap-dense-grid);

		/* display: grid; */
		/* grid-template-columns: 70% 30%; */
		align-items: start;
		justify-content: start;
		justify-items: start;

		max-width: 1200px;
		@media screen and (max-width: 800px) {
			display: flex;

			align-items: center;
			justify-content: center;
			text-align: center;

			flex-direction: column-reverse;
		}
	}

	.decoration.svelte-1j45zw4 {
		width: 200px;
		height: 167px;
		flex-shrink: 0;

		@media screen and (max-width: 800px) {
			width: 150px;
			position: relative;
		}
	}

	.decoration.svelte-1j45zw4 svg:where(.svelte-1j45zw4) {
		width: 100%;
		height: 100%;
		display: block;
	}

	.arrow-down.svelte-1j45zw4 {
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;

		border-top: 20px solid #242625;
	}

	.bubble-edge.svelte-1j45zw4 {
		padding: 0;
		margin: 0;
		position: absolute;
		top: 100%;
		/* bottom: 0; */
		right: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;

		z-index: 99999999999999999999;
		transform: translateX(-50%);
	}

	.secondary.svelte-1j45zw4 {
		display: flex;
		align-items: start;
		justify-content: center;

		width: 100%;
	}

	.quick-links.svelte-1j45zw4 {
		/* margin: auto; */
		display: flex;
		flex-direction: column;

		justify-self: center;
		align-self: center;

		@media screen and (max-width: 800px) {
			width: 100%;
			display: grid;
			grid-template-columns: 1fr;
			max-width: 300px;
		}
	}

	svg.svelte-1j45zw4 > :where(.svelte-1j45zw4) {
		transform-box: content-box;
		transform-origin: center;
	}

	svg.svelte-1j45zw4 {
		overflow: visible;
		width: 200px;
		height: 167px;
		display: block;
	}

	.quick-link.svelte-1j45zw4 {
		background: var(--bg-color);
		padding: 15px;
		border-radius: 8px;

		align-items: start;
		justify-content: start;
		@media screen and (max-width: 1200px) {
			justify-content: center;
			text-align: center;
		}
	}

	.link.svelte-1j45zw4 {
		text-decoration: underline;
	}
	.link.svelte-1j45zw4:hover {
		color: currentColor;
	}

	.subtitle.svelte-1j45zw4 {
		color: currentColor;
		font-size: 1.2rem;
		line-height: 1.5;
		margin-top: 1rem;

		@media screen and (max-width: 800px) {
			/* max-width: 300px; */
		}
	}

	.desktop-only.svelte-1j45zw4 {
		@media screen and (max-width: 800px) {
			display: none;
		}
	}

	@keyframes svelte-1j45zw4-fadein {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.fadein.svelte-1j45zw4 {
		animation: svelte-1j45zw4-fadein 0.25s ease-in-out both;
	}

	.hidden.svelte-1j45zw4 {
		visibility: hidden;
	}

	.arrow.svelte-1p13rtb {
		position: relative;
		padding: 0.5em;
		width: 23px;
		height: 23px;
		font-size: 0.5em;
		opacity: 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		cursor: pointer;
	}

	.arrow.bg.svelte-1p13rtb {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.overlay-menu.svelte-1as7h3x {
		position: absolute;
		flex-direction: column;
		align-items: flex-start;
		overflow: scroll;
		gap: 1em;
		top: 2em;
		left: 0;
		background-color: inherit;
		background-color: var(--surface-color);
		z-index: var(--on-nav-z-index);
		padding: 2em 4em;
		border-radius: 0.4em;
		opacity: 0;
		pointer-events: none;
		display: flex;

		transform: scale(0.9);
		transform-origin: top;

		opacity: 1;
		pointer-events: all;
		transform: scale(1);
	}

	.outer.svelte-bhcl5q {
		--nav-bg: var(--bg-color);
		font-size: 0.9rem;
		height: var(--nav-height);

		display: flex;
		justify-content: flex-start;
		align-items: center;

		width: fit-content;
		margin: auto;
		position: relative;

		gap: 1.5em;
		transition: opacity 0.5s ease;
		align-items: center;
		margin: 0;
		/* width: 100%; */
		display: flex;
		justify-content: center;
		align-items: center;

		border-radius: var(--surface-border-radius);
		flex-direction: column;
		/* background: #242625; */
		/* margin: 10px; */
		padding: 10px;
		width: 100%;

		z-index: var(--nav-default-z-index);

		position: sticky;
		top: 0;
	}

	.outer.svelte-bhcl5q:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		z-index: -1;

		opacity: 1;
		background: var(--bg-color);
	}

	.subnav.svelte-bhcl5q {
		z-index: calc(var(--nav-default-z-index) + 1);
		background: var(--bg-color);
	}

	.subnav.svelte-bhcl5q .inner:where(.svelte-bhcl5q) {
		justify-content: start;
		width: 100%;

		/* background: red; */
	}

	.inner.svelte-bhcl5q {
		display: flex;
		position: relative;
		gap: var(--gap-spacious-grid);
		/* justify-content: space-between; */
		align-items: center;
		width: 100%;
		max-width: var(--recommended-max-content-width);
		margin: 0 auto;

		@media screen and (max-width: 1250px) {
			/* margin-right: 1rem; */
			/* margin-left: 1rem; */
			/* width: 100%; */
			/* max-width: 200px; */

			/* width: 90%; */

			max-width: 95%;
		}
		/* background: red; */
	}

	@keyframes svelte-bhcl5q-scale-easeOutElastic {
		0% {
			transform: scale(0);
		}

		16% {
			transform: scale(1.12);
		}

		28% {
			transform: scale(0.95);
		}

		44% {
			transform: scale(1.02);
		}

		59% {
			transform: scale(0.99);
		}

		73% {
			transform: scale(1.005);
		}

		88% {
			transform: scale(1);
		}

		100% {
			transform: scale(1);
		}
	}

	.svelte-bhcl5q {
		user-select: none;
	}

	@keyframes svelte-bhcl5q-showMoreMenu {
		0% {
			transform: scale(0.5);
		}

		100% {
			transform: scale(1);
		}
	}

	.product-icon.svelte-bhcl5q {
		width: 35px;
		height: 35px;
	}

	.stack.svelte-bhcl5q {
		overflow-y: hidden;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		width: max-content;
		height: 100%;
		align-items: center;
		justify-content: start;
		justify-items: start;
	}

	.stack.svelte-bhcl5q :where(.svelte-bhcl5q) {
		position: relative;
		grid-column: 1;
		grid-row: 1;
		top: 0;
		left: 0;
	}

	@media screen and (max-width: 800px) {
		.desktop-only.svelte-bhcl5q {
			display: none;
		}
	}

	@media screen and (min-width: 800px) {
		.mobile-only.svelte-bhcl5q {
			display: none;
		}
	}

	.row.svelte-bhcl5q {
		margin-left: auto;
		align-items: center;
		gap: 1em;
		flex-wrap: nowrap;

		@media screen and (max-width: 800px) {
			/* gap: 0px; */
			/* display: none; */
		}
	}

	.button.svelte-2335gc {
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 0.7em; */
		position: relative;
		/* background-color: black; */
		width: 0.8em;
		height: 0.7em;
		cursor: pointer;
	}

	/* increase the clicky zone with a before element */
	.button.svelte-2335gc:before {
		content: "";
		position: absolute;
		top: -18px;
		left: -18px;
		width: calc(100% + 36px);
		height: calc(100% + 36px);
		/* background-color: white; */
	}
	.burger.svelte-2335gc {
		display: flex;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.burger.open.svelte-2335gc {
		transform: rotate(-180deg);
	}

	.burger.svelte-2335gc,
	.line.svelte-2335gc {
		transition: all 0.4s cubic-bezier(0.34, -0.02, 0, 0.98);
	}

	/* .burger {
		transition-delay: 0.1s;
	} */

	.line.svelte-2335gc {
		top: 0%;
		left: 0%;
		width: 100%;
		position: absolute;
		height: 1px;

		background-color: var(--on-bg);
		/* transform-origin: center; */
	}

	.line.first.svelte-2335gc {
		top: 0%;
	}
	.line.mid.svelte-2335gc {
		top: 50%;
		transform: translateY(-50%);
	}
	.line.last.svelte-2335gc {
		top: 100%;
		transform: translateY(-100%);
	}

	.line.first.open.svelte-2335gc {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.line.mid.open.svelte-2335gc {
		opacity: 0;
		transform: rotate(-45deg);
	}
	.line.last.open.svelte-2335gc {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.mainnav.svelte-wyfboi {
		--nav-bg: var(--bg-color);
		font-size: 0.9rem;
		height: var(--nav-height);

		display: flex;
		justify-content: flex-start;
		align-items: center;

		width: fit-content;
		margin: auto;
		position: relative;
		gap: 1.5em;
		transition: opacity 0.5s ease;
		align-items: center;
		margin: 0;

		display: flex;
		justify-content: center;
		align-items: center;

		/* border-radius: var(--surface-border-radius); */
		flex-direction: column;
		/* margin: 10px; */
		padding: 10px;
		width: auto;

		position: sticky;
		top: 0;

		z-index: var(--nav-default-z-index);

		@media only screen and (max-width: 800px) {
			min-height: 40px;
			padding: 1em 0em;
		}
	}

	.mainnav.fixed.svelte-wyfboi {
		@media screen and (max-width: 800px) {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: var(--nav-default-z-index);
		}
	}

	.mainnav.opaque.svelte-wyfboi {
		background: var(--bg-color);
	}

	.content.svelte-wyfboi {
		display: flex;
		position: absolute;

		gap: var(--gap-spacious-grid);
		/* justify-content: space-between; */
		align-items: center;
		width: 100%;
		max-width: var(--recommended-max-content-width);
		margin: 0 auto;
		/* z-index: var(--nav-default-z-index); */
		z-index: 999999999;

		@media screen and (max-width: 1250px) {
			/* margin-right: 1rem; */
			/* margin-left: 1rem; */
			/* width: 100%; */
			/* max-width: 200px; */

			/* width: 90%; */

			max-width: 95%;
		}

		@media only screen and (max-width: 800px) {
			justify-content: center;
			align-items: center;
		}
	}

	.spacer.svelte-wyfboi {
		flex-grow: 1;
	}

	.desktopMenu.svelte-wyfboi {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

		gap: 1.5em;
		z-index: var(--on-nav-z-index);
	}

	@media only screen and (max-width: 800px) {
		.desktopMenu.svelte-wyfboi {
			display: none;
		}
	}

	.mobileMenu.svelte-wyfboi {
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: scroll;
		gap: 1em;

		background-color: var(--bg-color);
		top: 0;
		left: 0;
		width: 100vw;
		padding: 2em 3em;
		/* padding-top: 4em; */
		min-height: 100vh;

		top: 0;
		z-index: var(--under-nav-z-index);
		padding-top: calc(var(--nav-height) * 1.5);
	}

	.mobileMenuToggle.svelte-wyfboi {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;

		/* height: 100%; */
		margin-right: 2em;
		z-index: calc(var(--on-nav-z-index) + 1);
	}

	.active.svelte-wyfboi {
		color: var(--on-bg-active);
		/* transform: translateY(-2px); */
		opacity: 1;
	}

	@keyframes svelte-wyfboi-scale-easeOutElastic {
		0% {
			transform: scale(0);
		}

		16% {
			transform: scale(1.12);
		}

		28% {
			transform: scale(0.95);
		}

		44% {
			transform: scale(1.02);
		}

		59% {
			transform: scale(0.99);
		}

		73% {
			transform: scale(1.005);
		}

		88% {
			transform: scale(1);
		}

		100% {
			transform: scale(1);
		}
	}

	.svelte-wyfboi {
		user-select: none;
	}

	@keyframes svelte-wyfboi-showMoreMenu {
		0% {
			transform: scale(0.5);
		}

		100% {
			transform: scale(1);
		}
	}

	@media screen and (max-width: 800px) {
		/* (unused) .desktop-only {
			display: none;
		}*/
	}

	@media screen and (min-width: 800px) {
		.mobile-only.svelte-wyfboi {
			display: none;
		}
	}
/* https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}
:root {
	--dim-opacity: 0.7;
	--dimmer-opacity: 0.5;
	--dimmest-opacity: 0.3;

	--nav-height: 60px;
	--nav-default-z-index: 9999;
	--on-nav-z-index: calc(var(--nav-default-z-index) + 1);
	--under-nav-z-index: calc(var(--nav-default-z-index) - 1);

	/* presets */
	--neon-green: rgba(173, 247, 194, 0.821);

	--neon-green: #76ffb5;
	--neon-green-alt: #22e26f;
	--neon-blue: #61d7fd;
	--neon-blue-alt: #0047ff;
	--fire-red: #ff4d4d;
	--fire-orange: #ff7f4d;
	--fire-yellow: #ffcc4d;

	--tomato: #f14e1b;
	--mustard: #ffc700;
	--sprite: #0faa57;
	--blueberry: #5551ff;
	--purrple: #a25afc;

	--gameboy-purple: #8f7aff;
	--gameboy-purple-alt: #5f4aff;
	--gameboy-purple-alt2: #3f2aff;

	/* primary */
	--primary-color: #39e6f9;

	--primary-color-dark: #2cc7e0;
	--primary-color-darker: #1fa8c7;
	--primary-color-darkest: #1289ae;
	--primary-color-light: #4cf3ff;
	--primary-color-lighter: #61f7ff;
	--primary-color-lightest: #76fbff;

	--primary-color: #a25afc;
	--primary-color-dark: #8f7aff;
	--primary-color-darker: #5f4aff;
	--primary-color-darkest: #3f2aff;
	--primary-color-light: #aa69fe;
	--primary-color-lighter: #d1ccff;
	--primary-color-lightest: #eae9ff;

	

	

	/* bg */
	--bg-color: #131518;

	--bg-color-dark: #0d0f12;
	--bg-color-darker: #0a0b0d;
	--bg-color-darkest: #070809;
	--bg-color-light: #1a1c1f;
	--bg-color-lighter: #1d1f22;
	--bg-color-lightest: #202225;

	--on-bg: rgb(124, 133, 154);
	--on-bg-emphasis: rgb(201, 210, 232);
	--on-bg-active: var(--on-bg-emphasis);
	--on-bg-dim: rgba(124, 133, 154, var(--dim-opacity));
	--on-bg-dimmer: rgba(124, 133, 154, var(--dimmer-opacity));
	--on-bg-dimmest: rgba(124, 133, 154, var(--dimmest-opacity));



	/* surface */
	--surface-color: rgb(25, 27, 33);
	--surface-color-primary: rgb(31, 34, 41);
	--surface-color-secondary: rgb(26, 29, 35);
	--surface-color-tertiary: rgb(36, 39, 47);
	--surface-border-radius: 20px;
	--surface-border-radius-half: calc(var(--surface-border-radius) * 0.5);
	--surface-border-radius-quarter: calc(var(--surface-border-radius) / 4);
	--on-surface: var(--on-bg);

	--on-primary-color: #111010;

	/* gap presets */
	--gap-tight-grid: 0.5rem;
	--gap-dense-grid: 1rem;
	--gap-spacious-grid: 2rem;

	--gap-small-related-blocks: 0.6rem;
	--gap-small-unrelated-blocks: 1.25rem;

	--gap-medium-related-blocks: 0.75rem;
	--gap-medium-unrelated-blocks: 1.25rem;

	--gap-unrelated-sections: 6rem;
	--gap-related-sections: 3rem;

	--max-content-width: calc(100dvw - 10px);

	/* secondary */
	--secondary-color: #f9a839;
	--on-secondary-color: #111010;

	/* breakpoints */
	--mobile: 800px;
	--tablet: 1200px;
	--desktop: 1600px;
	--widescreen: 2000px;

	/* debugging light mode */
	/* --bg-color: white;
	--surface-color: hsl(0, 0%, 92%);
	--on-bg: black;
	--on-surface: black;
	--on-bg-emphasis: black; */

	/* new colors test */
	--bg-color: #121317;
	--on-bg: #717073;
	--on-bg-dim: rgba(113, 112, 115, var(--dim-opacity));
	--on-bg-dimmer: rgba(113, 112, 115, var(--dimmer-opacity));
	--on-bg-dimmest: rgba(113, 112, 115, var(--dimmest-opacity));

	--surface-color: rgb(24, 26, 30);
	--surface-color-primary: rgb(31, 33, 37);
	--surface-color-secondary: rgb(26, 28, 32);
	--surface-color-tertiary: rgb(36, 38, 42);
	--on-surface: #747376;
	--on-bg-emphasis: #d0d0d0;

	/* future */
	--bg-color: #1A1A1A;
	--on-bg: #7C7E7F;
	--on-bg-dim: rgba(122, 123, 124, var(--dim-opacity));
	--on-bg-dimmer: rgba(122, 123, 124, var(--dimmer-opacity));
	--on-bg-dimmest: rgba(122, 123, 124, var(--dimmest-opacity));

	--surface-color: #1F1F1F;
	--surface-color-primary: #262524;
	--surface-color-secondary: var(--bg-color);
	--surface-color-tertiary: var(--bg-color);
	--on-surface: var(--on-bg);
	--on-bg-emphasis: #D0D0D0;;
	--on-surface: var(--on-bg);


		/* --on-bg: #8f9091; */
		/* --on-surface: blue; */
		/* --on-surface-secondary: rgb(89, 255, 0); */


		/* content */
	--recommended-max-content-width: min(calc(100% - 10px), 1400px);
	--recommended-max-content-width-medium: min(calc(100% - 10px), 1200px);
	--recommended-max-content-width-small: min(calc(100% - 10px), 800px);
	--recommended-max-content-width-smaller: min(calc(100% - 10px), 700px);

		--primary-color: #8AF3B9;
		/* TODO: finish these */
	--primary-color-dark: var(--primary-color); 
	--primary-color-darker: var(--primary-color); 
	--primary-color-darkest: var(--primary-color); 
	--primary-color-light: var(--primary-color); 
	--primary-color-lighter: var(--primary-color); 
	--primary-color-lightest: var(--primary-color); 


}

ol {
	padding-inline-start: 10px;
}

html,
body {
	margin: 0;
	padding: 0;
}

html {
	max-width: 100%;
	overflow-x: hidden;
	font-family: roboto;
	/* font-family:  "ApfelGrotezk", "Roboto", system-ui, sans-serif; */
	font-family: "Inter", "GeneralSans-Variable", "Roboto", system-ui, sans-serif;
	
	font-display: swap;
}

body {
	padding: 0;
	background-color: var(--bg-color);

	

	color: var(--on-bg);
	fill: var(--on-bg);
	stroke: var(--on-bg);

	scroll-behavior: smooth;
	gap: var(--gap-medium-related-blocks);

	/* disabled horizontal scroll */
	width: 100%;
	max-width: 100vw;
	overflow-x: clip;

	/* line-height: 1.5em; */
	font-size: 15px;
	font-size: 14px;
	font-weight: 480;
	font-weight: 350;

	
	@media only screen and (max-width: 800px) {
		font-size: 13px;
	}

	/* -webkit-font-smoothing: antialiased; */
	/* -moz-osx-font-smoothing: grayscale; */
}

h1 {
	font-weight: 500;
}
h3 {
	line-height: 1.4;
}

body {
	@media (max-width: 800px) {
		/* font-size: 14px; */
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 0;
	margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "InterDisplay";
	/* font-family: PressStart2P; */
	/* text-transform: uppercase; */
	/* letter-spacing: 0.1em; */
}

h1 {
	font-size: 2em;
	font-weight: 520;
	@media only screen and (max-width: 800px) {
		font-size: 1.7rem;
	}
}
h2 {
	font-size: 1.5em;
	font-weight: 500;
	@media only screen and (max-width: 800px) {
		font-size: 1.4em;
	}
}
h3 {
	font-size: 1.17em;
	font-weight: 500;
	@media only screen and (max-width: 800px) {
		font-size: 1.2em;
	}
}
h4 {
	font-size: 1em;
	font-weight: 500;
	@media only screen and (max-width: 800px) {
		font-size: 0.9em;
	}
}
h5 {
	font-size: 0.83em;
	@media only screen and (max-width: 800px) {
		font-size: 0.78em;
	}
}
h6 {
	font-size: 0.68em;
	@media only screen and (max-width: 800px) {
		font-size: 0.65em;
	}
}

a {
	text-decoration: none;
	/* color: var(--on-bg-emphasis); */
	color: inherit;
	cursor: pointer;
	transition: color 0.2s ease-out;
}

main a,
main a:visited {
	/* text-decoration: underline; */
	/* color: var(--on-bg-emphasis); */
}

/* links mid paragraph get an underline */
p a,
li a,
ul a {
	text-decoration: underline;
}

a:hover {
	color: var(--on-bg-emphasis);
}
a:visited {
	/* color: unset; */
}

.italic {
	font-style: italic;
}

h1 b,
h2 b {
	font-weight: 700;
}

h3 b,
h4 b,
h5 b,
h6 b {
	/* background: yellow; */
}

em {
	font-style: unset;
	color: var(--on-bg-emphasis);
}

::-webkit-scrollbar {
	width: 0 !important;
}

::-webkit-scrollbar {
	display: none;
}

.element::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 0;
	height: 0;
}

* {
	scrollbar-width: none; /* Firefox 64 */
}

.callout {
	/* background-color: #00000049; */
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.5rem 0.8rem;
	margin: 0.1rem;
	border-radius: 5px;

	/* color: rgb(192, 243, 255); */
}

pre > code {
	border-radius: 5px;
}

mark {
	all: unset;
	background-color: none;
	position: relative;
	z-index: 2;
	color: white;
}

mark:before {
	content: "";
	position: absolute;
	--padding: 0.4em;
	top: calc(-1 * var(--padding));
	left: calc(-1 * var(--padding) - 0.2em);
	width: calc(100% + 2 * var(--padding) + 0.4em);
	height: calc(100% + 2 * var(--padding));
	background-color: #00bbff6b;
	opacity: 0.5;
	z-index: 0;
	border-radius: 5px;
}

section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.non-selectable {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

video,
image {
	max-width: 100%;
}

ul li {
	list-style-type: square;
	list-style-position: inside;
}

ul {
	padding: 0.5em 0em;
	padding-left: 1.5em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.text-shine {
	background: linear-gradient(to right, var(--on-bg-dim) 20%, var(--on-bg-active) 70%, var(--on-bg-dim) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 500% auto;
	animation: textShine 3s reverse ease-in-out infinite;
}

.text-shine.blue {
	background: linear-gradient(to right, var(--neon-blue) 20%, var(--neon-blue-alt) 70%, var(--neon-blue) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 500% auto;
	animation: textShine 3s ease-in-out infinite reverse;
}

.text-shine.fire {
	background: linear-gradient(to right, var(--fire-red) 20%, var(--fire-orange) 30%, var(--fire-yellow) 55%, var(--fire-orange) 70%, var(--fire-red) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 500% auto;
	animation: textShine 2s ease-in-out infinite reverse;
}

.text-shine.green {
	background: linear-gradient(to right, var(--neon-green) 20%, var(--neon-green-alt) 70%, var(--neon-green) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 500% auto;
	animation: textShine 1.5s ease-in-out infinite reverse;
}

.text-shine.purple {
	background: linear-gradient(to right, var(--gameboy-purple) 20%, var(--gameboy-purple-alt) 70%, var(--gameboy-purple) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 500% auto;
	animation: textShine 1.5s ease-in-out infinite reverse;
}

@keyframes textShine {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

.shake {
	animation: shake 0.4s infinite;
}

@keyframes shake {
	0%,
	33%,
	43%,
	79%,
	86%,
	100% {
		transform: translate(0.4px, 0.4px) rotate(0deg);
	}
	40%,
	80% {
		transform: translate(-0.4px, 0.4px) rotate(0deg);
	}
	20%,
	49%,
	55%,
	70%,
	90% {
		transform: translate(0px, -0.4px) rotate(0deg);
	}
	4%,
	10%,
	15%,
	25%,
	60%,
	95% {
		transform: translate(0.4px, 0px) rotate(0deg);
	}
}


.theme-surface,
.theme-surface-secondary,
.theme-surface-primary {
	background: var(--surface-color);
	border-radius: var(--surface-border-radius);
	color: var(--on-surface);
	overflow: hidden;
	padding: 2rem;

	@media screen and (max-width: 800px) {
		/* padding: 1.5rem 1.8rem; */
	}
}

.theme-surface-primary {
	background: var(--surface-color-primary);
	color: var(--on-surface);
}

.theme-round-photo {
	border-radius: var(--surface-border-radius);
	overflow: hidden;
	width: 100%;
	object-fit: cover;
}


.theme-surface-secondary {
	background: var(--bg-color);
	box-shadow: 0 0 0 1px var(--surface-color);

}

h1.theme-hero {
	font-size: 5rem;
	font-weight: bold;

	@media screen and (max-width: 800px) {
		font-size: 3.8rem;
		
	}
	
}
h2.theme-hero {
	font-size: 3rem;
	font-weight: bold;

	@media screen and (max-width: 800px) {
		font-size: 2.5rem;
	}
}
h3.theme-hero {
	font-size: 2rem;
	font-weight: bold;

	@media screen and (max-width: 800px) {
		font-size: 1.5rem;
	}
}/* include another file */
/**
 * @license
 *
 * Font Family: General Sans
 * Designed by: Frode Helland
 * URL: https://www.fontshare.com/fonts/general-sans
 * © 2024 Indian Type Foundry
 *
 * Font Styles:
 * General Sans Variable(Variable font)
 * General Sans Variable Italic(Variable font)
 * General Sans Extralight
 * General Sans Extralight Italic
 * General Sans Light
 * General Sans Light Italic
 * General Sans Regular
 * General Sans Italic
 * General Sans Medium
 * General Sans Medium Italic
 * General Sans Semibold
 * General Sans Semibold Italic
 * General Sans Bold
 * General Sans Bold Italic
 *
*/
/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 700.0;
*
* available axes:

* 'wght' (range from 200.0 to 700.0)

*/
@font-face {
  font-family: 'GeneralSans-Variable';
  src: url('./GeneralSans-Variable.p1VyP7gg.woff2') format('woff2'),
       url('./GeneralSans-Variable.DAqniUaj.woff') format('woff'),
       url('./GeneralSans-Variable.D4t1btYN.ttf') format('truetype');
       font-weight: 200 700;
       font-display: swap;
       font-style: normal;
}
/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 700.0;
*
* available axes:

* 'wght' (range from 200.0 to 700.0)

*/
@font-face {
  font-family: 'GeneralSans-VariableItalic';
  src: url('./GeneralSans-VariableItalic.DIM2rvVg.woff2') format('woff2'),
       url('./GeneralSans-VariableItalic.BsSpAJeQ.woff') format('woff'),
       url('./GeneralSans-VariableItalic.dXS85WKy.ttf') format('truetype');
       font-weight: 200 700;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Extralight';
  src: url('./GeneralSans-Extralight.CeoahQd2.woff2') format('woff2'),
       url('./GeneralSans-Extralight.NwzqzUvZ.woff') format('woff'),
       url('./GeneralSans-Extralight.-toNElvl.ttf') format('truetype');
       font-weight: 200;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-ExtralightItalic';
  src: url('./GeneralSans-ExtralightItalic.S_cjHVs3.woff2') format('woff2'),
       url('./GeneralSans-ExtralightItalic.DSYFpNEt.woff') format('woff'),
       url('./GeneralSans-ExtralightItalic.Cb4GrHRn.ttf') format('truetype');
       font-weight: 200;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Light';
  src: url('./GeneralSans-Light.ulp9itO8.woff2') format('woff2'),
       url('./GeneralSans-Light.DzM6pIPN.woff') format('woff'),
       url('./GeneralSans-Light.DcTqM57O.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-LightItalic';
  src: url('./GeneralSans-LightItalic.DkwLWVcP.woff2') format('woff2'),
       url('./GeneralSans-LightItalic.Ct_DMRPZ.woff') format('woff'),
       url('./GeneralSans-LightItalic.C_QR9gvT.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Regular';
  src: url('./GeneralSans-Regular.BeAhF2WT.woff2') format('woff2'),
       url('./GeneralSans-Regular.Dk2lLWJL.woff') format('woff'),
       url('./GeneralSans-Regular.BTmkhiIl.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-Italic';
  src: url('./GeneralSans-Italic.B5PwseXg.woff2') format('woff2'),
       url('./GeneralSans-Italic.DzbrtvFL.woff') format('woff'),
       url('./GeneralSans-Italic.BpGxTCEl.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('./GeneralSans-Medium.DvEF04Ne.woff2') format('woff2'),
       url('./GeneralSans-Medium.sA7I9gJL.woff') format('woff'),
       url('./GeneralSans-Medium.BakGtJF2.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-MediumItalic';
  src: url('./GeneralSans-MediumItalic.KKwIU56p.woff2') format('woff2'),
       url('./GeneralSans-MediumItalic.BBXQStTM.woff') format('woff'),
       url('./GeneralSans-MediumItalic.DoLfBPNa.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Semibold';
  src: url('./GeneralSans-Semibold.DFLbTJgb.woff2') format('woff2'),
       url('./GeneralSans-Semibold.oVEy_BBm.woff') format('woff'),
       url('./GeneralSans-Semibold.Ckm6wkEi.ttf') format('truetype');
       font-weight: 600;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-SemiboldItalic';
  src: url('./GeneralSans-SemiboldItalic.C5XnX2aR.woff2') format('woff2'),
       url('./GeneralSans-SemiboldItalic.DNy4mdcJ.woff') format('woff'),
       url('./GeneralSans-SemiboldItalic.QA1tcZBS.ttf') format('truetype');
       font-weight: 600;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Bold';
  src: url('./GeneralSans-Bold.Ctx684HN.woff2') format('woff2'),
       url('./GeneralSans-Bold.Bd_PtqWW.woff') format('woff'),
       url('./GeneralSans-Bold.DM1NF1hz.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-BoldItalic';
  src: url('./GeneralSans-BoldItalic.CPXXYtWC.woff2') format('woff2'),
       url('./GeneralSans-BoldItalic.42Tn_Ge_.woff') format('woff'),
       url('./GeneralSans-BoldItalic.U4augfB3.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: italic;
}
/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./InterVariable.DiVDrmQJ.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./InterVariable-Italic.FCBEiFp6.woff2") format("woff2");
}
/* static fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("./Inter-Thin.DzN99i8q.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("./Inter-ThinItalic.DxehbPeK.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("./Inter-ExtraLight.7kXoOaX_.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("./Inter-ExtraLightItalic.Ox17i_b0.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("./Inter-Light.14LG-y7V.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("./Inter-LightItalic.iBr7p6CH.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./Inter-Regular.COLGFB3M.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("./Inter-Italic.Bm_w1qmz.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./Inter-Medium.CDhBSFyE.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("./Inter-MediumItalic.BqDObnQN.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./Inter-SemiBold.BAEEcJ4E.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("./Inter-SemiBoldItalic.B7KOJJiL.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./Inter-Bold.BOs3KVhN.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("./Inter-BoldItalic.Cabj1n7x.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("./Inter-ExtraBold.BUaDDWMS.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("./Inter-ExtraBoldItalic.efVpd_pq.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("./Inter-Black.BJbWHna9.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("./Inter-BlackItalic.D3PIgx41.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("./InterDisplay-Thin.BT9qaRpT.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("./InterDisplay-ThinItalic.DtFR0WUP.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("./InterDisplay-ExtraLight.B3-UpUq4.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("./InterDisplay-ExtraLightItalic.C8b3Z3Tc.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("./InterDisplay-Light.DQj7ly9y.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("./InterDisplay-LightItalic.Bbt9QreW.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("./InterDisplay-Regular.CHKdHLF4.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("./InterDisplay-Italic.Pk5cUfHi.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("./InterDisplay-Medium.CYGNL_ty.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("./InterDisplay-MediumItalic.hd-DtBFz.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("./InterDisplay-SemiBold.-Mm3ZPsY.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("./InterDisplay-SemiBoldItalic.KqvXNdTp.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("./InterDisplay-Bold.BpCEuk9N.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("./InterDisplay-BoldItalic.2f5-4TWO.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("./InterDisplay-ExtraBold.CTk6ni5a.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("./InterDisplay-ExtraBoldItalic.7uYEMdJ3.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("./InterDisplay-Black.-Thh5XZM.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("./InterDisplay-BlackItalic.CeOspfgx.woff2") format("woff2"); }
@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-feature-values Inter {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-feature-values InterDisplay {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}
@font-face {
	font-family: "ApfelGrotezk";
	font-style: normal;
	src: url("./ApfelGrotezk-Regular.BWvmwAfX.woff2");
	font-display: swap;
}
@font-face {
	font-family: "ApfelGrotezk-Fett";
	src: url("./ApfelGrotezk-Fett.C0IDjXKv.woff2");
}
@font-face {
	font-family: "Mattone";
	src: url("./Mattone-Regular.Di0AifE3.woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Mattone";
	src: url("./Mattone-Black.Cd4NRLUj.woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PressStart2P";
	font-style: normal;
	src: url("./PressStart2P-Regular.CGiUnqOA.ttf");
	font-display: swap;
	size-adjust: 80%;
}
@font-face {
	font-family: "SpaceMono";
	font-style: normal;
	src: url("./SpaceMono-Bold.Bkvlkk71.ttf");
	font-display: swap;
}
@font-face {
	font-family: "VT323";
	font-style: normal;
	src: url("./VT323-Regular.CNzYqQBi.ttf");
	font-display: swap;
}
@font-face {
	font-family: "Source Code Pro";
	font-style: normal;
	src: url("./SourceCodePro-Regular.2mMeqpHo.ttf");
	font-display: swap;
	font-weight: 400;
}
@font-face {
	font-family: "Source Code Pro";
	font-style: normal;
	src: url("./SourceCodePro-Light.BtGn1qPX.ttf");
	font-display: swap;
	font-weight: 100;
}
.font.ApfelGrotezk {
	font-family: "ApfelGrotezk", sans-serif;
}
.font.PressStart2P {
	font-family: "PressStart2P", sans-serif;
	line-height: 1.4;
}
h1.font.PressStart2P {
	line-height: 1.2;

	@media (min-width: 800px) {
		/* line-height: 1.3; */
	}
}
h3.font.PressStart2P {
	line-height: 1.3;
}
.uppercase {
	text-transform: uppercase;
}
.font.space-mono {
	font-family: "SpaceMono", sans-serif;
}

pre > code,
code > span {
	font-family: "Roboto Mono", monospace;
	transition: all 0.2s ease-in-out;
}

code {
	font-family: "SpaceMono", "Roboto Mono", monospace, "Nimbus Mono PS", "Courier New", Courier, monospace;
	background-color: #00000049;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.1rem 0.6rem;
	margin: 0.1rem;
	border-radius: 5px;
	font-size: 0.8em;
	/* color: rgb(192, 243, 255); */
}
/* multiple levels of dimming exist. If the tag is a text, dim the color instead of the opacity to allow breaking for links */

.dim {
	opacity: 0.7;
}
.dimmer {
	opacity: 0.5;
}
.dimmest {
	opacity: 0.3;
}

p .dim {
	opacity: 1;
	color: var(--on-bg-dim);
}

p .dimmer {
	opacity: 1;
	color: var(--on-bg-dimmer);
}

p .dimmest {
	opacity: 1;
	color: var(--on-bg-dimmest);
}

.dim a,
.dimmer a,
.dimmest a {
	/* opacity: inherit; */
	color: var(--on-bg);
	/* background-color: red; */
}



.opaque {
	opacity: 1;
}.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-dense-grid);
}

.column {
	display: flex;
	flex-direction: column;
	gap: var(--gap-dense-grid);
}

.row,
.column {
	/* align-items: inherit; */
	justify-content: inherit;
}

	div.svelte-1220c3n {
		display: flex;
		flex-direction: column;
		gap: var(--gap-medium-related-blocks);
		align-items: center;
		justify-content: center;
		margin: auto;
		width: 100%;
		height: 100%;
		max-width: 400px;
		min-height: 500px;
	}

	main.svelte-1fdhhv9 {
		width: 100vw;
		padding: 0 1em;
		max-width: calc(100vw - 1em);
		margin: 0 auto;
		min-height: 70vh;

		/* new layout */
		max-width: none;
		display: grid;
		grid-template-columns: auto min(var(--max-content-width), 900px) auto;
		row-gap: var(--gap-medium-related-blocks);
		padding: 0;

		/* to space the nav and the content... */
		padding-top: 20px;
	}

	/* by default, everything goes in the middle column */
	main.svelte-1fdhhv9 > * {
		grid-column: 2;
	}
	@keyframes svelte-1fdhhv9-slide {
		0% {
			opacity: 0;
			transform: translateY(10px);
		}
		100% {
			transform: translateX(0);
		}
	}