@font-face{
	font-family: "Library_3_am_soft";
	src: url("../fnt/Library 3 am soft.otf") format("opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap');

/* General Properties for entire page */
* {
	box-sizing: border-box;
}

body{
	background-color: red;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 1vh;
	line-height: 1.6rem;
	font-weight: 300;
	margin: 0;
	padding: 0;
}

#signInBody{
	overflow: hidden;
}

/* Wrapper Around Everything, All Pages */
.wrapperAll{
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}

/* New Main Header, All Pages */
.mainHeader{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	width: 100%;
	background-color: #111;
}

.mainHeader h1{
	color: #D04BFF;
	text-align: center;
	text-shadow: 0 0 5px #fff, 0 0 15px #D04BFF, 0 0 30px #B441EF;
	font-family: Library_3_am_soft, sans-serif;
	font-size: clamp(2rem, 10vw, 6rem);
	margin: 0;
	padding: clamp(1rem, 5vw, 3rem) 0;
}

/* Navigation Bar, All Pages */
.navbar{
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: #612380;
	color: #fff;
}

.leftNavbar{
	flex: 2;
	padding: 0 2rem;
}

.centerNavbar{
	flex: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2rem;
}

.centerNavbar a{
	color: #fff;
	text-decoration: none;
	font-size: 2rem;
	font-weight: 700;
	padding: 0.5rem 1rem;
}

.centerNavbar .current{
	color: #D04BFF;
	font-size: 2.4rem;
}

.rightNavbar{
	flex: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2rem;
}

.rightNavbar a, form{
	color: #fff;
	text-decoration: none;
	font-size: 1.2rem;
	padding: 0 0.25rem 0 0;
	white-space: nowrap;
}

#selectText {
	border: none;
	background-color: #612380; /* change to navbar bgcolor */
	color: #fff;
	font-size: 1.2rem;
}

#selectText input:focus, textarea:focus, select:focus {
	outline: none;
}

#firstItem {
	display: none;
}

/* Middle Wrapper, All Pages */
.middleWrapper{
	flex: 97;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Backer Image for Home Page */
#homeMiddle{
	border-image: linear-gradient(#D04BFF80, #45195C80) fill 1;
	background: url('../img/crowdHome.jpg') no-repeat center bottom /cover;
}

/* Backer Image for Pages Under Construction */
#libraryMiddle, #streamsMiddle, #commissionMiddle, #accountMiddle, #settingsMiddle, #signOutMiddle, #registerMiddle, #forgotPasswordMiddle{
	background: url('../img/underConstruction.jpg') no-repeat right bottom /cover;
}

/* Backer Image for Sign In Page */
#signInMiddle{
	border-image: linear-gradient(#D04BFF80, #45195C80) fill 1;
	background: url('../img/crowdSignIn.jpg') no-repeat center bottom /cover;
}

/* Banner Ad Box at Top of Middle Wrapper for Pages with Ads */
.bannerAd{
	flex: 1;
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bannerAd img{
	width: 728px;
	height: 90px;
	margin: 5px;
	padding: 0;
}

/* Showcase in Middle Wrapper for Pages with Ads */
.showcase{
	flex: 99;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/* Showcase in the Middle Wrapper for Home Page */
#showcaseHome{

}

/* Left Box of Middle Wrapper for the Home Page, preview of a few gifs */
#homeLeft{
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(#45195C00, #D04BFF80, #45195C00);
	margin: 0;
	padding: 0;
}

#homeLeft img{
	height: clamp(80px, 7.5vh, 160px);
	padding: 1vh 1vw;
}

/* Center Box of Middle Wrapper for the Home Page, main about text */
#homeCenter{
	flex: 8;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 5vw;
}

#homeCenter h1{
	align-self: flex-start;
	margin: 0;
	padding: 1vh 10vw;
	font-size: 5vh;
	line-height: 6vh;
	color: #D04BFF;
	text-shadow: 0 0 5px #000;
}

#homeCenter p{
	align-self: flex-start;
	margin: 0;
	padding: 1vh 5vw;
	font-size: 2.5vh;
	line-height: 3vh;
	text-shadow: 0 0 5px #000;
}

