:root {
	--text: black;
	--main: #e2e3dd;
	--body: #675444;
	--header: #12100f;
	--inverted-text: #e2e3dd;
	--bodyimg: url("./images/snails.webp");
	--mainimg: url("./images/wavecut.png");
}

@media only screen and (prefers-color-scheme: dark) {
	:root {
	--text: #EDEDED;
	--main: #4b4744;
	--body: #24211e;
	--bodyimg: url("./images/snails.webp");
	--mainimg: url("./images/handmade-paper.png");
	}
	img {filter: brightness(.8) contrast(1.2);}
}

body {
	color: var(--text);
	background: var(--body);
	background-image: var(--bodyimg);
	padding: 0; margin: 0;
	font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', sans-serif;
	line-height: 1.6em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	align-items: stretch;
}

main {
	background: var(--main);
	max-width: 70ch;
	margin: 2em auto; padding: 1em;
	border-radius: 10px;
	background-image: var(--mainimg);
}

main p {
	max-width: 45ch;
	margin: 1em auto 5em auto;
}

main p:last-of-type {margin-bottom: 2em;}

main p:first-of-type:not(#one p) {margin-bottom: 2em;}
#one p:first-of-type {margin-top: 2em;}

main p::first-letter {
	font-size: 2em;
	font-family: "Cavity", sans-serif;
}

footer {
	background: var(--header);
	color: var(--inverted-text);
	padding: 0.2em 3em;
}
footer a {color: var(--inverted-text); text-decoration: underline;}

header {
	background: var(--header);
	color: var(--header);
	text-align: center;
	margin-top: 0;
	height: 2rem;
	padding: 1px;
	font-size: 1px;
}

h1, h2 {font-family: Dyslexie, OpenDyslexic, 'Cavity', sans-serif;}
h2 {font-size: 1.7em; border-bottom: 1px solid var(--body); padding-bottom: 0.4em;}

img {
	max-width: 100%;
}

.right {text-align: right;}
.center {text-align: center;}

@media only screen and (min-width: 700px) {
	main {padding: 1em 3em; min-width: 50ch;}
}

div {display: none;}
div#one {display: block;}
div:target {display: block;}
div:target:not(#one) ~ #one {display: none;}

/* atkinson-hyperlegible-regular - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 101.05%;
  src: local('Atkinson Hyperlegible'),
       url('./fonts/atkinson-hyperlegible-v10-latin-regular.ttf') format('truetype') /* Safari, Android, iOS */
}

/* atkinson-hyperlegible-italic - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  size-adjust: 101.05%;
  src: local('Atkinson Hyperlegible'),
       url('./fonts/atkinson-hyperlegible-v10-latin-italic.ttf') format('truetype') /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Cavity';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Cavity'),
       url('./fonts/cavity-font/CavityRegular-nlP1.ttf') format('truetype')
}