html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	scroll-behavior: smooth;
	scroll-margin-top: 4em;
	
	}


body {
	
	display: flex;
	line-height: 1;
	background: white;
}


/* basic  */

		@-ms-viewport {
			width: device-width;
		}

	body{ 
	display: flex;
	
	flex-direction: column;
	max-width: auto;
		margin: 0;
		padding: 0;
		border: 0;
	}

	h1 {
		display: flex;
		justify-content: flex-end;
		color: blue;
	}

	p {
	display: flex;
	line-height: 1.6;
	font-family: 'Arial', sans-serif;
	text-shadow: none;
	letter-spacing: normal;
	}

	section#FrontPage, section#Mission, section#Projects, section#TheBoys, section#Contact {
		min-height: 414px;
	}

	/* Privacy policy page  */

	#PrivacyPolicy {
		display: block;
		padding-top: 7em;
		width: 100%;
		height: 100vh;
	}

	iframe{
		width: 100vw;
		height: 100vh;
		border: none;
	}


	/* Navigation bar  */
	#Header {
	position: fixed;
	top: 0;
    left: 0;
	width: 100%;
	display: flex;
	height: auto;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	padding: 0.5em;
	background-color: #5ce1e6;
	z-index: 1000; 
	}

	a {
		text-decoration: none;
		color:black;
	}

	
	#logo{
		font-size: 3.5em;
	}	

	#nav.pages {
		display: flex;
		flex-grow: 0.3;
		flex-direction: row;
		justify-content: space-around;
		color: white;
		background-color: black;
		border-radius: 1em;
		gap:1em;
	}

	#nav.pages div a {
		color: white;
	}

	#nav.pages div a:hover, #logo:hover {
			opacity: 0.7;
		}

	

	/* Front Page */
	#FrontPage {
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 100vh;
		width: 100%;
	}
	
		#FrontPage .Subheading{
			position: absolute;
			font-size: 2em;
			top: 25%;
		}
		
		#FrontPage .container{
			height: 100%;
			flex-direction: column;
			align-items: center;
			align-content: flex-end;	
		}

		#FrontPage .img{
			max-width: 100%;  /* scale down if container is smaller */
			height: 80%;     /* keep the aspect ratio */
			display:flex;
			justify-content: center;
			align-items: flex-end;
		}

		#FrontPage img.FrontPageImage{
			max-width: 100%;  /* scale down if container is smaller */
			height: 100%;     /* keep the aspect ratio */
			display:flex;
			justify-content: center;
			
		}
		


	/* Mission Page  */
	#Mission {
		display: block;
		background: #5ce1e6 url("images/overlay.png");
		width: 100%;
		height: 100vh;
	}

		#Mission #mission_content{
			padding-top: 3em;
			display: flex;
			justify-content:space-evenly;
			align-items: center;
		}

		#Mission #circle {
			display: flex;
			width: 35vw;
			aspect-ratio: 1/1;
			border-radius: 50%;
			background-color: white;
			justify-content: center;
			align-items: center;
			text-align: center;
			
		}
		
		#Mission #circle .title{
			width:90%;
			font-size: 9vw;
			padding-bottom: 40px;
			text-align: center;
		}
		

		#Mission .container aside {
			text-align: center;
			font-size: 2em;
			overflow:visible;
			padding: 0.5em;		
			border-radius: 25px;
			background: #abf6f8 url("images/overlay.png");

		}

		#Mission .container section {
			margin-top: 2em;
			border: 4px solid black;
			background: white url("images/overlay.png");
			font-size: 2em;
			font-weight: bold;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 0.25em;
			max-height: 2.5em;
				
		}

		#Mission .container section ul{
			display: flex;
			gap: 0.25em;
		}

		#Mission .container {
			max-width: 50em;
			
		}

		#Mission .fa{
			font-size: 30px;
			width: 50px;
			text-align: center;
			text-decoration: none;
			margin: 5px 2px;
			border-radius: 50%;
		}

		#Mission .fa:hover {
			opacity: 0.7;
		}

		
	/* project page  */
	#Projects {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;		
	}

		#Projects .title{
			font-size: 4em;
			height: 1.5em;
			align-content: center;
			}
	
		#Projects .portfolio-item .style3{
			font-size: 2em;
			font-weight: bold;
		}

		#Projects .container .portfolio-item {
			display: flex;
			flex-direction: column;
			justify-content:space-around;
		}

		#Projects .container .portfolio-item aside {
			max-height: 0;
			margin-top: 0.5em;
			overflow: hidden;
			transition: max-height 0.3s ease;
			position: absolute;
			display: flex;
			align-self: flex-start;
			color:white;
			font-size: 30px;
			background:rgba(0,0,0,0.6); 
			height: 100%;
			max-width: 1104px;
			width: 100%;
		}

		#Projects #mighty .portfolio-item #toggleAside{
			display: block;
			display: block;
			background-color: #5ce1e6;
			max-width: 1104px;
			color: white;
			border: none;
			cursor: pointer;
			border-radius: 5pt;
		}

		/* No borders  */
		#Projects #mighty .portfolio-item aside {
			border: none;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		#Projects .container .portfolio-item aside.show {
			max-height: 100%; /* adjust for content */
		}

		#Projects #mighty{ 
			height: 100vh;
			display: flex;
			flex-direction: column;
			padding-top: 0em;
			gap: 0em;
		}
		
		#Projects iframe{
			max-width: 1104px;
			width: 100%;
		}
		



	/* the boys  */
	
	#TheBoys {
		margin-top: 1em;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		background: #5ce1e6 url("images/overlay.png");
		width: 100%;
		height: 100vh;
	}

	#TheBoys img {
			display: block;
			width: 100%;
			max-width: 400px;
			height: 75vh;
			min-height:735px;
		}


		#TheBoys .container {
			display: flex;
			flex-grow: 2;
			flex-direction: row;
			justify-content: space-evenly;
		}

		#TheBoys .title {
			font-size: 4em;
			text-align: center;
			height: 1.5em;
			align-content: center;
		}

		#TheBoys .corp_img .image-container{
			position: relative;
			width: 100%;
			height: auto;
			overflow: hidden;
			border-radius: 10px;
			margin: 1em 0em;
		}

			/* caption hidden at first */
		#TheBoys .caption {
			position: absolute;
			bottom: 0;
			left: 0;
			Height:70%;
			width: 100%;
			background: rgba(0, 0, 0, 0.7);
			color: white;
			transform: translateX(-100%);    /* start completely off-screen */          /* hide until expanded */
			transition: transform 0.5s ease; /* smooth expand */
		}

		/* reveal caption on hover */
		#TheBoys .image-container:hover .caption {
			transform: translateX(0);     
			max-height: 100%; /* expands upward */
		}




	/* Contact Page  */

	#Contact { 
		display: flex;
		flex-direction: column;
		background: white url("images/overlay.png");
		height: 100vh;
		
		
		}

		#Contact .title{
			height: 1.5em;
			font-size: 4em;
			display: flex;
			align-content: center;
			align-items: center;
			margin-left: 0.2em;
		}

		#ContactForm {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			margin-left: 1em;
		}

		#ContactForm div.form {
			height: 100%;
			align-items: stretch;
		}

		#ContactForm .message_page {
			height: 100%;
			display: flex;
			flex-direction: column;
			gap: 2em;
		}

			#ContactForm #name {
				height: 4em;
			}

			#ContactForm #email {
				height: 4em;
			}

			#ContactForm #subject {
				height: 4em;
			}

			#ContactForm .message #message {
			width: 75vw;
			flex-grow:1;
			}


			#ContactForm .message {
				display:flex;
				flex-direction: column;
				flex-grow: 1;
			}

				#ContactForm .message #contact-message {
					width: 50%;
					height: 100%;
					gap: 3em;
				}

				#ContactForm .actions {
					height: 3em;
					display: flex;
					gap: 2em;
					margin: 1em 0em; 
				}

			#ContactForm #top-contact {
				display: flex;
				flex-direction: row;
				gap: 1em;
			}

			
	/* Footer Page  */

	section#Footer {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background: #5ce1e6 url("images/overlay.png");
		width: 100%;
		padding-top: 1em;
		gap: 0em;
		height: 20vh;
		
		
	}

	section#Footer .container{
		display: flex;
		align-content: flex-start;
		margin-left: 1em;
		
	}

		section#Footer .link_line{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 1em;
			
		}


		section#Footer .links{
			display: flex;
			align-items: center;
		}


		section#Footer .fa{
			font-size: 30px;
			width: 25px;
			text-align: center;
			text-decoration: none;
			margin: 5px 2px;
			border-radius: 50%;
			
		}

		/* section#Footer .fa:hover {
			opacity: 0.7;
		} */