/* Right Box side of Middle Wrapper for the Home Page, definition of Crowd Rousing */
#homeRight{
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(#45195C00, #D04BFF80, #45195C00);
	margin: 0;
	padding: 0;
}

#homeRight h1{
	text-align: center;
	font-size: 5vh;
	line-height: 6vh;
	color: #D04BFF;
	text-shadow: 0 0 5px #000;
	padding: 0 1vw;
}

#homeRight p{
	text-align: center;
	font-size: 2.5vh;
	line-height: 3vh;
	text-shadow: 0 0 5px #000;
	padding: 0 1vw;
}

/* Middle Wrapper, Sign In Page */
#signInMiddle{
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/* Left Box for Sign In Page */
#signInLeft{
	flex: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Right Box for Sign In Page */
#signInRight{
	flex: 6;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Sign In Logo, Form, and Links */
#signInLogo{
	flex: 2;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

#signInLogo img{
	height: 40vh;
}

#signInForm{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80%;
}

#signInForm form{
	width: 80%;
	padding: 0;
	color: #D04BFF;
	font-size: 1.6rem;
	white-space: normal;
}

#signInForm .textInput{
	margin-bottom: 1.5rem;
	width: 100%;
	border-radius: 5px;
	background: #111;
	color: #D04BFF;
	font-weight: 700;
	border: 1px solid #45195C;
	box-shadow: 0 0 5px #fff, 0 0 15px #D04BFF, 0 0 30px #B441EF;
	padding: 0.5rem 1rem;
	line-height: 1.7rem;
}

::placeholder{
	color: #D04BFF;
	font-weight: 700;
}

.primButton{
	width: 100%;
	padding: 0rem 1rem;
	height: 2.7rem;
	display: block;
	border: 2.5px outset #45195C;
	border-radius: 5px;
	box-shadow: 0 0 5px #fff, 0 0 15px #D04BFF, 0 0 30px #B441EF;
	font-weight: 700;
	background-color: #D04BFF;
	color: #45195C;
	text-decoration; none;
	cursor: pointer;
	text-align: center;
	transition: color 0.5s;
}

.primButton:hover{
  border: #d6d6d6;
	color: #d6d6d6;
}

#signInLinks{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

#signInLinks a{
	display: block;
	color: #45195C;
	text-decoration: none;
	text-align: center;
	font-size: 1.0rem;
	font-weight: 700;
	text-shadow: 0 0 5px #fff, 0 0 15px #D04BFF, 0 0 30px #B441EF;
}

/* Teaser */
#teaser{
	height: 100%;
	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#teaser h1{
	font-family: Library_3_am_soft, sans-serif;
	color: #D04BFF;
	font-size: clamp(32px, 10vw, 100px);
	font-weight: 900;
	text-shadow: 0 0 10px #45195C, 0 0 15px #fff, 0 0 25px #D04BFF, 0 0 40px #8B32B8;
	line-height: 1.7rem;
	margin: 3.4rem 0;
}

/* Main Footer, All Pages */
.mainFooter{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width:100%;
	background: #45195C;
}

.mainFooter #FooterLinks{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.1rem 0;
}

.mainFooter a{
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.9rem;
	line-height: 0.9rem;
	padding: 0 1rem;
}

.mainFooter #FooterText{
	display: flex;
	align-items: center;
	justify-content: center;
}

.mainFooter p{
	font-size: 0.9rem;
	line-height: 0.9rem;
	margin: 0.1rem 0;
}

/*Teaser Text line adjustment for wrapping */
@media (max-width: 1410px) {

	#teaser h1{
		margin: 0;
		line-height: 10rem;
	}

}

