@layer reset, typography;

@layer typography {
	html {
		font-family:
			-apple-system,
			BlinkMacSystemFont,
			avenir next,
			avenir,
			segoe ui,
			helvetica neue,
			helvetica,
			Cantarell,
			Ubuntu,
			roboto,
			noto,
			arial,
			sans-serif;
	}

	@font-face {
		font-family: "Pliant";
		src:
			url("/fonts/pliant.ttf") format("truetype-variations"),
			url("/fonts/pliant.tty") format("truetype") tech("variations");
		font-weight: 100 900;
		font-stretch: 100% 125%;
		font-style: normal;
		font-display: swap;
	}


	@font-face {
		font-family: "Pliant";
		src:
			url("/fonts/pliant-italic.ttf") format("truetype-variations"),
			url("/fonts/pliant-italic.ttf") format("truetype") tech("variations");
		font-weight: 100 900;
		font-stretch: 100% 125%;
		font-style: italic;
		font-display: swap;
	}


	@font-face {
		font-family: "Fredoka";
		src:
			url("/fonts/fredoka.ttf") format("truetype-variations"),
			url("/fonts/fredoka.ttf") format("truetype") tech("variations");
		font-weight: 300 700;
		font-stretch: 75% 125%;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Cabin";
		src:
			url("/fonts/cabin.ttf") format("truetype-variations"),
			url("/fonts/cabin.ttf") format("truetype") tech("variations");
		font-weight: 300 700;
		font-stretch: 75% 125%;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Cabin";
		src:
			url("/fonts/cabin-italic.ttf") format("truetype-variations"),
			url("/fonts/cabin-italic.ttf") format("truetype") tech("variations");
		font-weight: 400 700;
		font-stretch: 75% 100%;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'Fraunces';
		font-display: swap;
		font-weight: 100 900;
		font-style: normal;
		src: url('/fonts/fraunces.woff2') format('woff2');
	}


	@font-face {
		font-family: 'Fraunces';
		font-display: swap;
		font-weight: 100 900;
		font-style: italic;
		src: url('/fonts/fraunces-italic.woff2') format('woff2');
	}

	@font-face {
		font-family: 'Soulcraft';
		font-display: swap;
		font-weight: 100 900;
		font-style: normal;
		src: url('/fonts/soulcraft.ttf') format('ttf');
		font-stretch: 0 100;
	}


	.soulcraft {
		font-variation-settings: "wdth" 0, "slnt" 0;
	}

	.cabin {
		font-family: "Cabin", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		/* 400- 700 */
		font-style: normal;
		font-variation-settings:
			"wdth" 100;
	}

	.fredoka {
		font-family: "Fredoka", sans-serif;
		font-optical-sizing: auto;
		font-weight: 300;
		/* 300 - 700 */
		font-style: normal;
		font-variation-settings:
			"wdth" 100;
	}



	.pliant {
		font-family: "Pliant", sans-serif;
		font-optical-sizing: auto;
		font-weight: 100;
		/* 100 - 900 */
		font-style: normal;
		font-variation-settings:
			"wdth" 100;
	}


	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 0.5rem;
		margin-bottom: 1rem;
		text-rendering: optimizeLegibility;
		font-weight: 600;
		line-height: 1.1;
		text-box-trim: trim-both;
	}

	h1 {
		line-height: 1.2;
		font-weight: 800;
	}

	h2 {
		font-size: 2.6rem;
		margin-top: 3rem;
	}

	h3 {
		font-size: 2rem;
		margin-top: 3rem;
	}

	h4 {
		font-size: 1.44rem;
	}

	h5 {
		font-size: 1.15rem;
	}

	h6 {
		font-size: 0.96rem;
	}

	article h1 {
		font-weight: 600;
		font-size: 2rem;
	}

	@media only screen and (max-width: 720px) {
		h1 {
			/* font-size: 2.5rem; */
		}

		h2 {
			font-size: 2.1rem;
		}

		h3 {
			font-size: 1.75rem;
		}

		h4 {
			font-size: 1.25rem;
		}
	}

	p {
		margin-top: 0;
	}

	ol,
	ul {
		/* padding-left: 0; */
		margin-top: 0;
	}

	ul ul,
	ul ol,
	ol ol,
	ol ul {
		font-size: 100%;
		/* margin: 1rem 0 1rem 3rem; */
	}

	/* Extra selector for specificity, see below */
	li>p:not(:last-child) {
		margin: 0;
		padding: 0;
	}

	pre,
	code {
		font-family:
			Menlo,
			Consolas,
			Monaco,
			Liberation Mono,
			Lucida Console,
			monospace;
	}

	code {
		font-size: 0.9em;
		margin-inline: 0px;
		padding: 3px 4px;
		border-radius: 5px;
	}

	pre {
		padding: 1rem 1.5rem;
		border-radius: 5px;
		overflow-x: auto;
	}

	blockquote {
		margin: 1.5em 0;
		padding: 0 1.6em 0 1.6em;
	}

	a {
		text-decoration: none;
	}

	figcaption {
		margin-top: 0.5rem;
		font-style: italic;
	}

	article h2 {
		margin-top: 2rem;
	}

	th,
	td {
		padding: 12px 15px;
		text-align: left;
	}

	th:first-child,
	td:first-child {
		padding-left: 0;
	}

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

	hr {
		margin-top: 3rem;
		margin-bottom: 3.5rem;
		border-width: 0px;
	}

	time {
		display: block;
	}

	[aria-label=Breadcrumbs] a {
		font-size: 0.8em;
	}

	[aria-label=Breadcrumbs]>a:not(:last-child):after {
		margin-inline: 0.2em;
		content: '/';
	}

	nav>a {
		text-wrap: nowrap;
	}

	header a[rel=home] {
		font-weight: 900;
		font-size: 2.8em;
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	header #tagline {
		font-weight: 600;
		font-size: 2.5em;
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	nav a:where([aria-current='page'], [aria-current='true']),
	nav a:where([aria-current='page'], [aria-current='true']):hover {
		text-decoration: none;
		cursor: default;
	}

	aside h2 {
		margin: 0 0 0.5em 0;
		font-size: 1.1em;
	}
}