/*
	 Author: Beau Sweitzer
	Date: 3/2/26
	File Name: Style.css
	*/

	/* css reset */
	body, header, nav, main, footer, div, img, p, h1, h2, h3, h4, article, figure, figcaption {
		margin: 0;
		padding: 0;
		border: 0;
	}

	/* style rule for body and images */
	body {
		background-color: #faf2fd;
		word-wrap: break-word;
	}

	img {
		max-width: 100%;
		display: block;
	}	

	/* style rule for header */
	header {
		position: -webkit-sticky;
		position: sticky;
		background-color: #faf2fd;
	}

	#headernav {
		max-width: 1200px;          /* pick your content width */
		margin-inline: auto;        /* center the block */
		padding-inline: clamp(16px, 3vw, 48px);
	}

	#logo{
		float:left;
		margin: .5em;
	}

	#title{
		margin: 1em;
	}

	/* style for navigation */
	nav {
		float: none;
		/*padding: 1%;*/
		margin: 1em;
		background-color: #faf2fd;
	}

	nav ul {
		list-style-type: none;
		text-align: center;
		margin-bottom: 2%;
	}

	nav li{
		font-size: 1.5em;
		font-family: verdana, arial, sans-serif;
		font-weight: bold;
		border-top: 1px solid #815491;
		text-align: center;
	}

	nav li:first-child{
		border-top:none;
	}

	nav li a {
		display: block;
		color: #815491;
		padding: 0.5em;
		text-decoration: none;
	}

	/* Show mobile class, hide tablet-desktop class*/
	.mobile{
		display: block;
	}

	.tablet-desktop{
		display: none;
	}

	/* style rules for main content */
	main {
		max-width: 1200px;
		margin-inline: auto;
		width: 100%;
		background-color: #fff;
		padding: 2%;
		font-size: 1.25em;
		font-family: verdana, arial, sans-serif;
	}

		article {
			margin: 2em;
		}

	h1 {
		color: #815491;
		font-family: Roboto, sans-serif;
		font-weight: 900;
		font-size: 2.25rem;
	}

	h2 {
		color: #815491;
		font-family: roboto, sans-serif;
		font-weight: 700;
		font-size: 1.75rem;
	}

	h3 {
		color: #815491;
		font-family: Roboto, sans-serif;
		font-weight: 500;
		margin-bottom: 5px;
		font-size: 1.25;
	}

	p {
		line-height: 150%;
		font-family: "Libre Baskerville", serif;
		color: #000000;
		text-decoration: none;
		text-indent: 2em;
		font-size: 1rem;
		max-width: 65ch;
		}
	
	.no-indent {
		text-indent: 0;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: .25rem;
		padding: 1rem;
	}

	.box {
		Background: #faf2fd;
		border: 1px solid #877090;
		padding:1rem;
		text-align: center;
		border-radius: 20px;
		margin:20px;
	}
	
	.box-link {
		margin: 0;
	}
	
	.box-link:hover {
		background-color: #eee3f1;
	}

	.indent {
		margin-left: 15px;
	}

	.emphasis {
		color: #815491;
		font-weight: bold;
		margin-bottom: 1em;
	}

	.warning {
		color: #FF0000;
		font-weight: bold;
	}
	
	.no-underline {
		text-decoration: none;
	}

	#shadow {
		text-shadow: 5px 5px 5px #b3b3b3;
	}

	.container {
		max-width: 1200px;
		margin-inline: auto;
		width: 100%;
	}

	#about{
		text-align: center;
		background-color: #EEE3F1;
		border: solid;
		border-color: #877090;
		border-radius: 20px;
		padding: 1em;
	}

	#home-photo {
		border-radius: 20px;
		width: 100%;
		height: auto;
		max-width: 320px;
	}

	.bulk-text{
		display: block;
		margin: 1.5em;
		padding: 0.25em;
	}	

	.external-link{
		font-weight: bold;
		text-decoration: none;
		color: #815491
	}

	#intro {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5em;
		font-size: 1.25em;
		background-color: #eee3f1;
		border: solid 2px #877090;
		border-radius: 20px;
		margin: 1.5em;
		padding: 1em;
	}
	
	#intro h2, #intro h3 {
		text-align: center;
	}
	
	.intro-text {
		flex: 1;
	}

	#certs{
		line-height: 150%;
		background-color: #faf2fd;
		padding: 2em;
		border-radius: 10px;
	}

	.center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; 
		text-align: center;
		padding: 1rem;
	}

	#map {
		width: 600px;
		height: 600px;
		max-width: 95%;
	}

	#form {
		margin-top: 2%;
		background-color: #eee3f1;
		padding: 2%;
	}
	
	
	#project-button {
		display: block;
		width: 20%;
		border: solid;
		border-color: #815491;
		border-radius: 20px;
		text-align: center;
		background-color: #eee3f1;
	}
	
	#project-button:hover{
		background-color: #877090;
		border-color: #877090;
		color: #eee3f1;
	}
	
	#project-button h3 {
			margin: 0.5em;
	}
	
	.title {
		text-align: center;
		margin: 1em auto;
		text-shadow: 5px 5px 5px #b3b3b3;
	}
	
	#seagull-video {
		max-width: 400px;
	}
	
	/* Style rules for form elements */
	fieldset, input, textarea {
		margin-bottom: 2%;
	}
	
	fieldset {
		max-width: 95%;
	}
	
	fieldset legend {
		font-weight: bold;
		font-size: 1.25em;
	}
	
	label{
		display: inline-block;
		padding-top: 1%;
	}
	form .box {
		Background: none;
		border: none;
		padding: 0;
		margin: 0;
		text-align: left;
		max-width: 95%;
	}
	
	textarea {
		width: 95%;
	}
	
	form #submit {
		margin: 0 auto;
		border: none;
		display: block;
		padding: 1%;
		background-color: #815491;
		font-size: 1em;
		border-radius: 10px;
	}
	
	/* Style rules for the footer */
	footer {
		font-family: "Libre Baskerville", sarif;
		font-size: .75em;
		text-align: center;
		color: #815491;
		padding: 0 1em;
	}

	footer p a {
		color: #815491;
		text-decoration: none;
		line-height: 200%;
	}

	/* Media query for Tablet viewport */
	@media screen and (min-width: 730px), print {
		
		/* tablet viewport: show tablet-desktop class, hide mobile class */
		.tablet-desktop {
			display: block;
		}
		
		.mobile {
			display: none;
		}
		
		/* Tablet viewports: style rule for header */
		header {
			position: static;
			/*padding-bottom: 2%;*/
		}
		
		/* Tablet viewports: style rule for nav area */
		nav li {
			border-top: none;
			display: inline-block;
			border-right: 1px solid #815491;
		}

		nav li:last-child {
			border-right: none;
		}
		
		nav li a {
			padding: 0.1em 0.5em;
		}
		
		/* Tablet viewport: style rules for main content area */
		main ul {
			margin: 0 0 4% 10%;
		}
		
		.bulk-text {
			line-height: 2em;
		}
		
		#home-photo {
		margin: 1em;
		border-radius: 20px;
		width: 100%;
		height: auto;
		}
		
		#intro {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.5em;
		font-size: 1.25em;
		background-color: #eee3f1;
		border: solid 2px #877090;
		border-radius: 20px;
		margin: 2em;
		padding: 1em;
		}
	
		/* Tablet viewport: style rules for table */
			table {
				border: 1px solid #000;
				border-collapse: collapse;
				margin: 0 auto;
				width: 100%;
			}
			
			caption {
				font-size: 1.5em;
				font-weight: bold;
				padding: 1%;
			}
			
			th, td {
				border: 1px solid #000;
				padding: 2%;
			}
			
			th {
				background-color: #877090;
				color: #fff;
				font-size: 1.15em;
			}
			
			tr:nth-child(odd) {
				background-color: #faf2fd;
			}
	}

	/* Media query for tablet-desktop viewport */
	@media screen and (min-width: 1000px), Print {
		
		/* tablet-desktop Viewport: show tablet-desktop class, hide mobile class */
		.tablet-desktop {
			display: block;
		}
		
		.mobile {
			display: none;
		}
		
		/* tablet-desktop Viewport: Style rule for header */
		header {
			position: static;
			/*padding-bottom: 2%;*/
			height: 100%;
		}
		
		#head-caption {
			max-width: 150px;
			/*padding: 1em;*/
		}
		
		/* tablet-desktop Viewport: Style rules for nav area */
			nav li {
				border-top: none;
				display: inline-block;
				border-right: 1px solid #815491;
			}
			
			nav li:last-child {
				border-right: none;
			}
			
			nav li a {
				padding: 0.1em 0.5em;
			}
		
		
		nav ul {
			text-align: right;
		}
		
		nav li a:hover {
			color: #eee3f1;
			background-color: #877090;
			border-radius: 10px;
		}
		
		#home-photo {
		margin: 1em;
		border-radius: 20px;
		width: 100%;
		height: auto;
		}
		
		#intro {
		display: flex;
		align-items: center;
		gap: 1.5em;
		font-size: 1.25em;
		background-color: #eee3f1;
		border: solid 2px #877090;
		border-radius: 20px;
		margin: 2em;
		padding: 1em;
		}
		
	}

	/* Media query for Large tablet-desktop viewports */
	@media screen and (min-width: 1921px), print {
		
		#container {
			width: 1920px;
			margin: 0 auto;
			}
		
		#home-photo {
		margin: 1em;
		border-radius: 20px;
		width: 100%;
		height: auto;
		}
	}

	/* Media query for print */
	@media print {
		
		body {
			background-color: #fff;
			color: #000;
		}
	}