@import url("/highlighting-kate.css") (prefers-color-scheme: light);
@import url("/highlighting-zenburn.css") (prefers-color-scheme: dark);

@font-face {
	font-family: LibertinusMath;
	src: url("/LibertinusMath-Regular.woff2") format("woff2");
}

math {
  font-family: "LibertinusMath", "Cambria Math", serif;
}

* { box-sizing: border-box; }

:root {
	font-family: sans-serif;
	line-height: 1.3;
	text-size-adjust: 100%;
	
	--bgcolor: #fffdfd;
	--fgcolor: black;
	--fgless: color-mix(in srgb, var(--fgcolor) 60%, var(--bgcolor));
	--bgaccent: color-mix(in srgb, var(--bgcolor) 95%, var(--fgcolor));
	
	background-color: var(--bgcolor);
	color: var(--fgcolor);
}

@supports(background-color: Canvas) {
	:root {
		--bgcolor: color-mix(in srgb, Canvas 99%, red);
  	--fgcolor: CanvasText;
	}
	
	:root.system {
		color-scheme: light dark;
	}
	
	:root.light {
		color-scheme: light;
	}
	
	:root.dark {
		color-scheme: dark;
	}
}

body {
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	
	/* for sticky footer */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}

nav {
	width: 100%;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	color: var(--fgless);
	background-color: var(--bgaccent);
	font-style: italic;
}

nav #notes-at-hsa {
	font-weight: bold;
	font-size: 1.5rem;
}
nav #notes-at-hsa span {
	color: color-mix(in oklab, var(--fgless) 50%, red);
}
nav #notes-at-hsa a {
	color: inherit;
	text-decoration: underline;
}
nav .flexgrow {
	flex-grow: 1;
}
nav select {
	font-style: inherit;
}

main {
	flex-grow: 1;
	width: min(96%,45rem);
}

main img, main iframe {
	max-width: 100%;
	margin-inline: auto;
}

main time.publish_date {
	display: block;
	margin-block: 0.5rem;
	font-style: italic;
	text-align: right;
}

/* foot */
footer {
	flex-grow: 0;
	width: 100%;
	background-color: var(--bgaccent);
	padding: 3rem 0;
	text-align: center;
	
	position: relative;
}

footer #view-source {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	opacity: 0.5;
}

/* rhythm */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

main > * + * {
	margin-block: 1.2em;
}

blockquote {
	padding: 0.25em 1.5em;
	position: relative;
	background-color: var(--bgaccent);
}

/* spikelines */
main h1::after, main h2::after, main h3::after, main h4::after, main h5::after, main h6::after {
	content: '';
	display: block;
	width: min(20em, 100%);
	height: 0.1em;
	background: var(--fgcolor);
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

blockquote::before {
	content: "";
	display: block;
	position: absolute;
	margin-left: calc(-1.5em - 0.3em + 0.1px);
	margin-top: -0.25em;
	width: 0.3em;
	height: 100%;
	background: var(--fgcolor);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

hr {
	border: none;	
	background-color: var(--fgcolor);
	margin-inline: auto;
	max-width: min(60%, 400px);
	height: 0.1rem;
	clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%); /* diamond */
}

/* tables */
table {
	border-collapse: collapse;
}
th, td {
	border: 1px solid var(--fgcolor);
	padding: 3px;
}

/* code */
pre, div.sourceCode {
	background-color: var(--bgaccent) !important;
}
pre {
	padding: 0.5em;
}
pre, pre code {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
pre, code, a[href] {
	word-wrap: break-word;
}

/* something is replacing tabs with spaces?? lol */
code.makefile .er {
	text-decoration: none;
}