/* Adjust for height of viewport  */
 @media (max-height: 980px) {
	
		
	section#Mission, section#Projects, section#TheBoys, section#Contact {
		min-height: 980px;
    }

	section#FrontPage{
		max-height: 150vh;
	}

 }

 /* Adjust for width for mission page */
 @media (max-width: 1300px) {

	
	#Mission {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		width: 100%;
		padding: 0em;
	}

		#Mission #mission_content{
			padding-top: 0.1em;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			}

		#Mission #circle {
			margin: 1em 0em;
			width: 50vw;
			aspect-ratio: 1 / 1 ;
			border-radius: 50%;
			
		}

		#Mission #circle .title{
			font-size: 13vw;
			text-align: center;
			padding-top: 20px;
		}

		#Mission .container aside {
			font-size: 1.5em;
			margin-bottom: 1em;
			
		}

		#Mission .container section {
			font-size: 1.5em;
			margin-bottom: 1em;
			display: flex;
			flex-direction: row;
		}

		#Mission .container {
			max-width: 90%;
			border: none;
			padding: 0;
			margin-top: 2em;
		}

		
	
	
 }



/* Mobile tablet view  */

@media only screen and (max-width: 980px) {
	body {
		display: flex;
		max-width: auto;
		margin: 0;
		padding: 0;
		border: 0;
	}

	html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	scroll-behavior: smooth;
	scroll-margin-top: 6em;
	}

	/* Mobile tablet view Navigation bar  */
	#Header {
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		width: 100%;
		padding: 1.75em 0 1.75em;
		overflow: hidden;
		position: fixed;   /* or fixed/sticky if you want */
	}

	#logo{
		Display:flex;
		margin-left: 1rem;
		justify-content: flex-start;
		font-size: 2.4em;
	}

	#nav.pages{
		margin-top: 1em;
		display:none;
	}

		#nav.pages.active {
			display: flex;
			flex-direction: column;
			padding-top: 1em;
			background-color: #333;
			width:100%;
			color: white;
			align-items: stretch;
		}

		#nav.pages div a {
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
			display: block;
			
		}
		
		#Header a.button {
			background: black;
			display: block;
			border-radius: 45%;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			margin: 1em;
			padding: 1.346rem 2rem;
		}

		.button .bar{
			display: block;
			width: 25px;
			height: 2px;
			margin: 3px 0;
			background-color:white;
		}

		.button:hover .bar{
			display: block;
			width: 25px;
			height: 2px;
			margin: 3px 0;
			background-color: orange;
		}

		#nav a:hover {
			background-color: #ddd;
			color: black;
		}

	
	/* Mobile tablet view Front Page  */
	#FrontPage {
		padding-top: 10em;
		height: 88vh;
	}

		#FrontPage .container{
			height: 100%;		
			}

		/* Figure out how to make image scale with viewport height  */

	/* Mobile tablet view Mission Page  */
	

	/* Mobile tablet view Project Page  */
	#Projects {
		height: auto;
		width: 100%;
		flex-direction: column;
		padding: 1em 0em;
	}

		#Projects .title{
			align-self: center;
		}

		#Projects .container .portfolio-item {
			display: flex;
			flex-direction: column;
			justify-content:space-around;
		}

		#Projects .container .portfolio-item aside {
			max-height: 0;
			margin-top: 0.8em;
			overflow: hidden;
			transition: max-height 0.3s ease;
			position: absolute;
			display: flex;
			align-self: center;
			color:white;
			font-size: 20px;
			background:rgba(0,0,0,0.6); 
			height: 100%;
			width: 100%;
		}


		#Projects #mighty .portfolio-item #toggleAside{
			display: block;
			display: block;
			background-color: #5ce1e6;
			color: white;
			border: none;
			cursor: pointer;
			border-radius: 5pt;
			
		}

		/* No borders  */
		#Projects #mighty .portfolio-item aside {
			border: none;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		#Projects .container .portfolio-item aside.show {
			max-height: 100%; /* adjust for content */
		}

		#Projects section img {
			width: 100%;
		}

		#Projects #mighty{ 
			height: 100vh;
			display: flex;
			flex-direction: column;
			padding-top: 1em;
			gap: 5em;
		}
		
		#Projects iframe{
			width: 100%;
		}


		
	/* Mobile tablet view The Boys  */
	#TheBoys {
		height: auto;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

		#TheBoys img {
			display: block;
			width: 100%;
			height: auto;
			min-height:0;
		}

		#TheBoys .container{
			display: flex;
			flex-direction: column;
		}

		#TheBoys .corp_img .image-container{
			position: relative;
			display: flex;
			justify-content: center;
			width: 60vw;
			height: auto;
			overflow: hidden;
			border-radius: 10px;
			margin: 1em 0em;
		}

			/* caption hidden at first */
		#TheBoys .caption {
			position: absolute;
			bottom: 0;
			left: 0;
			Height:70%;
			width: 100%;
			background: rgba(0, 0, 0, 0.7);
			color: white;
			transform: translateX(-100%);    /* start completely off-screen */          /* hide until expanded */
			transition: transform 0.5s ease; /* smooth expand */
		}

		/* reveal caption on hover */
		#TheBoys .image-container:hover .caption {
			transform: translateX(0);     
			max-height: 100%; /* expands upward */
		}
	
	/* Mobile tablet view Contact Page  */
	#Contact{
		height:100vh;
		
	}

		#Contact .title{
			align-self: center;
			margin-left: 0em;
		}

		#ContactForm {
			width: auto;
			padding: 0em 1.5em ;
			margin-left: 0em;
			
		}

		

		#ContactForm #top-contact{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: stretch;
		}

		#ContactForm #top-contact #name {
			width: 100%;
		}

		#ContactForm #top-contact #email {
			width: 100%;
		}

		#ContactForm #top-contact #subject {
			width: 100%;
		}

		#ContactForm .message #message {
			width: 100%;
			max-height: 50%;
		}

		/* footer in tablet view  */
		section#Footer {
			
		}
		

}





