/* ---------------------------------------- */
/* CSS reset */
/* ---------------------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	height: 100%;
}

/* Set core body defaults */
/* optimizeSpeed was the original author's choice, but my sites rarely have so much text content on a single page that performance would be affected. */
body {
	min-height: 100%;
	scroll-behavior: smooth;
	/* text-rendering: optimizeSpeed; */
	text-rendering: optimizeLegibility;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

/* Natural flow and rhythm in articles/sections by default */
article > * + *,
section > * + *,
.flow > * + * {
	margin-top: var(--flow);
	/* margin-top: calc(1em * var(--line-height)); */
}

/* Just to get a *little* bit of extra space in the situation where you have something like article > section > h2. */
article > section:not(:first-child) > *:first-child {
	margin-top: var(--flow);
}

/* Remove list styles and padding on ul, ol elements with a class attribute */
ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

/* Anchors get default styles */
a {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
	max-width: 100%;
	display: block;
}

svg {
	fill: currentColor;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-play-state: paused !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------- */
/* Variables and declarations */
/* ---------------------------------------- */

@font-face {
	font-family: 'Trees';
	src:
		url('fonts/trees.woff2') format('woff2'),
		url('fonts/trees.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
}

:root {
	--font-stack-serif: 'Quattrocento', 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L',
		'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L',
		Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook',
		'Century Schoolbook', 'Century Schoolbook L', Georgia, serif;
	--font-stack-glyph: Trees, Wingdings, Webdings, Symbol, monospace;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
	--font-size-smaller: 0.875em;

	--line-height: 1.6;
	--flow: 1em;

	--clr-theme-primary: #1f0066;
	--clr-theme-light: #c6c1ff;
	--clr-bg: #f3f1e9;
	--clr-me: #f88379;
	--clr-faint-1: rgba(0, 0, 0, 0.05);
	--clr-faint-2: rgba(0, 0, 0, 0.1);
	--clr-faint-3: rgba(0, 0, 0, 0.15);

	--clr-text-inverted: rgba(255, 251, 240, 0.95);
	--clr-text-primary: rgba(8, 6, 13, 0.9);
	--clr-text-secondary: rgba(8, 6, 13, 0.7);
	--clr-text-theme: var(--clr-theme-primary);

	--border: 2px solid var(--clr-text-primary);
	--shadow: 0 0 0.5rem var(--clr-faint-2);

	--body-padding: 2rem;
}

/* ---------------------------------------- */
/* Layout */
/* ---------------------------------------- */

html {
	background-color: var(--clr-bg);
}

@media print {
	body {
		color: #000;
		background-color: #fff;
	}
}

html,
body,
main {
	height: 100%;
}

/* ---------------------------------------- */
/* Typography */
/* ---------------------------------------- */

body {
	padding: var(--body-padding);
	font-size: 1rem;
	line-height: var(--line-height);
	font-family: var(--font-stack-serif);
	font-weight: var(--font-weight-normal);
	color: var(--clr-text-primary);
}

h1 {
	font-size: 2.1em;
	line-height: 1.4;
	font-weight: var(--font-weight-normal);
}

h2 {
	--flow: 2em;
	font-size: 1.5em;
	line-height: 1.4;
	font-weight: var(--font-weight-normal);
}

h3,
h4 {
	--flow: 2em;
	font-size: 1em;
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
}

table {
	border-collapse: collapse;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

tr {
	border-bottom: 1px solid var(--clr-faint-2);
}

th {
	vertical-align: bottom;
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-smaller);
	color: var(--clr-text-secondary);
}

td {
	vertical-align: baseline;
}

th,
td {
	padding: 6px 0.75rem 6px 0;
	text-align: left;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

blockquote {
	--flow: 2em;

	font-style: italic;
	padding: 0 calc(2 * var(--body-padding));
	margin-bottom: var(--flow);
}

strong,
.strong {
	font-weight: var(--font-weight-bold);
}

small,
.small {
	font-size: var(--font-size-smaller);
}

a {
	font-weight: var(--font-weight-bold);
	color: var(--clr-text-theme);
	fill: currentColor;
}

a.button {
	padding: 1px 0.75rem;
	display: inline-block;
	white-space: nowrap;
	background-color: var(--clr-theme-primary);
	color: var(--clr-text-inverted);
	font-weight: var(--font-weight-normal);
	text-decoration: none;
	box-shadow: var(--shadow);
}

.symbol,
.trees {
	font-family: var(--font-stack-glyph);
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ---------------------------------------- */
/* Helpers */
/* ---------------------------------------- */

.boxed {
	border: var(--border);
}

.inverted {
	--clr-bg: var(--clr-text-primary);
	background-color: var(--clr-text-primary);
	color: var(--clr-text-inverted);
	/* On dark backgrounds, antialised text looks better. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	--clr-text-theme: var(--clr-theme-light);
}

.centered {
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-self: center;
	text-align: center;
}