/* Initialization: Set Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins');
/* @import url('https://fonts.googleapis.com/css2?family=Cabin'); */
/* @import url('https://fonts.googleapis.com/css2?family=Lexend'); */


/* Initialization: Define Global Constants */
:root {
	/* Originally, primary color was #322c3d, secondary was #ffffff */
	--primary-color:#2d2d2a;	/* JET: Primary website color */
	--secondary-color:#e5dcc5;	/* PEARL: Secondary website color */
	--tertiary-color:#848fa5;	/* COOL GRAY: Tertiary website color */
	--quaternary-color:#c14953;	/* BITTERSWEET SHIMMER: */
	--quinary-color:#4c4c47;	/* DAVY'S GRAY: */
	--navbar-bottomY:125px;		/* Y-coordinate bottom of nav bar */

	--flipbook-width:922px;		/* flipbook portal */
	--flipbook-height:600px;	/* flipbook portal */
}

/* Initialization: Set basic appearance for website */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

/* Monospace text (for timecodes and such) */
.monospace {
	font-family: 'Lucida Console', Courier, monospace;
}

/* === STATUS Text === */
/* Use class "hidden" to flag hidden elements */
.hidden {
	visibility: hidden;
}

/* Specify appearance for INFO/ERROR message text on home page */
.statusMsg {
	position: absolute;
	font-size: 2em;
	font-weight: 600;
	justify-content: right;
	top: var(--navbar-bottomY);
	right: 4%;
	z-index: 1024;
}

/* Error messages should be shown in a stand-out color */
.errMsg {
	color: var(--quaternary-color);
}

/* Informational messages are more subdued */
.infoMsg {
	color: var(--primary-color);
}

/* === HEADER / NAVIGATION === */
/* Specify PAGE HEADER appearance (includes navigation bar) */
header {
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 2% 5% 2% 3%;
/*	padding: 20px 100px; WORKS */
	background: var(--primary-color);	/* use RED for testing */
/*	align-items: left; Breaks header menu */
	align-items: center;
	z-index: 99;
}

.logo {
	font-size: 2em;
	color: var(--secondary-color);
	user-select: none;
	width: 80%;
}

.navigation a {
	position: relative;
	font-size: 1.1em;
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 500;
	margin-left: 3%;
}

.navigation {
	color: var(--secondary-color);
	width: 70%;
}

.navigation a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 3px;
	background: var(--secondary-color);
	border-radius: 5px;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s;
}

.navigation a:hover::after {
	transform-origin: left;
	transform: scaleX(1);
}

/* Login Button: Display popup form */
.navigation .btnLogin-popup {
	width: 100px;
	height: 4%;
	background: transparent;
	border: 2px solid var(--secondary-color);
	outline: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1.1em;
	color: var(--secondary-color);
	font-weight: 500;
	margin-left: 3%;
	transition: .5s;
}

.navigation .btnLogin-popup:hover {
	background: var(--secondary-color);
	color: var(--primary-color); /* was #162938 */
}

/* Login Button (default): Do not show */
.btnLogin-popup {
	visibility: hidden;
}

/* Login Button: Only visible on HOME page */
.home .navigation .btnLogin-popup {
	visibility: visible;
}

/* === BODY === */
body {
		/* NOTE: Flex is required to get form-box to display centered */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - var(--navbar-bottomY));
	background-color: var(--primary-color);
	background-size: contain;
	background-position: center;
	overflow:hidden; /* from turnj4. flipbook css. Is it needed? */
}

/* HOME Page */
body.home {
	background-image: url('images/bg-home.jpg');
	background-color: var(--primary-color);
	background-repeat: no-repeat;
	background-clip: content-box;
	background-position: center;
	background-attachment: fixed;	/* No scrolling */
	height: calc(100vh - var(--navbar-bottomY));
	overflow: hidden;
/* Are browser-specific properties still needed? *
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
 * */
}

/* HOME Page */
body.status404 {
	background-image: url('images/bg-404.jpg');
	background-color: var(--primary-color);
	background-repeat: no-repeat;
	background-clip: content-box;
	background-position: center;
	background-attachment: fixed;	/* No scrolling */
	height: calc(100vh - var(--navbar-bottomY));
	overflow: hidden;
/* Are browser-specific properties still needed? *
	-webkit-background-size: contain;
	-moz-background-size: contain;
 * */
}

/* Specify appearance for FORM popup */
.form-box {
	position: relative;
	top: var(--navbar-bottomY);
	width: 400px;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .5);
	border-radius: 20px;
	-webkit-backdrop-filter: blur(20px);	/* for iPad */
	backdrop-filter: blur(20px);
	box-shadow: 0 0 30px rgba(0, 0, 0, .5);
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: 40px;
}

.form-box .loginForm .active {
	display: block;			/* Make the elements visible */
	visibility: visible;	/* Allow the elements to take up space */
	height: 440px;			/* Height for this form */
}

