* {box-sizing: border-box; scroll-behavior: smooth;}

/* variables */
:root {
	--headerWidth: 80px;
	--headerFontHeight:20px;
	--headerPadding:5px;

	--stndPadding: 20px;
	--maxViewWidth:1200px;
	--separatorRatio:8 / 2;
	--smallRotationAngle: 2deg;
	--smallRotationAngleAlt: -2deg;
	--maxContentWidth: 1000px;
	--spacerHeight: 100px;
	--stndBorderRadius: 15px;
	

	/* Colors */
	--yarnPurple: #543263;
	--lightGreen: #def0d5;
	--darkGray: #2b2b2b;
}

body{
		/*margin-left:var(--headerWidth);*/
		padding:0px; margin:0px;
		font-size: 18px;
		font-family: "Arimo", sans-serif;
		background-image: url('files/fullRes/tileablePaper.jpg');
		background-position: center;
		background-repeat: repeat;
		margin-top: var(--headerWidth);
}

h1,h2,h3 {font-family: "Chelsea Market", Veranda; text-transform: uppercase;}
h1{font-size: 3rem;}
h2 {font-size:2rem;}
h4 {font-weight: bold;}

a {color:var(--darkGray);}

/* Page Elements and Containers */

section {
	width:100%; max-width:var(--maxViewWidth);
	display:flex; flex-flow:column; align-items: center; justify-content: center;
	position:relative;
	padding:var(--stndPadding);
	margin:auto;
	
	/* debug 
	border:5px solid blue;*/
}

	section.fV, section.banner {min-height:calc(100dvh - var(--headerWidth));}

		section.banner {width:100%; max-width: initial;}

		section.banner > img {
			position: absolute;
			top:0; left:0; width:100%; height:100%;
			object-fit: cover;
			border-radius: 0px;
		}

	section > div {
		width:100%; max-width: var(--maxContentWidth);
		position: relative;
		/* debug 
		border:5px solid cyan;*/
	}

		.titleImg {
			width:100%; height:auto;
			max-width: var(--maxContentWidth);
		}

		.cardboard {
			background: url('files/fullRes/cardboard.jpg') center/cover;
			box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.2);
		}

	section > .bkg {
		position:absolute; top:0; left:0; 
		width:100%; height:100%;
		object-fit: cover;
		z-index:-1;
		border-radius: var(--stndBorderRadius);
	}

		section > .tilted {
			transform: rotate(var(--smallRotationAngle));
		}

		section > .tiltedAlt {
			transform: rotate(var(--smallRotationAngleAlt));
		}

.separater {
	width:100%; max-width: var(--maxViewWidth);
	height:15dvw;
	position:relative; z-index: 900;
	margin:auto;

	/*
	aspect-ratio: var(--separatorRatio);

	background: url(files/fullRes/tanPaper_full.jpg);
	background-size: cover; background-repeat: no-repeat; */

	/* move up by half height 
	transform: translateY(-50%); */

	/* debug 
	border:5px solid red;*/
}

.spacer {width:100%; margin-top: var(--spacerHeight); margin-bottom: var(--spacerHeight);}
	.spacer > img {width:100%;}

/* Text Containers */
	.bright {
		color:var(--lightGreen);
		filter: drop-shadow(1px 1px 1px black);
	}

	/* Full Screen Containers */
	.fsc {
		position:absolute; top:50%; left:50%; 
		transform: translate(-50%, -50%);
		width:100%; height:calc(100% - var(--stndPadding) - var(--stndPadding)); 
		display:block;
	}
		.topLeft {position:absolute; top:0; left:0;}
		.bottomRight {position:absolute; bottom:0; right:0;}
		.halfWidth {width:50%;}

		.fsc.flipped .topLeft {left:initial; right:0;}
		.fsc.flipped .bottomRight {right:initial; left:0;}

	@media screen and (max-width:800px) {
		.halfWidth {width:100%;}
	}	


/* Standard Content */
.characterDiv {
	width:100%; display:flex; flex-flow:row; align-items: center; justify-content: center; flex-wrap: wrap;
}
	.characterDiv > div {width:29%; margin:2%;}

		.characterDiv > div > img {width:70%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15%;}
		.characterDiv > div > h3 {margin-bottom: 5px;}

img {border-radius: 5%;}

.columnDiv {display:flex; flex-flow: row; align-items: center; gap: 40px;}
		.columnDiv > div {width:60%;}
		.columnDiv > img {width:40%;}

		.columnDiv.half > div,  .columnDiv.half > img {width:50%;}

	@media screen and (max-width:800px) {
		.columnDiv {flex-flow: column;}
			.columnDiv > div, .columnDiv > img {width:100%;}
	}

/* Loader */
#loader{
	position:fixed; width:100%; height:100%; z-index: 1000;
	top:0; left:0;
	background: #a89883 url('files/lowRes/LR-cardboard.jpg') center/cover;
	display:flex; flex-flow: column; align-items: center; justify-content: center;
	text-align: center;
	transition: 0.5s;
}
	#loader div {max-width: var(--maxContentWidth); margin:auto;}
	#loader img {width:100%; max-width: 600px; height:auto;}

	#loader.hidden {opacity:0; pointer-events: none;}

/* Header & Footer */
#footer {
	width:100%; padding:var(--stndPadding);
	display:flex; flex-flow: column; justify-content: center; align-items: center;
	margin-top: 200px;
}
	#footer > img {width:200px; height:auto; margin-bottom: var(--stndPadding);}

#header {
	position: fixed; top:0; left:0;
	width:100%; height:var(--headerWidth);
	padding: var(--headerPadding);
	background:white; 
	z-index: 999;
}
	#header > div {
		width:100%; height:100%; max-width: var(--maxContentWidth);
		display: flex; flex-flow: row; align-items: center; margin:auto;
	}

	#header > div > div {width:100%; display:flex; align-items: center; justify-content: flex-end;}

	#headerImg {display:inline-block; height:100%; width:auto; cursor:pointer; transition: 0.5s;}
		#headerImg:hover {scale:1.02;}

	#header > div > div > a {
		display:inline-block; margin-right: var(--stndPadding); color:black; text-decoration: none;
		font-family: "Chelsea Market", Veranda; font-size: var(--headerFontHeight);
	}
		#header > div > div > a:hover {color:var(--yarnPurple);}
		#header > div > div > a > img {height:var(--headerFontHeight); width:auto; margin:1em;}