/* Font imports */
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

 /* Preconnect for performance optimization */
 @import url('https://fonts.googleapis.com');
 @import url('https://fonts.gstatic.com');


 * {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }

 body,
 html {
 	margin: 0;
 	padding: 0;
 }

 img,
 video {
 	max-width: 100%;
 	height: auto;
 	display: block;
 }

 body {
 	font-family: "Quicksand", sans-serif;
 }

 .wrapper,
 .logo {
 	display: block;
 	max-width: 100%;
 }
.sticky {
	position: sticky;
	top: 0; 
	background: white; 
	z-index: 1;
}
 header {
 	color: black;
 	width: 100%;
 	display: block;
 	padding: 16px;
 	margin-right: initial;
	overflow: visible;
 }

 .u-m-t-32 {
 	margin-top: 32px;
 }

 .content {
 	width: 100%;
 	padding: 0 24px;
 	position: relative;
 }

 .content h1 {
 	border-bottom: #b4b4b4 1px solid;
 	padding-bottom: 8px;
 }

 header .logo img {
 	width: 250px;
 	margin: 0 auto;
 }

 .intro {
 	margin: 0 auto;
 	font-size: 18px;
 	letter-spacing: 1px;
 	position: initial;
 	width: 100%;
	padding: 8px;
 }

 .video-player {
 	text-align: center;
 	padding: 0;
 }

 .video-player h2 {
 	margin-left: auto;
 	margin-right: auto;
 }

 video {
 	width: 100%;
 	box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
 	display: block;
 	margin: 0 auto;
 }

 .menu-button {
	 display: block;
	 border: none;
	 padding: 16px;
	 cursor: pointer;
	 text-align: center;
	 width: 100%;
	 font-size: 18px;
	 color: black;
	}
	
nav {
	margin: 32px 0 16px 0;
	background: white; 
	padding: 10px;
}
	
 nav ul {
	display: none;
 	padding: 0;
 	margin: 0;
 	list-style: none;
	text-align: center;
	transition: max-height 0.3s ease-out, opacity 0.3s ease-in-out;
	transform: translateY(-10px);
 }

 nav ul.show {
	display: block;
	max-height: 300px;
	opacity: 1;
	transform: translateY(0);
}
.animate-menu {
	transition: max-height 0.3s ease-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

 nav ul li a {
 	color: black;
 	text-decoration: none;
 	font-weight: bold;
 	font-size: 24px;
 	padding: 8px;
 	display: block;
 }

 footer {
 	text-align: center;
 	color: black;
 	padding: 32px 0;
 	width: 100%;
 }

 .gallery {
 	display: grid;
 	grid-template-columns: repeat(1, 1fr);
 	gap: 32px;
 	padding: 16px 0;
 }

 .thumbnail {
 	width: 100%;
 	cursor: pointer;
 	transition: transform 0.3s ease;
 }

 .thumbnail:hover {
 	transform: scale(1.1);
 }

 .modal {
 	display: none;
 	position: fixed;
 	z-index: 1;
 	padding-top: 100px;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.7);
 	overflow: auto;
 	opacity: 0;
 	transform: scale(0.9);
 	transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .modal-content {
 	margin: auto;
 	display: block;
 	max-width: 1200px;
 	padding: 8px 8px 0 8px;
 	background-color: #f3f3f3;
 	position: relative;
 	opacity: 0;
 	transition: opacity 0.3s ease;
 }

 .modal-footer {
 	padding: 16px 0;
 	background-color: #f3f3f3;
 }

 .modal img {
 	width: 100%;
 }

 /* Loading spinner */
 #loader {
 	display: none;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 50px;
 	height: 50px;
 	border: 4px solid rgba(255, 255, 255, 0.3);
 	border-top: 4px solid white;
 	border-radius: 50%;
 	animation: spin 1s linear infinite;
 }

 #myVideoloader {
 	display: none;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 50px;
 	height: 50px;
 	border: 4px solid rgba(170, 170, 170, 0.3);
 	border-top: 4px solid rgb(0, 0, 0);
 	border-radius: 50%;
 	animation: spin 1s linear infinite;
 }

 @keyframes spin {
 	from {
 		transform: translate(-50%, -50%) rotate(0deg);
 	}

 	to {
 		transform: translate(-50%, -50%) rotate(360deg);
 	}
 }

 .border-thin {
 	border: 1px solid #cccccc;
 }

 .h2-separator {
 	margin: 48px 0 0 0;
 }

 .h3-separator {
	margin: 32px 0 0 0;
}

 .btn-thumbnail {
 	border: 1px solid #cccccc;
 	cursor: pointer;
 	display: block;
 	transition: transform 0.3s ease;
	width: fit-content;
	height: fit-content;
 }

 .btn-thumbnail:hover {
 	transform: scale(1.1);
 }

 .btn-thumbnail.left {
 	background-position: left;
 }

 .btn-thumbnail.right {
 	background-position: right;
 }

 .contact-wrapper {
 	display: block;
 	align-items: center;
 	padding: 40px 0;
 }

 .contact-wrapper ul {
 	list-style: none;
 	padding: 0;
	margin: 0 0 32px 0;
	width: 100%;
	margin-left: initial;
 }

 .contact-wrapper ul li {
 	text-align: center;
 }

 .contact-wrapper ul li a {
 	text-decoration: none;
	color: black;
	font-weight: bold;
	font-size: 21px;
	padding: 4px;
	display: block;
	transition: font-size 0.3s ease-in-out, letter-spacing 0.4s ease-in-out;
 }
 .contact-wrapper ul li a:hover {
 	font-size: 21px;
 	letter-spacing: 1px;
 }	

 .resume-link { text-decoration: none; font-weight: bold; font-size: 18px; color: black; transition: font-size 0.3s ease-in-out, letter-spacing 0.4s ease-in-out; }
 .resume-link:hover { letter-spacing: 1px; }

 .contact-img {
	width: 270px;
	margin: 0 auto;
 }

 @media (min-width: 768px) {

	.menu-button {
		display: none;
	}

 	.wrapper {
 		display: flex;
 	}

 	header {
 		width: 250px;
 		margin-right: 32px;
 	}

 	nav {
 		margin: 46px 0;
 	}

 	nav ul {
 		display: block;
		text-align: left;
 	}

 	nav ul li a {
		font-size: 21px;
		background-color: initial;
		transition: font-size 0.3s ease-in-out, letter-spacing 0.4s ease-in-out;
		color: black;
 	}

	 nav ul li {
		border-right: initial;
	}

	nav ul li a:hover {
		font-size: 24px;
		letter-spacing: 1px;
	}

 	.intro {
 		position: absolute;
 		width: 250px;
 		top: 430px;
		font-size: 16px;
 	}

 	.video-player {
 		padding: 20px;
 	}

 	video {
 		width: 80%;
 	}

 	.content {
 		width: calc(100vw - 280px);
 		padding: 40px 24px 0 0;
 	}

 	.gallery {
 		grid-template-columns: repeat(2, 1fr);
 		gap: 56px;
 	}
	 .contact-wrapper {
		display: flex;
	}
	.contact-wrapper ul {
		width: 30%;
	}
	.contact-img {
		margin: initial;
	}
 }

 /* @media (min-width: 1024px) {
 	.gallery {
 		grid-template-columns: repeat(2, 1fr);
 	}
 } */