@font-face {
	font-family: "Mazius Display";
	src: url('/assets/MaziusDisplay-Bold.otf') format('opentype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
  font-family: Aleo;
  src: url('/assets/Aleo-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Aleo;
  src: url('/assets/Aleo-LightItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: Aleo;
  src: url('/assets/Aleo-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: Aleo;
  src: url('/assets/Aleo-BoldItalic.otf') format('opentype');
  font-weight: bold;
  font-style: italic;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.1s;
}

:root {
	--background: #f9fff9;
	--foreground: #03280f;
	--accent: #5c7f26;
	--extreme: #fff;
	--max-width: 40rem;
}

html {
	font: 20px/1.4 Aleo, serif;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
  background: var(--background);
  color: var(--foreground);
  scrollbar-gutter: stable both-edges;
  padding: .5rem;
  margin: 0;
  font-variant-ligatures: common-ligatures;
	font-feature-settings: "liga", "clig";
}

@media (min-width: 600px) {
	body {
		padding: 1.5rem;
	}
}

body > * {
	inline-size: 100%;
  max-inline-size: var(--max-width);
  margin-inline: auto;
}

:is(h1, h2, h3, h4, h5, h6) {
	margin-block-end: 0;
	text-wrap: balance;
	font-family: "Mazius Display";
	font-weight: bold;
	line-height: 1.2;
	
	a {
		text-decoration: none;
	}
}

h1 {
	font-size: 3rem;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
	text-underline-offset: .25rem;
}

a:hover {
	opacity: .85;
}

a:active {
	transform: translateY(2px);
}

nav {
	margin: 0;
	max-inline-size: unset;
}

nav + * {
	margin-block-start: 0;
}

nav a {
	display: block;
	background: var(--accent);
	color: var(--background);
	padding: .25rem .5rem;
	border-radius: .125rem;
	font-size: .875rem;
	font-weight: bold;	
	line-height: 1rem;
	font-family: "Mazius Display";
	white-space: nowrap;
	text-indent: max(0px, calc((100vw - var(--max-width) - 4rem) / 2));
	text-decoration: none;
}

nav a:hover {
	text-decoration: none;
	opacity: .8;
}

img {
  block-size: auto;
  max-inline-size: 100%
}

blockquote {
	margin-block: 0 1rem;
	padding: .25rem 1rem;
	font-style: italic;
	background: var(--extreme);
}