@import url('https://fonts.googleapis.com/css2?family=Fascinate&family=Fascinate+Inline&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Momo+Trust+Display&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Rammetto+One&display=swap');

:root {
	--fontp: "Libre Franklin", sans-serif;
	--fontheader: "Fascinate Inline", sans-serif;
	--fontquotemark: "PT Sans", sans-serif;

	--fontsizeh1: 10rem;
	/* --letterspacingh1: .3em; */

	--fontsizeh2: 4rem;
	--lineheighth2: 1em;

	--fontsizequotemark: 40rem;

	--fontsizeblockquote: 3rem;
	--lineheightblockquote: .9em;

	--fontsizep: 1.3rem;
	--lineheightp: 1.7em;

	--fontsizefooter: 2.4rem;

	--inline: 40vw;
	/* --quotemax: 42ch; */
	--paddingmargin: 3rem;
	--paddinginline: 6rem;
	--marginblock: 6rem;
	--gap: 3rem;
	
	--backgroundcolor: 255, 255, 255;
	--shadowcolor: 0, 0, 0;
	--accentcolor: #c8e00c;
	--bordercolor: lightgray;
	--writtenbycolor: gray;

	scroll-behavior: smooth;

	--incrementx: .8em;
	--incrementy: .8em;
	--incrementxhero: .8em;
	--incrementquote: .4em;
	--shadow: .14em rgba(var(--shadowcolor), .1);
	--shadowquote: .08em rgba(var(--shadowcolor), .2);

}

body {
	font-family: var(--fontp);
	background-color: rgba(var(--backgroundcolor));
}









/* ------------------Hero-------------------- */

#hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	text-align: center;
	overflow: hidden;
}

#hero ul {
	display: flex;
	flex-direction: column;
	justify-content: center;	
	gap: 0;
	text-align: center;
	inline-size: fit-content;
	align-items: center;
	margin: auto;
	font-size: var(--fontsizep);
}

h1 {
	font-family: var(--fontheader);
	/* letter-spacing: var(--letterspacingh1); */
	text-align: center;
	font-size: var(--fontsizeh1);
	cursor: pointer; /* Affordance to indicate to users it can be clicked */
	color: var(--accentcolor);
}

#hero ul li:nth-child(1) {
	order: 2;
}

#hero ul li:nth-child(2) {
	color: var(--writtenbycolor);
	align-self: end;
	order: 1;
}

#hero ul li:nth-child(3) {
	align-self: start;
	order: 3;
	color: rgba(var(--shadowcolor));
}








/* ------------------Main-------------------- */

main {
	font-size: var(--fontsizep);
}

main p, 
aside {
	padding-inline-start: var(--inline);
	padding-inline-end: var(--paddinginline);
}

.blockquote-section {
	padding-inline-start: var(--paddinginline);
	padding-inline-end: var(--inline);
}
 .blockquote-section > * {
	padding-inline: 0;
 }
/* Why can't I just use margin-block for this or is grid/flex preferred if it's just aligning paragraphs in one column? */

article >  header {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: rgba(var(--backgroundcolor));
	padding-block: calc(var(--paddingmargin) / 2);
	border-bottom-style: solid;
	border-bottom-width: .001rem;
	border-bottom-color: var(--bordercolor);
}

h2 {
	font-family: var(--fontheader);
	text-align: start;
	font-size: var(--fontsizeh2);
	text-wrap: balance;
	line-height: var(--lineheighth2);
	color: var(--accentcolor);
	padding-inline-start: var(--inline);
}

#adventures header h2 .mq-break {
	display: block;
	white-space: nowrap;
}

p {
	font-family: var(--fontp);
	margin-block: var(--paddingmargin);
	line-height: var(--lineheightp);
	color: rgba(var(--shadowcolor));
	text-align: left;
	font-size: var(--fontsizep);
	hyphens: none;
}

em {
	font-style: italic; 
}

.nobr {
	white-space: nowrap;
}

.links {
	display: inline-block;
	font-family: var(--fontheader);
	color: var(--accentcolor);
	text-shadow: 0 .8em .2em rgba(var(--shadowcolor), .3);
	transition: transform 0.2s ease;
}

.links:hover {
	transform: scale(1.3);
}











/* ------------------Blockquotes-------------------- */

