:root {
	--text: black;
	--main: #e2e3dd;
	--body: #9bb2bd;
	--header: #2a3943;
	--inverted-text: white;
	--bodyimg: url("./images/arches.png");
	--mainimg: url("./images/wavecut.png");
	--tape: rgba(255,255,255,0.3);
	--fademask: linear-gradient(to top,
      rgba(0,0,0, 0) 0, rgba(0,0,0, 1) 70%,
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 110% repeat-x;
}

@media only screen and (prefers-color-scheme: dark) {
	:root {
	--header: #0f1112;
	--text: #EDEDED;
	--main: #44494B;
	--body: #1e2224;
	--tape: rgba(255,255,255,0.2);
	--bodyimg: url("./images/wavecut.png");
	--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;
}

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;}

section {
	max-width: 55ch;
	margin: 5em auto 10em auto;	padding: 3em 4em 2em 4em;
	background: var(--main);
	box-shadow: 0.2em 0.1em 0.3em 0.1em rgba(0,0,20,0.2);
	border-radius: 5px;
	font-weight: 300;
	font-size: 0.95em;
	border: 1px solid var(--body);
	background-image: var(--mainimg);
}

section:before {
	content: "";
	width: 5em; height: 2em;
	display: block;
	margin: -4em auto 1em auto;
	background: var(--tape);
	border-right: 1px dotted var(--body);
	border-left: 1px dotted var(--body);
	transform: rotate(3deg);
}

#cafe:before, #sun:before {
	transform: rotate(-5deg);
	margin-top: -4.3em;
}
#sea:before {margin-left: 40%;}

img {
	max-width: 100%;
	-webkit-mask: var(--fademask);
	mask: var(--fademask);
}

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

@media only screen and (min-width: 700px) {
#cafe, #sea {margin-left: 4%; transform: rotate(-2deg);}
#sun {margin-right: 4%; transform: rotate(1deg);}
}

@media only screen and (max-width: 900px) {
	section {padding: 3em 1em; margin-bottom: 2em; margin-top: 2em;}
	main {padding: 0.2em;}
	#cafe, #sea, #sun {margin: 8em 0;}
}

/* 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')
}