.form-box .registerForm .active {
	display: block;			/* Make the elements visible */
	visibility: visible;	/* Allow the elements to take up space */
	height: 540px;			/* Height for this form */
}

.form-box .resetStartForm .active {
	display: block;			/* Make the elements visible */
	visibility: visible;	/* Allow the elements to take up space */
	height: 340px;			/* Height for this form */
}

.form-box .resetCompleteForm .active {
	display: block;			/* Make the elements visible */
	visibility: visible;	/* Allow the elements to take up space */
	height: 550px;			/* Height for this form */
}

.form-box .icon-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 45px;
	background: var(--primary-color);
	font-size: 2em;
	color: var(--secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 20px;
	cursor: pointer;
	z-index: 1;
}

/* Specify appearance for elements on the FORM popup */
.form-box h2 {
	font-size: 2em;
/* NOTE: The photograph I chose requires a darker font for H2 */
	color: var(--primary-color);
	text-align: center;
}

.mielo-confirm {
	opacity: 0;
	position: absolute;
	top: 1000;
	left: 0;
	height: 0;
	width: 0;
	z-index: -1;
}

.input-box {
	position: relative;
	width: 100%;
	height: 50px;
	border-bottom: 2px solid var(--primary-color);
	margin: 30px 0;
}

.input-box label {
	position: absolute;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
	font-size: 1em;
	color: var(--secondary-color);
	font-weight: 500;
	pointer-events: none;
	transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label {
	top: -5px;
}

.input-box input {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	font-size: 1em;
	color: var(--secondary-color);
	font-weight: 600;
	padding: 0 35px 0 5px;
}

.input-box .icon {
	position: absolute;
	right: 8px;
	font-size: 1.2em;
	color: var(--secondary-color);
	line-height: 57px;
}

.resetStart-link {
	font-size: .9em;
	color: var(--secondary-color);
	font-weight: 500;
	margin: -15px 0 15px;
	display: flex;
	justify-content: space-between;
}

.resetStart-link label input {
	accent-color: var(--secondary-color);
	margin-right: 3px;
}

.resetStart-link a {
	color: var(--secondary-color);
	text-decoration: none;
}

.resetStart-link a:hover {
	text-decoration: underline;
}

.btn {
	width: 100%;
	height: 45px;
	background: var(--primary-color);
	border: none;
	outline: none;
	border-radius: 6px;
	cursor: pointer;
	color: var(--secondary-color);
	font-size: 1em;
	font-weight: 500;
}

.login-register {
	font-size: .9em;
	color: var(--secondary-color);
	text-align: center;
	font-weight: 500;
	margin: 25px 0 10px;
}

.login-register p a {
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 600;
}

.login-register p a:hover {
	text-decoration: underline;
}

/* Fill screen with writable area */
.content-wide {
	position: fixed;
	top: var(--navbar-bottomY);
	left: 2%;
	margin-top: 2%;
	border-radius: 15px 50px;
	padding: 30px;
	width: 90%;
	min-height: 72%;		/* Originally 640px and just height*/
	background: var(--secondary-color);
	align-items: center;	/* Needed? */
/*	overflow: auto;		* Allows scrolling */
	overflow: hidden;	/* Makes flipbook look better */
}

/* Fill only left-half of screen with writable area */
.content {
	position: absolute;
	top: var(--navbar-bottomY);
	left: 2%;
	margin-top: 2%;
	margin-right: 2%;
	border-radius: 15px 50px;
	padding: 30px;
	width: 45%;			/* Originally 540px */
	min-height: 72%;		/* Originally 640px and just height*/
	background: var(--secondary-color);
	justify-content: left;
	overflow: auto;		/* Allows scrolling */
	/* overflow: hidden; */
}

.content-narrow dl, .content dl {		/* Dictionary List */
	padding: 0px;
}

.content-narrow dt, .content dt {	/* Dictionary Term */
	display: block;
	float: left;
	margin-top: 2%;
	font-weight: bold;
	clear: both;
}

.content-narrow dd, .content dd {	/* Dictionary Definition */
	display: block;
	clear: both;
	float: left;
}

p.content-title {
	text-align: left;
	margin-right: 2%;
	margin-bottom: 5%;
	color: var(--primary-color);
	font-size: 1.5em;
	font-weight: bold;
}

.content p {
	text-align: left;
	margin-right: 2%;
	margin-bottom: 5%;
}

p.project-title {
	text-align: center;
	margin-top: 0px;
	margin-right: 2%;
	margin-bottom: 0px;
	color: var(--primary-color);
	font-size: 1em;
	font-weight: bold;
}

p.project-subtitle {
	text-align: center;
	margin-right: 2%;
	margin-bottom: 2%;
	color: var(--quinary-color);
	font-size: 1em;
	font-weight: bold;
}

/* Fill only right-half of screen with photograph */
.photo {
	position: absolute;
	top: var(--navbar-bottomY);
	margin-top: 2%;
	left: 55%;
	border-radius: 15px 50px;
	padding: 0px;
	width: 38%;			/* Originally 540px */
	height: 72%;		/* Originally 640px */
	display: flex;		/* Stretches image */
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--quinary-color);
}