.blockquote-section {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin-block: var(--marginblock);
	/* background-color: red;  DELETE THIS LATER JUST USING FOR FRAMING REFERENCE */
}

.blockquote-section blockquote {
	color: rgba(var(--shadowcolor));
	font-size: var(--fontsizeblockquote);
	line-height: var(--lineheightquote);
	text-align: start;
	font-weight: 600;
}

.quote-left, 
.quote-right {
	font-family: var(--fontquotemark);
	color: var(--accentcolor);
	font-size: var(--fontsizequotemark);
	line-height: 1;
	/* background-color: blue; DELETE THIS LATER JUST USING FOR FRAMING REFERENCE */
}

.quote-left {
	text-align: end;
	align-self: flex-end;
}

.quote-right {
	text-align: start;
	align-self: flex-start;
}

.quote-left::before, 
.quote-left::after,
.quote-right::before, 
.quote-right::after {
	content: '';
	display: block;
	visibility: hidden;
}

.quote-left::before {
	margin-block-start: -.1em;
}

.quote-left::after {
	margin-block-end: -.7em;
}

.quote-right::before {
	margin-block-start: -.16em;
}

.quote-right::after {
	margin-block-end: -.63em;
}






/* ------------------Footnotes-------------------- */

aside {
	color: rgba(var(--shadowcolor));
	font-size: calc(var(--fontsizep) * .9);
	padding-block-end: calc(var(--marginblock) * 2);
	scroll-margin-top: calc((var(--paddingmargin) / 2) + var(--fontsizeh2) + var(--paddingmargin)); /* height of header + p margin */
}

#aside1 {
	scroll-margin-top: calc((var(--paddingmargin) / 2) + var(--fontsizeh2) + (calc(var(--paddingmargin)) * 2.5)); 
}

sup {
	color: var(--accentcolor);
	font-size: calc(var(--fontsizep) / 2);
	vertical-align: top;
	scroll-margin-top: calc((var(--paddingmargin) / 2) + var(--fontsizeh2) + (calc(var(--paddingmargin)) * 6)); 

}

ol {
	list-style-type: decimal;
	font-size: calc(var(--fontsizep) * .8);
	list-style-position: inside;
	line-height: var(--lineheightp);
}

ol li::marker {
	color: var(--accentcolor);
}

.back-arrow {
	color: var(--accentcolor);
}





/* ------------------Footer-------------------- */

footer {
	font-family: var(--fontheader);
	color: rgba(var(--shadowcolor));
	text-align: center;
	margin-block: var(--marginblock);
	font-size: var(--fontsizefooter);
}

footer ul {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	text-wrap: balance;
	text-align: center;
}

footer ul li:nth-child(3) {
	color: var(--accentcolor);
}

/* footer li:hover {
	color: var(--accentcolor);
} */






/* ------------------Shadows-------------------- */

.left-shadow, 
.right-shadow, 
.top-shadow, 
.bottom-shadow {
	color: rgba(var(--shadowcolor));
}

