@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wdth,wght@0,50..75,600..700;1,50..75,600..700&display=swap');

:root {
	--fontHead: 'Anybody', 'Arial Narrow', 'Roboto Condensed', 'Inter Tight', 'Nimbus Sans Condensed', 'Arial Nova', 'Nimbus Sans', 'Helvetica Neue', Arial, Inter, Roboto, sans-serif;
	--fontMain: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* @link https://utopia.fyi/type/calculator?c=204,20,1.067,1000,20,1.333,4,1,&s=0.75,1.5|2|3|4|6,s-l&g=xs,l,l,12 */
:root {
	--step--1: clamp(0.9377rem, 1.2314rem + -0.4699cqi, 1.1715rem);
	--step-0: 1.25rem;
	--step-1: clamp(1.3338rem, 1.2485rem + 0.6683cqi, 1.6663rem);
	--step-2: clamp(1.4231rem, 1.2186rem + 1.604cqi, 2.2211rem);
	--step-3: clamp(1.5185rem, 1.1488rem + 2.8991cqi, 2.9607rem);
	--step-4: clamp(1.6202rem, 1.024rem + 4.6763cqi, 3.9467rem);
}

body {
	font-family: var(--fontMain);
	font-size: var(--step-0);
	background-color: var(--bg);
	color: var(--text);
	margin: auto;
}

html[data-theme="dark"] {
	--text: #fff4df;
	--acc-lc: #36A0FF;
	/* low contrast with background */
	--acc-hc: #fea24e;
	/* high contrast */
	--bg: #132e2c;
}

html[data-theme="light"] {
	--text: #132e2c;
	--acc-lc: #BC9D05;
	--acc-hc: #2f6d01;
	--bg: #fff4df;
}

p, a, small, figcaption, h1, h2, h3, h4, summary, blockquote, ul, ol, li {
	max-width: 55ch;
	background-color: var(--bg);
}

p.blog-excerpt {
	font-size: var(--step-1);
}

q {
	color: var(--acc-hc)
}

a:link {
	color: var(--acc-hc);
}

a:visited {
	color: var(--acc-lc);
}

a:hover,
a:focus {
	color: var(--text);
	background-color: var(--acc-hc);
}

a:active {
	color: var(--text);
}

a#home {
	font-family: var(--fontHead);
	font-size: var(--step-4);
	background-color: transparent;
	font-stretch: 50%;
	font-weight: 600;
	font-style: italic;
	color: var(--text);
}

header {
	display: flex;
	flex-flow: column;
	position: relative;
	border-bottom: solid var(--acc-hc);
}

#site-menu {
	background-color: var(--acc-lc);
	display: flex;
	flex-flow: row wrap;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 2;
	padding: 1ch;
	border-bottom: solid var(--acc-hc);
}

hr {
	border: none;
	border-top: solid var(--acc-hc);
	margin: 1ch 0;
}

button {
	background-color: transparent;
	border: solid var(--text);
	color: var(--text);
	font-size: var(--step-0);
	font-family: var(--fontMain);
}

button#theme-mode {
	border: none;
	text-decoration: underline;
}

::selection {
	color: var(--bg);
	background: var(--acc-hc);
}

h1,
h2,
h3 {
	font-family: var(--fontHead);
	font-stretch: 75%;
	margin: 0.5em 0 0.33em;
	color: var(--acc-lc);
}

h1 {
	font-size: var(--step-4);
	font-stretch: 75%;
}

h2 {
	font-size: var(--step-3);
	font-style: italic;
}

h3 {
	font-size: var(--step-2);
}

h4,
summary,
blockquote {
	font-size: var(--step-1);
}

div.faq-item {
	border-left: solid var(--acc-hc);
	margin: 2ch 0;
	padding-left: 1ch;
}

div.faq-question {
	padding-bottom: 1ch;
	font-size: var(--step-1);
	font-weight: 700;
}

.index {
	text-align: center;
	background-color: var(--bg);
}

small,
figcaption {
	font-size: var(--step--1);
}

main {
	padding: 1ch;
}