/* My condolences to you for reading this nightmare. */

:root {
	--text: black;
	--main: #e2e3dd;
	--body: #9bb2bd;
	--bg-one: #e2e3dd;
	--bg-two: #25304c;
	--header: #000000;
	--inverted-text: white;
	--dim-text: #682a26;
	--mid-text: #787878;
	--bodyimg: url("./images/arches.png");
	--mainimg: url("./images/wavecut.png");
	--border: #e5c546;
}

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 2em 3em;
	line-height: 1em;
	border-top: 1px solid var(--border);
}
footer a {color: var(--inverted-text); text-decoration: underline;}

header {
	background: var(--header);
	/*color: var(--header);*/
	text-align: center;
	margin-top: 0;
	height: 0rem;
	padding: 0px;
	font-size: 1px;
	overflow: hidden;
}
header h1 {top: -2em; position: absolute; text-indent: -200%;}

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;}
.big-margin {padding-bottom: 2em;}
.fade {color: var(--mid-text);}

.overlap {padding: 4em 0.5em; text-align: center;}
.overlap p {max-width: 50ch; margin-left: auto; margin-right: auto; line-height: 2em;}
.long {padding: 45vh 0.5em; margin-bottom: 10em;}

p:not(.container p, footer p, .far-background, .background, .foreground, .overlap p, .fire p) {margin: 0; padding: 2em 0.5em;}
p {text-align: center;}

.container {display: flex;}
.left-half, .right-half {padding: 1em; flex-basis: 50%; min-height: 20em; border: 3px double var(--border);}
.left-half p:first-of-type, .right-half p:first-of-type {margin: 25% auto; text-align: center;}
.left-half, .light {background: var(--bg-one);}
.right-half, .dark {background: var(--bg-two); color: var(--inverted-text);}
.right-half {font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;}
.dark {background: var(--header);}
.white {background: white;}
.fire {background: #C6B3B3; border: 2px solid #C6B3B3; padding: 10em 0;}
.fire p {max-width: 40ch; margin: 1em auto; text-align: center; padding: 1em; border-radius: 10px;}
.gray, .darkgray, .darkergray {text-align: left; color: black; border: none;}
.gray {background: #565252; color: white;}
.darkgray {background: #444040; color: white;}
.darkergray {background: #3b3838; color: white;}
.thin {min-height: 2em !important;}
.thin p:first-of-type {margin: 0 auto !important;}
.nasty {font-family: "Cavity", Serif; font-size: 2em; color: #FFADAD; background: #330000; position: relative; top: -9em; margin: auto; max-width: 20ch; border-radius: 40%; text-transform: uppercase;}
.more-bottom-margin {margin-bottom: 10em;}

@media only screen and (max-width: 900px) {
	main {padding: 0.2em;}
	.container {flex-direction: column;}
	.mob-rev {flex-direction: column-reverse;}
	.hide-mobile {display: none;}
	.left-half, .right-half {border: none;}
}
@media only screen and (min-width: 900px) {
	.gray.left-half, .darkgray.left-half, .darkergray.left-half {border-right: 2px dashed #C6B3B3;}
}
/* 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/CavityRegular-nlP1.ttf') format('truetype')
}