.photo img {
	max-height: 100%;
	max-width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;	/* No scrolling */
}

/* Fill only left-30% of screen with writable area */
.content-narrow {
	position: absolute;
	top: var(--navbar-bottomY);
	left: 2%;
	margin-top: 2%;
	margin-right: 2%;
	border-radius: 15px 50px;
	padding: 30px;
	width: 28%;			/* Originally 540px */
	min-height: 72%;		/* Originally 640px and just height*/
	background: var(--secondary-color);
	justify-content: left;
	overflow: auto;		/* Allows scrolling */
	/* overflow: hidden; */
}

/* Slide Tray Navigation (for CHS-007) */
.navigation-line2 a {
	color: var(--secondary-color);
	text-decoration: none;
}

.navigation-line2 a:hover {
	text-decoration: underline;
}

/* This is bad. Hardcoded position. But I'm ready to release */
.navigation-line2 {
	position: absolute;
	top: var(--navbar-bottomY);
	margin-top: 3%;
	left: 42%;
	z-index: 999; 
}

.nav-icon {
	border: none;
	background-color: transparent;
	margin: 10px;
	cursor: pointer;
	transition: transform 0.5s;
}

.nav-icon:focus {
	outline: none;
}

@media only screen and (max-device-width: 1080px ) {
	.video {
		position: absolute;
		top: calc(var(--navbar-bottomY) + 10%);
		left: 30%;
		padding: 1%;
		width: 756px; /* was 730px; */
		height: 425px; /* was 576px; */
		background: var(--primary-color);
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
}

/* Fill only right-60% of screen with video window */
.video {
	position: absolute;
	top: calc(var(--navbar-bottomY) + 10%);
	left: 30%;
	padding: 1%;
/* PROBLEM *
 	It seems like this should work, but it boogers up the size
	width: 100%;
	height: auto;
 * PROBLEM */
	width: 810px; /* 810px; */
	height: 460px; /* 640px; */
	background: var(--primary-color);
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.longlist {
	font-size: smaller;
}

/* Controller Buttons */
button.book-icon {
	border: none;
	background-color: transparent;
	margin: 10px;
	cursor: pointer;
	transition: transform 0.5s;
}

button.book-icon:focus {
	outline: none;
}

button.book-icon:hover {
	color: var(--tertiary-color); /* was 636363 */
}

.book-icon {
/*	position: relative;	* Relative to content container */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 50px;
	color: var(--primary-color);
	z-index: 999;	/* Button always in front */
}

.book-icon-prev {
	justify-content: left;
}

.book-icon-next {
	justify-content: right;
	left: 90%;
}

.loadingFlag {
	position: absolute;
	font-size: 1.1em;
	top: 100px;
	left: 20px;
	color: var(--quaternary-color);
}

.project-name {
	font-size: 2em;
	font-weight: bold;
/*	margin-top: -20px;	--* HACKED ADJUSTMENT */
	top: 5px;
	left: 20px;
	color: var(--primary-color);
}

/* This is a hack to get the Video Content lists to indent */
ul.narrow-list {
	font-size: smaller;
	margin-top: 1em;
	margin-left: 1em;
}

ul.narrow-list > li {
	margin-left: -1em;
}


/* === TURN4JS FLIPBOOK STYLES === */
.flipbook-viewport {
	overflow:hidden;
	width:100%;
	height:100%;
}

.flipbook-viewport .container {
	position:absolute;
	top:50%;
	left:50%;
	margin:auto;
}

.flipbook-viewport .flipbook {
	width: var(--flipbook-width);
	height: var(--flipbook-height);
	left: calc(var(--flipbook-width)/2 * -1);
	top: calc(var(--flipbook-height)/2 * -1);
}

.flipbook-viewport .page {
	width: calc(var(--flipbook-width)/2);
	height: var(--flipbook-height);
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

@media only screen and (max-device-width: 1090px ) {
/* The proportions are different for iPad 2.5/2.25 instead of 2 */
	.flipbook-viewport .flipbook {
		width: var(--flipbook-width);
		height: var(--flipbook-height);
		left: calc(var(--flipbook-width)/2.5 * -1);
		top: calc(var(--flipbook-height)/2.25 * -1);
	}

	.flipbook-viewport .page {
		width: calc(var(--flipbook-width)/2.5);
		height: var(--flipbook-height);
		background-color:white;
		background-repeat:no-repeat;
		background-size:100% 100%;
	}

}

.flipbook .page {
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow {
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px var(--primary-color);
	-moz-box-shadow:0 0 20px var(--primary-color);
	-o-box-shadow:0 0 20px var(--primary-color);
	-ms-box-shadow:0 0 20px var(--primary-color);
	box-shadow:0 0 20px var(--primary-color);
}