/* Mobile phone view  */

	@media only screen and (max-width: 414px) {
		html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		scroll-behavior: smooth;
		scroll-margin-top: 4.5em;
		}


		body {
			display: flex;
			max-width: auto;
			
		}
		
		/* Mobile phone view navigation bar  */
			#Header {
			flex-direction: column;
			align-items: flex-start;
			height: auto;
			width: 100%;
			padding: 1.5em 0 1.5em;
			overflow: hidden;
			position: fixed;   /* or fixed/sticky if you want */
		}

		#logo {
			font-size: 1.5em;
		}

		#nav.pages{
			margin-top: 1em;
			display:none;
		}

		#nav.pages.active {
			display: flex;
			flex-direction: column;
			padding: 1em 0em;
			background-color: #333;
			width:100%;
			color: white;
			align-items: stretch;
		}

		#nav.pages div a {
			padding: 4px 16px;
			text-decoration: none;
			font-size: 1em;
			display: block;
		}

		#Header a.button {
			background: black;
			display: block;
			border-radius: 45%;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			margin: 1.4em;
			padding: 0.3rem;
		}

		.button .bar{
			display: block;
			width: 17px;
			height: 1.5px;
			margin: 3px 2.5px;
			background-color:white;
		}

		.button:hover .bar{
			display: block;
			width: 17px;
			height: 1.5px;
			margin: 3px 2.5px;
			background-color: orange;
		}

		#nav a:hover {
			background-color: #ddd;
			color: black;
		}


	/* Mobile phone view Front Page */
	#FrontPage{
		padding-top: 5em;
		height: 88vh;
	}
	
		#FrontPage .Subheading{
			font-size: 1.4em;
		}

	
	/* Mobile phone view Mission Page  */

		#Mission #mission_content{
			padding-top: 0em;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			}

		#Mission .container {
				max-width: 90%;
				border: none;
				padding: 0;
				margin-top: 0em;
			}

		#Mission .container section h3{
			display: none;
		}

		#Mission .fa{
			font-size: 30px;
			width: 40px;
			text-align: center;
			text-decoration: none;
			margin: 5px 2px;
			border-radius: 50%;
		}


	/* Mobile phone view project page  */
	#Projects {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		padding: 1em 0em;
	}

	#Projects .container .portfolio-item aside{
		margin-top: 0.1em;
		font-size: 17px;
	}

	#Projects .container .portfolio-item .style3{
		font-size: 1.25em;
		font-weight: bold;

	}

		#Projects #mighty{ 
			display: flex;
			flex-direction: column;
			padding-top: 1em;
			gap: 2em;
			height: auto;
			}

		#Projects .title{
				font-size: 2.5em;
			}

		#Projects iframe{
			width: 100%;
		}


		
/* Mobile phone view The Boys  */
	#TheBoys {
		height: auto;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

	#TheBoys img {
			display: block;
			width: 100%;
			height: auto;
			min-height:0;
		}

		#TheBoys .title{
			font-size: 2.5em;
		}


	/* Mobile phone view Contact Page  */
	#Contact{
		height: 100vh;
		
	}

		#ContactForm {
				width: auto;
				padding: 0em 0.5em ;
			}

		#ContactForm #name, #ContactForm #email, #ContactForm #subject {
				height: 2em;
			}



		#ContactForm .form .message_page {
			height: 100%;
			gap: 1em;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			
			
		}

		#Contact .title{
			align-self: center;
			font-size: 2.5em;
			
		}

		#ContactForm .form #top-contact{
			margin-right: 0.65em;
			width: 80vw;
			align-self: center;
			
		}

		

		#ContactForm .message #message {
			width: 83vw;
			max-height: 50%;
			align-self: center;
			
			
		}

		/* footer in phone view  */
		section#Footer {
			
		}

}