header .left-shadow {
	text-shadow:
		/* left */
		calc(-1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
		calc(-2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
		calc(-3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
		calc(-4 * var(--incrementx)) 0 var(--shadow),
		calc(-5 * var(--incrementx)) 0 var(--shadow),
		calc(-6 * var(--incrementx)) 0 var(--shadow),
		calc(-7 * var(--incrementx)) 0 var(--shadow),
		calc(-8 * var(--incrementx)) 0 var(--shadow),
		calc(-9 * var(--incrementx)) 0 var(--shadow),
		calc(-10 * var(--incrementx)) 0 var(--shadow),
		calc(-11 * var(--incrementx)) 0 var(--shadow),
		calc(-12 * var(--incrementx)) 0 var(--shadow),
		calc(-13 * var(--incrementx)) 0 var(--shadow),
		calc(-14 * var(--incrementx)) 0 var(--shadow);

}

header .right-shadow {
	text-shadow:
		/* right */
		calc(1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
		calc(2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
		calc(3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
		calc(4 * var(--incrementx)) 0 var(--shadow),
		calc(5 * var(--incrementx)) 0 var(--shadow),
		calc(6 * var(--incrementx)) 0 var(--shadow),
		calc(7 * var(--incrementx)) 0 var(--shadow),
		calc(8 * var(--incrementx)) 0 var(--shadow),
		calc(9 * var(--incrementx)) 0 var(--shadow),
		calc(10 * var(--incrementx)) 0 var(--shadow),
		calc(11 * var(--incrementx)) 0 var(--shadow),
		calc(12 * var(--incrementx)) 0 var(--shadow),
		calc(13 * var(--incrementx)) 0 var(--shadow),
		calc(14 * var(--incrementx)) 0 var(--shadow);
}

.quote-left {
	text-shadow:
		calc(-1 * var(--incrementquote)) 0 .05em rgba(var(--shadowcolor), .5),
		calc(-2 * var(--incrementquote)) 0 .06em rgba(var(--shadowcolor), .4),
		calc(-3 * var(--incrementquote)) 0 .07em rgba(var(--shadowcolor), .3),
		calc(-4 * var(--incrementquote)) 0 var(--shadowquote),
		calc(-5 * var(--incrementquote)) 0 var(--shadowquote);
		/* calc(-6 * var(--incrementquote)) 0 var(--shadowquote),
		calc(-7 * var(--incrementquote)) 0 var(--shadowquote),
		calc(-8 * var(--incrementquote)) 0 var(--shadowquote),
		calc(-9 * var(--incrementquote)) 0 var(--shadowquote),
		calc(-10 * var(--incrementquote)) 0 var(--shadowquote); */
}

.quote-right {
	text-shadow:
		calc(1 * var(--incrementquote)) 0 .05em rgba(var(--shadowcolor), .5),
		calc(2 * var(--incrementquote)) 0 .06em rgba(var(--shadowcolor), .4),
		calc(3 * var(--incrementquote)) 0 .07em rgba(var(--shadowcolor), .3),
		calc(4 * var(--incrementquote)) 0 var(--shadowquote),
		calc(5 * var(--incrementquote)) 0 var(--shadowquote),
		calc(6 * var(--incrementquote)) 0 var(--shadowquote),
		calc(7 * var(--incrementquote)) 0 var(--shadowquote);		
		/* calc(6 * var(--incrementquote)) 0 var(--shadowquote),
		calc(7 * var(--incrementquote)) 0 var(--shadowquote),
		calc(8 * var(--incrementquote)) 0 var(--shadowquote),
		calc(9 * var(--incrementquote)) 0 var(--shadowquote),
		calc(10 * var(--incrementquote)) 0 var(--shadowquote); */
}

footer .left-shadow {
	text-shadow:
		/* left */
		calc(-1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
		calc(-2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
		calc(-3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
		calc(-4 * var(--incrementx)) 0 var(--shadow),
		calc(-5 * var(--incrementx)) 0 var(--shadow),
		calc(-6 * var(--incrementx)) 0 var(--shadow),
		calc(-7 * var(--incrementx)) 0 var(--shadow);
}

footer .right-shadow {
	text-shadow:
		/* right */
		calc(1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
		calc(2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
		calc(3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
		calc(4 * var(--incrementx)) 0 var(--shadow),
		calc(5 * var(--incrementx)) 0 var(--shadow),
		calc(6 * var(--incrementx)) 0 var(--shadow),
		calc(7 * var(--incrementx)) 0 var(--shadow);
}




/* --------------------- Animation ----------------------*/

#hero .left-shadow {
	animation-name: shadow-animation-left;
	animation-direction: normal;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

			@keyframes shadow-animation-left {
			0% {
				text-shadow: 
					0 0 .1em rgba(var(--shadowcolor), .5);
			}
			50% {
				text-shadow: 
					calc(-1 * var(--incrementxhero)) 0 .1em rgba(var(--shadowcolor), .5),
					calc(-2 * var(--incrementxhero)) 0 .12em rgba(var(--shadowcolor), .4),
					calc(-3 * var(--incrementxhero)) 0 .13em rgba(var(--shadowcolor), .3),
					calc(-4 * var(--incrementxhero)) 0 var(--shadow),
					calc(-5 * var(--incrementxhero)) 0 var(--shadow),
					calc(-6 * var(--incrementxhero)) 0 var(--shadow),
					calc(-7 * var(--incrementxhero)) 0 var(--shadow),
					calc(-8 * var(--incrementxhero)) 0 var(--shadow),
					calc(-9 * var(--incrementxhero)) 0 var(--shadow),
					calc(-10 * var(--incrementxhero)) 0 var(--shadow);
				}
			100% {
				text-shadow:
					0 0 .1em rgba(var(--shadowcolor), .5);
				}
			}

#hero .right-shadow {
	animation-name: shadow-animation-right;
	animation-direction: normal;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

			@keyframes shadow-animation-right {
			0% {
				text-shadow: 
					0 0 .1em rgba(var(--shadowcolor), .5);
			}
			50% {
				text-shadow: 
					calc(1 * var(--incrementxhero)) 0 .1em rgba(var(--shadowcolor), .5),
					calc(2 * var(--incrementxhero)) 0 .12em rgba(var(--shadowcolor), .4),
					calc(3 * var(--incrementxhero)) 0 .13em rgba(var(--shadowcolor), .3),
					calc(4 * var(--incrementxhero)) 0 var(--shadow),
					calc(5 * var(--incrementxhero)) 0 var(--shadow),
					calc(6 * var(--incrementxhero)) 0 var(--shadow),
					calc(7 * var(--incrementxhero)) 0 var(--shadow),
					calc(8 * var(--incrementxhero)) 0 var(--shadow),
					calc(9 * var(--incrementxhero)) 0 var(--shadow),
					calc(10 * var(--incrementxhero)) 0 var(--shadow);
				}
			100% {
				text-shadow:
					0 0 .1em rgba(var(--shadowcolor), .5);
				}
			}

#hero .top-shadow {
	animation-name: shadow-animation-top;
	animation-direction: normal;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

			@keyframes shadow-animation-top {
				0% {
					text-shadow: 
						0 calc(-1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
				}
				50% {
					text-shadow: 
						0 calc(-1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
						0 calc(-2 * var(--incrementy)) .12em rgba(var(--shadowcolor), .4),
						0 calc(-3 * var(--incrementy)) .13em rgba(var(--shadowcolor), .3),
						0 calc(-4 * var(--incrementy)) var(--shadow),
						0 calc(-5 * var(--incrementy)) var(--shadow),
						0 calc(-6 * var(--incrementy)) var(--shadow),
						0 calc(-7 * var(--incrementy)) var(--shadow),
						0 calc(-8 * var(--incrementy)) var(--shadow),
						0 calc(-9 * var(--incrementy)) var(--shadow),
						0 calc(-10 * var(--incrementy)) var(--shadow);
				}
				100% {
					text-shadow:
						0 calc(-1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
				}
			}

#hero .bottom-shadow {
	animation-name: shadow-animation-bottom;
	animation-direction: normal;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

			@keyframes shadow-animation-bottom {
			0% {
				text-shadow: 
					0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
				}
			50% {
				text-shadow: 
					0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
					0 calc(2 * var(--incrementy)) .12em rgba(var(--shadowcolor), .4),
					0 calc(3 * var(--incrementy)) .13em rgba(var(--shadowcolor), .3),
					0 calc(4 * var(--incrementy)) var(--shadow),
					0 calc(5 * var(--incrementy)) var(--shadow),
					0 calc(6 * var(--incrementy)) var(--shadow),
					0 calc(7 * var(--incrementy)) var(--shadow),
					0 calc(8 * var(--incrementy)) var(--shadow),
					0 calc(9 * var(--incrementy)) var(--shadow),
					0 calc(10 * var(--incrementy)) var(--shadow);
				}
			100% {
				text-shadow:
					0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
				}
			}

#hero .left-shadow,
#hero .right-shadow,
#hero .top-shadow,
#hero .bottom-shadow {
	animation-play-state: running;
}

#hero #animation-button:checked + label .left-shadow,
#hero #animation-button:checked + label .right-shadow,
#hero #animation-button:checked + label .top-shadow,
#hero #animation-button:checked + label .bottom-shadow {
	animation-play-state: paused;
}

#hero #animation-button:checked + label h1 { 
	/* opacity: .5; */
	color: rgba(var(--shadowcolor)); 
	/* font-family: var(--fontheader2);
	font-weight: 800; */
}





/* ---------------- Media Queries -----------------*/

/* -----------------Shrink font-sizes, paddinginline, center h2----------------- */

@media (width <= 280px) {
	:root {
		--fontsizep: .8rem;
		--fontsizeh1: 2.2rem;
		--fontsizeh2: 1.2rem;
		--fontsizequotemark: 10rem;
		--gap: 9rem;
		--fontsizeblockquote: 1rem;
		--lineheightp: 1.6em;
		--lineheightquote: 1.7em;
		--paddinginline: .3rem;
		--marginblock: 4rem;
		--inline: .5rem;
	}

	h2 {
		text-align: center;
	}

	footer {
		--fontsizefooter: 1rem;
	}
}

@media (280px <= width <= 430px) {
	:root {
		--fontsizep: 1rem;
		--fontsizeh1: 3rem;
		--fontsizeh2: 2.1rem;
		--fontsizequotemark: 20rem;
		--gap: 5rem;
		--fontsizeblockquote: 1.6rem;
		--lineheightp: 1.6em;
		--lineheightquote: 1.3em;
		--paddinginline: .8rem;
		--marginblock: 4rem;
		--inline: .8rem;
	}

	h2 {
		text-align: center;
	}

	footer {
		--fontsizefooter: 1.5rem;
	}
}

@media (431px <= width <= 600px) {
	:root {
		--fontsizep: 1rem;
		--fontsizeh1: 4.3rem;
		--fontsizeh2: 2.3rem;
		--fontsizequotemark: 25rem;
		--gap: 6rem;
		--fontsizeblockquote: 1.5rem;
		--lineheightp: 1.7em;
		--lineheightquote: 1.3em;
		--paddinginline: 1rem;
		--marginblock: 4rem;
		--inline: 20vw;
	}

	footer {
		--fontsizefooter: 1.4rem;
	}
}

@media (601px <= width <= 950px) {
	:root {
		--fontsizep: 1.2rem;
		--fontsizeh1: 6rem;
		--fontsizeh2: 3rem;
		--fontsizequotemark: 30rem;
		--fontsizeblockquote: 2rem;
		--gap: 5rem;
		--lineheightquote: 1.3em;
		--paddinginline: 1.5rem;
		--marginblock: 5rem;
		--inline: 20vw;
	}
	
	aside {
		font-size: var(--fontsizep);
		line-height: calc(var(--lineheightp) * .7);
	}

	footer {
		--fontsizefooter: 2rem;
	}
}

@media (951px <= width <= 1200px) {
	:root {
		--inline: 30vw;
	}
}


/* -----------------#hero byline gap----------------- */

@media (width <= 950px) {
	#hero ul {
		gap: calc(var(--gap) / 2);
	}
}

/* -----------------Move #hero left/right animation to top/bottom----------------- */

@media (width <= 1550px) {
	@keyframes shadow-animation-left {
		0% {
			text-shadow: 
				0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
			}
		50% {
			text-shadow: 
				0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
				0 calc(2 * var(--incrementy)) .12em rgba(var(--shadowcolor), .4),
				0 calc(3 * var(--incrementy)) .13em rgba(var(--shadowcolor), .3),
				0 calc(4 * var(--incrementy)) var(--shadow),
				0 calc(5 * var(--incrementy)) var(--shadow),
				0 calc(6 * var(--incrementy)) var(--shadow),
				0 calc(7 * var(--incrementy)) var(--shadow),
				0 calc(8 * var(--incrementy)) var(--shadow),
				0 calc(9 * var(--incrementy)) var(--shadow),
				0 calc(10 * var(--incrementy)) var(--shadow);
			}
		100% {
			text-shadow:
				0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
			}
	}

	@keyframes shadow-animation-right {
		0% {
			text-shadow: 
				0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
			}
		50% {
			text-shadow: 
				0 calc(-1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
				0 calc(-2 * var(--incrementy)) .12em rgba(var(--shadowcolor), .4),
				0 calc(-3 * var(--incrementy)) .13em rgba(var(--shadowcolor), .3),
				0 calc(-4 * var(--incrementy)) var(--shadow),
				0 calc(-5 * var(--incrementy)) var(--shadow),
				0 calc(-6 * var(--incrementy)) var(--shadow),
				0 calc(-7 * var(--incrementy)) var(--shadow),
				0 calc(-8 * var(--incrementy)) var(--shadow),
				0 calc(-9 * var(--incrementy)) var(--shadow),
				0 calc(-10 * var(--incrementy)) var(--shadow);
			}
		100% {
			text-shadow:
				0 calc(-1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
			}
	}	
}





/* -----------------Change footer to column----------------- */

@media (width <= 1500px) {
	footer ul {
		block-size: 33vh;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	footer ul .left-shadow {
		text-shadow:
		/* left */
			calc(-1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
			calc(-2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
			calc(-3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
			calc(-4 * var(--incrementx)) 0 var(--shadow),
			calc(-5 * var(--incrementx)) 0 var(--shadow),
			calc(-6 * var(--incrementx)) 0 var(--shadow),
			calc(-7 * var(--incrementx)) 0 var(--shadow),
			calc(-8 * var(--incrementx)) 0 var(--shadow),
			calc(-9 * var(--incrementx)) 0 var(--shadow),
			calc(-10 * var(--incrementx)) 0 var(--shadow),
			calc(-11 * var(--incrementx)) 0 var(--shadow),
			calc(-12 * var(--incrementx)) 0 var(--shadow),
			calc(-13 * var(--incrementx)) 0 var(--shadow),
			calc(-14 * var(--incrementx)) 0 var(--shadow),
			calc(-15 * var(--incrementx)) 0 var(--shadow),
			calc(-16 * var(--incrementx)) 0 var(--shadow),
			calc(-17 * var(--incrementx)) 0 var(--shadow),
			calc(-18 * var(--incrementx)) 0 var(--shadow),
			calc(-19 * var(--incrementx)) 0 var(--shadow),
			calc(-20 * var(--incrementx)) 0 var(--shadow);
	}

	footer ul .right-shadow {
		text-shadow:
			/* right */
			calc(1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
			calc(2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
			calc(3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
			calc(4 * var(--incrementx)) 0 var(--shadow),
			calc(5 * var(--incrementx)) 0 var(--shadow),
			calc(6 * var(--incrementx)) 0 var(--shadow),
			calc(7 * var(--incrementx)) 0 var(--shadow),
			calc(8 * var(--incrementx)) 0 var(--shadow),
			calc(9 * var(--incrementx)) 0 var(--shadow),
			calc(10 * var(--incrementx)) 0 var(--shadow),
			calc(11 * var(--incrementx)) 0 var(--shadow),
			calc(12 * var(--incrementx)) 0 var(--shadow),
			calc(13 * var(--incrementx)) 0 var(--shadow),
			calc(14 * var(--incrementx)) 0 var(--shadow),
			calc(15 * var(--incrementx)) 0 var(--shadow),
			calc(16 * var(--incrementx)) 0 var(--shadow),
			calc(17 * var(--incrementx)) 0 var(--shadow),
			calc(18 * var(--incrementx)) 0 var(--shadow),
			calc(19 * var(--incrementx)) 0 var(--shadow),
			calc(20 * var(--incrementx)) 0 var(--shadow);
}
}





/* -----------------Move quotemarks in----------------- */

/* @media (width <= 1650px) {
	.quote-left {
		text-align: end;
	}

	.quote-right {
		text-align: start;
	}	
}
 */




/* -----------------Print mode----------------- */

@media print {
	:root {
		--backgroundcolor: 255, 255, 255;
		--shadowcolor: 0, 0, 0;
		--fontsizep: 1rem; 
		--fontsizeh1: 4.2rem;
		--gap: .5rem;
		/* --accentcolor: #C2DB00; */
	}

	main {
		padding-inline: var(--paddinginline);
	}

	#hero .left-shadow, 
	#hero .right-shadow,
	#hero .top-shadow,
	#hero .bottom-shadow { 
		animation: none;
		/* animation-fill-mode: 100%; */
	}

				.left-shadow {
					text-shadow:
						calc(-1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
						calc(-2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
						calc(-3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
						calc(-4 * var(--incrementx)) 0 var(--shadow),
						calc(-5 * var(--incrementx)) 0 var(--shadow),
						calc(-6 * var(--incrementx)) 0 var(--shadow),
						calc(-7 * var(--incrementx)) 0 var(--shadow),
						calc(-8 * var(--incrementx)) 0 var(--shadow),
						calc(-9 * var(--incrementx)) 0 var(--shadow),
						calc(-10 * var(--incrementx)) 0 var(--shadow);
				}

				.right-shadow {
					text-shadow:
						calc(1 * var(--incrementx)) 0 .1em rgba(var(--shadowcolor), .5),
						calc(2 * var(--incrementx)) 0 .12em rgba(var(--shadowcolor), .4),
						calc(3 * var(--incrementx)) 0 .13em rgba(var(--shadowcolor), .3),
						calc(4 * var(--incrementx)) 0 var(--shadow),
						calc(5 * var(--incrementx)) 0 var(--shadow),
						calc(6 * var(--incrementx)) 0 var(--shadow),
						calc(7 * var(--incrementx)) 0 var(--shadow),
						calc(8 * var(--incrementx)) 0 var(--shadow),
						calc(9 * var(--incrementx)) 0 var(--shadow),
						calc(10 * var(--incrementx)) 0 var(--shadow);
				}

				.top-shadow {
						text-shadow:
							0 calc(-1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
							0 calc(-2 * var(--incrementy)) .12em rgba(var(--shadowcolor), .4),
							0 calc(-3 * var(--incrementy)) .13em rgba(var(--shadowcolor), .3),
							0 calc(-4 * var(--incrementy)) var(--shadow),
							0 calc(-5 * var(--incrementy)) var(--shadow),
							0 calc(-6 * var(--incrementy)) var(--shadow),
							0 calc(-7 * var(--incrementy)) var(--shadow),
							0 calc(-8 * var(--incrementy)) var(--shadow),
							0 calc(-9 * var(--incrementy)) var(--shadow),
							0 calc(-10 * var(--incrementy)) var(--shadow);
				}

				.bottom-shadow {
						text-shadow:
							0 calc(1 * var(--incrementy)) .1em rgba(var(--shadowcolor), .5),
							0 calc(2 * var(--incrementy)) .12em rgba(var(--shadowcolor), .4),
							0 calc(3 * var(--incrementy)) .13em rgba(var(--shadowcolor), .3),
							0 calc(4 * var(--incrementy)) var(--shadow),
							0 calc(5 * var(--incrementy)) var(--shadow),
							0 calc(6 * var(--incrementy)) var(--shadow),
							0 calc(7 * var(--incrementy)) var(--shadow),
							0 calc(8 * var(--incrementy)) var(--shadow),
							0 calc(9 * var(--incrementy)) var(--shadow),
							0 calc(10 * var(--incrementy)) var(--shadow);
				}

				.quote-left {
					text-shadow:
						calc(-1 * var(--incrementquote)) 0 .05em rgba(var(--shadowcolor), .5),
						calc(-2 * var(--incrementquote)) 0 .06em rgba(var(--shadowcolor), .4),
						calc(-3 * var(--incrementquote)) 0 .07em rgba(var(--shadowcolor), .3),
						calc(-4 * var(--incrementquote)) 0 var(--shadowquote),
						calc(-5 * var(--incrementquote)) 0 var(--shadowquote);
				}

				.quote-right {
					text-shadow:
						calc(1 * var(--incrementquote)) 0 .05em rgba(var(--shadowcolor), .5),
						calc(2 * var(--incrementquote)) 0 .06em rgba(var(--shadowcolor), .4),
						calc(3 * var(--incrementquote)) 0 .07em rgba(var(--shadowcolor), .3),
						calc(4 * var(--incrementquote)) 0 var(--shadowquote),
						calc(5 * var(--incrementquote)) 0 var(--shadowquote);
				}


	/* #time-for-change > section > p:nth-child(3), */
	#adventures > section > .blockquote-section, 
	#neomania > section > p:last-child, 
	#time-for-change > section > .blockquote-section { 
		break-before: page;
	}

	aside {
		padding-block-start: var(--paddingmargin);
		padding-block-end: var(--marginblock);
	}

	.quote-left { 
		text-align: end;
	}

	.quote-right { 
		text-align: start; 
	}

	footer a {
		color: var(--shadowcolor);
		text-decoration: none;
		font-size: var(--fontsizefooter);
	}
	
	footer a::after {
		content: " (" attr(href) ")";
		display: block;
		font-size: 0.5em;
		line-height: 1;
		overflow-wrap: anywhere;
	}

	footer ul li:last-child a::after {
		content: "https://noor2025-design.github.io/spread/#hero";
	}

}




/* -----------------Accessibility, Device states----------------- */

@media (hover: none) {
	.links {
		font-size: calc(var(--fontsizep) * 1.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	#hero .left-shadow, 
	#hero .right-shadow,
	#hero .top-shadow,
	#hero .bottom-shadow { 
		animation: none;
		text-shadow: 0 0 0 rgba(var(--shadowcolor), .4);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--backgroundcolor: 0, 0, 0;
		--shadowcolor: 255, 255, 255;
	}
}