@font-face {
	font-family: Zain;
	src: url('./fonts/Zain-Regular.ttf') format('truetype');
	font-weight: normal;
}

@font-face {
	font-family: Zain;
	src: url('./fonts/Zain-Bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: Monaspace Krypton;
	src: url('./fonts/MonaspaceKrypton-Regular.woff') format('woff');
}

:root {
	--color--primary: #25042d;
	--color--accent: #3af180;
	--color--light: #b4ddce;
	--color--mid: #ab52b4;
	--color--dark: #0c4d0c;
	--color--black: #030303;
	--color--white: #ffffff;

	--font-family--content: 'Zain', sans-serif;
	--font-family--title: 'Monaspace Krypton', monospace;
	--font-family--code: 'Monaspace Krypton', monospace;

	--font-scale: calc(9 / 8);

	font-size: 22px;
	line-height: var(--font-scale);
	font-family: var(--font-family--content);
	color: var(--color--white);
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--color--primary);
	margin: 0;
	padding: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
p {
	margin-block: 0;
	font-weight: normal;
}

p {
	margin-block-end: calc(1em / var(--font-scale));
}

h1,
.h1 {
	font-size: calc(1rem * pow(var(--font-scale), 6));
	font-family: var(--font-family--title);
}

h2,
.h2 {
	font-size: calc(1rem * pow(var(--font-scale), 5));
	font-family: var(--font-family--title);
}

h3,
.h3 {
	font-size: calc(1rem * pow(var(--font-scale), 4));
	font-family: var(--font-family--content);
}

h4,
.h4 {
	font-size: calc(1rem * pow(var(--font-scale), 3));
	font-family: var(--font-family--content);
}

h5,
.h5 {
	font-size: calc(1rem * pow(var(--font-scale), 2));
	font-family: var(--font-family--content);
}

h6,
.h6 {
	font-size: calc(1rem * pow(var(--font-scale), 1));
	font-family: var(--font-family--content);
}

small,
.small {
	font-size: calc(1rem * pow(var(--font-scale), -1));
}

a {
	color: var(--color--accent);

	&,
	&:active,
	&:visited {
		text-decoration: none;
	}

	&:hover,
	&:focus-visible {
		text-decoration: underline;
	}
}

input,
select,
textarea {
	font-size: 1rem;
	font-family: var(--font-family--content);
	border-radius: 3px;
	color: var(--color--mid);
	padding: 0.25em 0.5em;
	border: none;

	&:focus-visible {
		outline: 2px solid var(--color--accent);
	}
}

*:not(pre) > code,
pre:has(code) {
	font-family: var(--font-family--code);
	line-height: 1.3;
	font-size: calc(1rem * pow(var(--font-scale), -2));
	border-radius: 7px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

*:not(pre) > code {
	font-size: 0.6em;
	padding: 0.25rem;
	/* I'd really love to just apply highlighting to the inline code block, but
	I haven't figured out how to do that yet. So we're just applying the
	background color from the chosen theme for now. */
	background-color: #191724;
}

pre:has(code) {
	padding: 1rem;
	margin: 1.3rem auto;
	width: 90ch;
	overflow: auto;
}