:root{
		--mainPurple:#36004F;
		--mainBlue:#6BC6D3;
		--mainGray:#6F7376;
		--mainBlack:#04061D;
		--mainOrange:#FF7F50;
		--mainPink:#E4094A;
		--mainFuchsia: #DB0971;
		--mainYellow: #ede780;
		--mainGreen: green;
		
		--mainPurpleLight: rgba(201, 152, 224,1);
		
		--rounded: 15px;
	}
	body			{font-family: 'Quicksand', sans-serif; font-size:1.2rem;  padding:0px; margin:0px;
						display:flex; justify-content:center;}
	a 				{text-decoration:none; color:var(--mainBlue);}
	p				{margin-top:5px; margin-bottom:20px; line-height:150%; color:#ffffff;}
	p.firstText		{margin:0rem auto 2rem auto; text-align:center}
	ul				{margin-bottom:5px;}
/*	a:visited		{color:purple; text-decoration: underline} */
	#mainContent	{width:100%;}
	#navigation		{display:flex; flex-direction:row; gap:1rem; justify-content:space-between; align-items:center;
						margin-top:0px; padding:20px 20px; background-color:var(--mainPurple);}
	#midNavigation	{display:flex; flex-direction:row; gap:1.5rem}
	#midNavigation a {color:var(--mainBlue); font-size:16px; text-decoration:none}
	#mainLogo		{width:200px; height:auto; transition-property:width; transition-duration:1000ms;}
	#sign			{display:flex; flex-direction:row; gap:1rem; justify-content:space-between; align-items:center;	
						font-size:16px;
	}
	
	#sign a			{padding:10px 15px; color:#ffffff;}
	#signup			{background-color:var(--mainBlue); border-radius:25px}
	
	h1				{margin:0px 0px; color:var(--mainPurple); padding-top:20px; margin-bottom: 1rem}
	#footer			{background-color:var(--mainPurple); display:flex; flex-direction:row; gap:2rem; color:#ffffff; 
						font-size:.85rem; padding:20px 20px; justify-content:space-between; flex-wrap:wrap;}
	#footer > div	{flex:0 0 170px}
	#footer > div:nth-child(1)
					{flex:0 0 260px; margin-bottom:2rem}
	
	/* Email signup in the footer */				
	#emailCase		{position:relative;}
	#emailForm		{display:flex; flex-direction:column; gap:1rem; postion:absolute; top:0px; left:0px;
						transition:opacity 400ms; opacity:1; z-index:1;
	}
	#emailSignUpButton	{z-index:1; transition:opacity 400ms;}
	#emailSignUpLoading	{z-index:-1; transition:opacity 400ms;}
	
	#emailThankYou		{background-color:var(--mainPurpleLight); gap:1rem;}
	#emailSignUpError	{background-color:var(--mainOrange); gap:0.5rem;}
	#emailProcessing	{background-color:var(--mainBlue); gap:0.5rem;}
	.emailSignUpMessage	{ border-radius:var(--rounded); padding:1.25rem;
						display:flex; flex-direction: column; justify-content: center; align-items: center;
						 position:absolute; top:0px; left:0px;
						transition:opacity 400ms; opacity:0; z-index:-1;
					> div:nth-child(1)	{font-size:1.5rem; font-weight:300; color:var(--mainPurple);}
					> div:nth-child(2)	{font-size:1rem; font-weight:500;}
	}
	
	.footerInput	{padding:10px; font-size:1rem; background-color:--var(--mainGray); color:var(--mainBlack);
						border:0px; border-radius:var(--rounded);}
	#footerSubmit	{position:relative;
						> div {position:absolute; top:0px; left:0px; transition:opacity 400ms}
						> div:nth-child(2) 	{opacity:0}
	}
	#footerSocial	{display:flex; flex-direction:row; gap:1rem; justify-content:flex-start; align-items: center;
						> div  img {width:25px; height:25px}
	}
	
	
	
	#copyright		{background-color:var(--mainPurple); padding:2rem; color:#ffffff; text-align: center;}
	.footerTitle	{color:#ffffff; font-size:1.2rem; margin-bottom:10px}
	#mainLogoWhite	{width:125px; height:auto; margin-bottom:10px}
	.footerNav		{display:flex; flex-direction:column; gap:1rem; font-size:1rem;}
	.navDivide		{padding-right:20px; padding-left:10px; color:var(--mainGray); font-size:2rem}
	.mapIcons		{font-size:1.65rem; color:var(--mainBlue);}
	#menuButton		{display:none;}
	#menuButtonMob	{display:none;}
	#sideNav		{height:100%; width:0; position: fixed; z-index:1; top:0; right:0;
						  background-color: var(--mainBlack); overflow-x: hidden; padding-top: 60px;  transition: 0.5s;}
	#sideNav a 		{padding: 8px 8px 8px 32px; text-decoration: none; font-size:25px; display: block; transition: 0.3s;}
	#sideNav a:hover {color: #f1f1f1;}
	
	#closebtn 		{position: absolute; top: -45px; left: 100px; font-size: 46px; margin-left: 50px;}
	
	@media (max-width:870px){
		#midNavigation	{display:none;}
		#menuButton		{display:block;}
	}
	@media (max-width:550px){
		#navigation			{flex-direction:column;}
		#sign				{display:none;}
		#mobileNav			{display:flex; justify-content:space-between; width:100%}
		#menuButtonMob		{display:block;}
		#mainLogo			{width:150px;}
		#footer				{flex-direction: column;}
		#footer > div:nth-child(1) {margin-bottom:2.5px;}
	}
	/* H1 */
	
	.headerTitle	{color:var(--mainPurpleLight); text-align:center; font-size:clamp(2rem, 4vw, 3.25rem); font-weight:300;
					padding-top:1.5rem;
	}
	
	
	/* Buttons */
	.button			{font-size:1.2rem; font-weight:800; padding:10px 20px; border-radius:25px; border:0px; cursor:pointer;}
	.pink			{background-color:var(--mainFuchsia); color:#ffffff; transition-property:background-color,color; transition-duration:400ms;}
	.pink:hover		{background-color:var(--mainBlue); color:var(--mainPurple)}
	
	
	.purpleButton	{background-color:var(--mainPurple); color:#ffffff; transition-property:background-color,color; transition-duration:400ms;}
	.purpleButton:hover		{background-color:var(--mainBlue); color:var(--mainPurple)}
	
	.contentTitle	{font-size:1.5rem; font-weight:800; color:var(--mainPurpleLight)}
	.signUpInput	{font-size:1.2rem; padding:10px 20px; border-radius:var(--rounded); min-width:15ch; width:90%; max-width:45ch}
	
	#successMessage	{background-color:var(--mainBlue); border:5px solid var(--mainBlue); color:#ffffff; display:inline-block;
				.title	{color:var(--mainPurple);}
	}
	#errorMessage	{background-color:var(--mainOrange); border:5px solid var(--mainOrange); color:#ffffff;}
	.errorTextPage	{padding:1rem; border-radius:var(--rounded); margin-top:1rem;
		.title	{font-size:1.5rem; font-weight:bold; text-align:center; margin-bottom:10px}
	}
	
	/* Modal Content */
	#modal				{padding:20px; border-radius:10px; box-sizing: border-box; border:5px solid #ffffff;
							background-color:var(--mainBlack); color:#ffffff; position:relative;
	}
	.modalClose			{font-size:1.5rem; color:#ffffff; position:absolute; top:3px; right:3px; text-align:center;
							border-radius:50%; border:3px solid var(--mainBlue); width:30px; height:30px; padding-bottom:3px;
							> a {text-decoration:none; color:var(--mainBlue);}
	}
	.modal::backdrop	{background-color:rgba(54, 0, 79,1); opacity:.55;}
	.modalTitleText		{margin-bottom:10px; font-size:1.25rem}
	.modalContent		{display:flex; flex-direction:column; gap:1rem}