@font-face {
	font-family: "JetBrains Mono";
	src: url("/JetBrainsMono.woff2");
	font-display: swap;
}

html,
html.light {
	--accent: #00a584;
	--accent-translucent: #00a58498;
	--font-primary: "JetBrains Mono", monospace;
	--primary: #ffffff;
	--secondary: #e9e9e9;
	--tertiary: #939393;
	--text: #444444;
	--grey: #cecece;
	--alt: #ddd;
	--alt-text: #333;
	--black: #151515;
	--body-text: #666;
	color-scheme: light;
}

html.dark {
	--primary: #151515;
	--secondary: #1d1d1d;
	--tertiary: #353535;
	--text: #ffffffde;
	--grey: #5454547a;
	--alt: #333;
	--alt-text: #ddd;
	--body-text: #bbb;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html {
		--primary: #151515;
		--secondary: #1d1d1d;
		--tertiary: #353535;
		--text: #ffffffde;
		--grey: #5454547a;
		--alt: #333;
		--alt-text: #ddd;
		--body-text: #bbb;
		color-scheme: dark;
	}
}

body {
	@apply bg-primary text-text font-primary m-0 leading-loose min-h-screen transition-colors duration-200;
}

::selection {
	@apply bg-accentTranslucent;
}

a {
	@apply text-accent underline underline-offset-4 transition-filter duration-200;
}

a:hover {
	@apply brightness-70;
}

h1 {
	@apply text-4xl font-bold mt-8 mb-2 border-b-2 border-accent pb-2;
}

.h1-no-lg {
	@apply mt-8 mb-2 border-b-2 border-accent pb-2;
}

h2 {
	@apply text-3xl font-bold mt-8 mb-2;
}

h3 {
	@apply text-2xl font-bold mt-8 mb-2;
}

h4 {
	@apply text-xl font-bold mt-8 mb-2;
}

p {
	color: var(--body-text);
}

/* Between-paragraph spacing */
p + p {
	@apply mt-4;
}

summary {
	@apply cursor-pointer;
}

.button {
	@apply px-2 py-1 bg-accent text-primary rounded no-underline flex flex-row items-center gap-2;
}