/*For Smaller Screens, Removes Teaser, makes Sign In Form smaller */
@media (max-width: 1200px) {
  body{
    overflow: auto;
  }

	.leftNavbar{
		display: none;
	}

	.centerNavbar .current{
		font-size: 1.3rem;
	}

	.centerNavbar a{
		font-size: 1.2rem;
	}

	.rightNavbar a, form{
		font-size: 1rem;
	}

	#showcaseHome{
		flex-direction: column;
	}

	#homeLeft{
		flex-direction: row;
		background-image: none;
	}

	#homeCenter{
		flex: 1;
		width: 100%;
		margin: 1vw;
	}

	#homeCenter h1{
		font-size: 4vh;
		line-height: 5vh;
		padding: 0.5vh 5vw;
	}

	#homeCenter p{
		font-size: 2vh;
		line-height: 2.5vh;
		padding: 0.5vh 2.5vw;
	}

	#homeRight{
		flex: 1;
		width: 100%;
		background-image: none;
		padding: 0;
	}

	#homeRight h1{
		align-self: flex-start;
		text-align: left;
		margin: 0;
		padding: 0.5vh 5vw;
		font-size: 4vh;
		line-height: 5vh;
	}

	#homeRight p{
		align-self: flex-start;
		text-align: left;
		margin: 0;
		padding: 0.5vh 2.5vw;
		font-size: 2vh;
		line-height: 2.5vh;
		margin: 0;
	}

  #signInLeft{
    justify-content: start;
  }

  #signInRight{
    display: none;
  }

  #signInForm .textInput{
		padding: 1rem;
		padding: 0.5rem;
		line-height: 1.7rem;
  }

	::placeholder{
		font-size: 1.7rem;
	}

	.primButton{
		height: 2.7rem;
		font-size: 1.7rem;
	}

	#signInLinks a{
		line-height: 1.7rem;
		font-size: 1.3rem;
	}

}

/* For Smaller Screens, Makes Navbar, Sign In Form, and Footer Text smaller */
@media (max-width: 768px){

	.navbar{
		flex-direction: column;
	}

	.centerNavbar{
		padding: 0 .25rem;
	}

	.centerNavbar a{
		padding: 0.25rem;
	}

	.bannerAd img{
		width: 320px;
		height: 50px;
		margin: 5px;
		padding: 0;
	}

	.showcase{
		flex-direction: column;
	}

	#homeLeft{
		display: none;
	}

	#signInForm .textInput{
		margin-bottom: 1rem;
		padding: 0.5rem;
		line-height: 1rem;
	}

	::placeholder{
		font-size: 1rem;
	}

	.primButton{
		height: 2.7rem;
		font-size: 1rem;
	}

	#signInLinks a{
		font-size: 1rem;
	}

	.mainFooter a{
		font-size: 0.5rem;
		padding: 0 0.5rem;
	}

	.mainFooter p{
		font-size: 0.5rem;
	}

}
/* Mobile devices in landscape mode */
@media (max-height: 768px){

	.mainHeader h1{
		font-size: clamp(1rem, 5vw, 3rem);
		margin: 0;
		padding: clamp(0.25rem, 1vw, 0.5rem) 0;
	}

	.navbar a{
		font-size: 1rem;
		padding: 0 0.5rem;
	}

	.navbar .current{
		font-size: 1.2rem;
	}

	.bannerAd img{
		width: 320px;
		height: 50px;
		margin: 1vh;
		padding: 0;
	}

	#homeLeft{
		display: none;
	}

	#homeCenter{
		flex: 2;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#homeCenter h1{
		font-size: 6vh;
		line-height: 7vh;
		padding: 0.5vh 5vw;
	}

	#homeCenter p{
		font-size: 3vh;
		line-height: 3.5vh;
		padding: 0.5vh 2.5vw;
	}

	#homeRight{
		flex: 1;
		width: 100%;
		background-image: none;
		margin: 0;
		padding: 0;
	}

	#homeRight h1{
		align-self: flex-start;
		text-align: left;
		margin: 0;
		padding: 0.5vh 5vw;
		font-size: 6vh;
		line-height: 7vh;
	}

	#homeRight p{
		align-self: flex-start;
		text-align: left;
		margin: 0;
		padding: 0.5vh 2.5vw;
		font-size: 3vh;
		line-height: 3.5vh;
		margin: 0;
	}

	#signInLogo{
		display: none;
	}

	#signInForm .textInput{
		margin-bottom: 1rem;
		padding: 0.5rem;
		line-height: 1rem;
	}

	::placeholder{
		font-size: 1rem;
	}

	.primButton{
		height: 2.7rem;
		font-size: 1rem;
	}

	#signInLinks a{
		font-size: 1rem;
	}

	.mainFooter a{
		font-size: 0.5rem;
		padding: 0 0.5rem;
	}

	.mainFooter p{
		font-size: 0.5rem;
	}

}