@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 700;
	src: url("./fonts/IBMPlexMono-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 700;
	src: url("./fonts/IBMPlexMono-BoldItalic.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 200;
	src: url("./fonts/IBMPlexMono-ExtraLight.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 200;
	src: url("./fonts/IBMPlexMono-ExtraLightItalic.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 400;
	src: url("./fonts/IBMPlexMono-Italic.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 300;
	src: url("./fonts/IBMPlexMono-Light.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 300;
	src: url("./fonts/IBMPlexMono-LightItalic.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	src: url("./fonts/IBMPlexMono-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 500;
	src: url("./fonts/IBMPlexMono-MediumItalic.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	src: url("./fonts/IBMPlexMono-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	src: url("./fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 600;
	src: url("./fonts/IBMPlexMono-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 100;
	src: url("./fonts/IBMPlexMono-Thin.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 100;
	src: url("./fonts/IBMPlexMono-ThinItalic.ttf") format("truetype");
}

:root {
	--font-body: "IBM Plex Mono", monospace;
	--s0: 0px;
	--s1: 4px;
	--s2: 8px;
	--s3: 16px;
	--s4: 24px;
	--s5: 32px;
	--s6: 64px;
	--s7: 72px;
	--s8: 96px;
	--s9: 128px;
	--s10: 256px;
	--color-background: #ffffff;
	--color-chrome: #f0f0f0;
	--color-chrome-light: color-mix(
		in srgb,
		var(--color-chrome) 50%,
		var(--color-background)
	);
	--color-control: #cccccc;
	--color-text: #000000;
	color-scheme: light;
	--box-shadow: 3px 3px 0 var(--color-text);
}

h1 {
	font-size: 1.953rem;
	font-weight: 500;
}

h2 {
	font-size: 1.563rem;
	font-weight: 500;
}

h3 {
	font-size: 1.25rem;
	font-weight: 500;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
}

h5 {
	font-size: 0.8rem;
	font-weight: 600;
}

h6 {
	font-size: 0.64rem;
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: var(--s0);
	padding: 1.33em var(--s0) 0.33em;
}