@import url("./reset.css");

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("./font/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
}
@font-face {
	font-family: 'IBM Plex Sans Var';
	font-style: normal;
	font-weight: 100 700;
	src: url("./font/IBM Plex Sans Var-Roman.woff2") format("woff2");
}
@font-face {
	font-family: 'IBM Plex Serif Var';
	font-style: normal;
	font-weight: 100 700;
	src: url("./font/IBM Plex Serif Var-Roman-Latin1.woff2") format("woff2");
}

:root {
	--primary: #d42;
	--bg: #111215;
	--mg: #666;
	--fg: #ddd;

	--font-display: "IBM Plex Sans Var", sans-serif;
	--font-text: "IBM Plex Serif Var", "Comic Sans MS";
	--font-data: "IBM Plex Mono", "Courier New", "Lucida Console", "Monaco", monospace;
}

html {
	box-shadow: inset 0 0 10vmax color-mix(in oklab, var(--primary) 4%, transparent 100%);
}

body {
	color: var(--fg);
	margin: 0 auto !important;
	padding: 0 1rch;
	max-width: 102rch;
	letter-spacing: 0.35pt;
	background-color: var(--bg);
	min-height: 100vh;
}
body > * {
	display: flow-root;
}
main {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--primary) !important;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.5;
	margin-top: 1rem;
	text-shadow: 0 0 2.5pt var(--primary);
	text-transform: lowercase;
}
h1 { font-size: 24pt; }
h2 { font-size: 18pt;}

time, .data {
	font-family: var(--font-data);
	color: var(--mg);
}

ul,ol {
	padding-left: 3ch;
}
ul > li {
	list-style-type: "• ";
}

a {
	color: inherit;
	font-family: inherit;
	text-decoration-color: var(--primary);
}
a:hover {
	text-shadow: 0px 0px 5pt var(--primary);
}

hr {
	display: block;
	width: 10%;
	border: 1pt solid var(--primary);
	box-shadow: 0px 0px 2pt var(--primary);
	margin: 2rch 0;
}
p {
	margin-bottom: 1.5rch;
}


div.row {
	display: flex;
	flex-direction: row;
	gap: 1ch;
	flex-wrap: wrap;
}

subtitle {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 200;
	font-size: 10pt;
	color: var(--mg);
}

.glow {
	box-shadow: 0px 0px 5pt var(--mg);
}

img {
	max-width: 100%;
}