@charset "UTF-8";
/* Animation */
		
		
		article img {
		  animation: fadeUp 0.6s ease-out forwards;
		}

		aside h1 {
		  animation: fadeUp 0.6s ease-out forwards;
		}

		aside h2 {
		  animation: fadeUp 0.6s ease-out forwards;
		  animation-delay: 0.5s;
		}

		aside p {
		  animation: fadeUp 0.6s ease-out forwards;
		  animation-delay: 0.5s;
		}
		
		aside #resume {
			
			animation: fadeUp 0.6s ease-out forwards;
		  	animation-delay: 0.5s;
		}
		
		aside #resume-icon {
			animation: fadeUp 0.6s ease-out forwards;
		  animation-delay: 0.5s;
		}
		
		body {
			background-color: #C6DEF1;
			margin:0;

		}

		.navbar {
			position: relative;
  			z-index: 1000;
			padding:20px;
			display:flex;
			justify-content: space-between;
			
		}
		
		.logo a, .pam1 h1{
			text-decoration:none;
			font-family: 'Anton', sans-serif;
  			font-size: 36px;       
 			color: white;
  			display: flex;
  			align-items: center;
		}
		
		.period {
			color:#000;;       
 			margin-left: 5px;
  			font-weight: bold;     
  			 
		}
		.navlinks {
			color:#000;
			font-weight: bold; 
			font-size:20px;
			list-style:none;
			display:flex;
			gap:20px;
		}
		
		
		.navlinks a {
			text-decoration:none;
			color:#000;
		}
		
		/* Dropdown */
		
		.dropdown {
		  position:relative;
		}

		.dropdown-menu {
		  display: none;
		  position: absolute;
		  top: 30px;
		  left: 0;
		  background: white;
		  list-style: none;
		  padding: 10px;
		  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		  z-index: 1001;
		}

		.dropdown-menu li {
		  padding: 5px 10px;
		}

		.dropdown-menu li a {
		  color: black;
		  font-size:16px;
		}

		.dropdown-menu.show {
		  display: block;
		}
		
		/* content */
		#content {
			display: flex;
 			align-items:center;   /* vertically align image + text */
			gap:90px;           /* space between photo and text */
 			padding: 40px;
			
		}

		article img{
			border-radius: 50%;
  			object-fit: cover;
  			border: 6px solid white;
			
			

		}

		aside h1{
			color:navy;
			font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
			font-size:100px;	
			display:flex;
			flex-direction: column;
			align-items: flex-start;
			margin:0;
			padding:0;
			
			

		}


		aside h2 {
			color:black;
			font-size:80px;
			font-weight:normal;
			display:flex;
			flex-direction: column;
			align-items: flex-start;
			margin:0;
			padding:0;
			
		}
		
		aside p {
			font-size:20px;
			font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
			display:flex;
			flex-direction: column;
			align-items: flex-end;
			
		}
		
		#resume {
			display:flex;
			align-items:center;
			gap:20px;
			
		}
		
		
		#resume-btn {
			font-size:20px;
			font-weight:900;
			font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
			
			
			padding:12px 30px;
			text-decoration:none;
			
			display:inline-block;
			
			
			margin-top:20px;
			border: 3px solid navy;
			border-radius:8px;
			
			transition:0.3s;
			
		}
		
		#resume-btn:hover {
 		 background-color: navy;      
  		 color: white;                
 		 
		}
		
		#resume-icon {
			color: navy;            
  			font-size: 25px;  
			margin-top:20px;
		}

		/* =========================
   PROJECTS PAGE
========================= */

		.pam1 {
			position: relative;
			width: 100%;
			height: 400px;
			overflow: hidden;
		}

		.pam1 img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.8s ease;
		}

		/* dark overlay */
		.pam1::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			top: 0;
			left: 0;
			pointer-events: none;
		}

		/* title styling */
		.pam1 h1 {
			position:absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			font-size: 3rem;
			letter-spacing: 10px;
			z-index: 2;
		}

		/* zoom effect */
		.pam1:hover img {
			transform: scale(1.08);
		}

		/* intro text */
		.intro {
			ont-size: 20px;
			font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
			background-color: white;
			padding: 30px;
			margin-bottom: 60px; 	
		}

		/* =========================
   ANIMATIONS
========================= */

	@keyframes fadeUp {
		from {
			opacity: 0;
			transform: translateY(40px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.intro {
		opacity: 0;
		transform: translateY(40px);
		transition:all 0.8s ease;
	}

	.intro.reveal {
		opacity: 1;
		transform: translateY(0);
	}

/* =========================
   PHOTOGRAPHY PAGE
========================= */
	body {
		transition: background-color 0.6s ease;
		}

		h2 {

			text-align: center;
		}

		.gallery {
			display:flex;
			flex-direction:row;
			justify-content: center;    	

		}

		.img img{

			background-color:white;
			width:300px;
			height:400px;
			margin:60px;
			padding:20px;	

		}

	/* =========================
   Video Page
========================= */
		.videos-container {
			display: flex;
			flex-wrap:wrap;/* allow videos to wrap on smaller screens */
			justify-content: center; /* center all videos horizontally */
			gap: 20px;              /* space between videos */
			margin-top: 40px;
		}

		.vid {
			flex: 0 1 auto; /* allow video cards to shrink/grow */
		}

		/* Video Card */
		.video-card {
			position: relative;
			display: inline-block;
			overflow: hidden;
			border-radius: 15px;
			cursor: pointer;
			transition: transform 0.3s ease;

			max-width: 700px; /* limit size on large screens */
			width: 100%;       /* make it responsive */
		}

		/* Make image fit nicely */
		.video-card img {

			display: block;
			width: 100%;
			height: auto;
			object-fit: cover; /* ensures image fills nicely inside the card */
		}

		/* Play Button */
		.play-btn {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: rgba(0,0,0,0.6);
			color: white;
			font-size: 30px;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease;
		}

		/* Hover animation */
		.video-card:hover .play-btn {
			background:#ff99d8;
			transform: translate(-50%, -50%) scale(1.1);
		}

		.video-card:hover {
			transform: scale(1.02);
		}

		.video-description {
			text-align: center;
			font-size: 0.9rem;
			color: #555;
			margin-top: 10px;
			max-width: 300px; /* keeps it tidy under thumbnail */
			margin-left: auto;
			margin-right: auto;
		}

/* Optional: adjust size for smaller screens */
		@media (max-width: 768px) {
			.video-card {
				max-width: 90%; /* smaller on mobile/tablet */
			}
		}



	/*=========================
	   About PAGE
	========================= */
	
	  #container {
			display: flex;
			justify-content:flex-start;
   			align-items:center;
			gap:10px;
			padding:30px;
           
			
		}
		
		#me img {
			width:auto;
			height:600px;
		}
		
		#introduction {
			
		font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif';
		font-size: 25px;
		font-style: italic;
		line-height: 2;

		background: #fff;
		padding: 60px;

		border-radius: 20% 40% 70% 25% / 20% 60% 40% 70%;

		box-shadow: 0 25px 50px rgba(0,0,0,0.1);

		margin-left: -100px;  /* THIS pulls it closer to photo */
		position: relative;
		z-index: 1;
	
		}
		
		#base {
			margin: 50px auto;
			display: flex;
			gap: 100px;
			justify-content: center; /* centers both boxes */
			align-items: flex-start;
			
		}
		
	
		.westside {
			border: 5px solid #ffd6e8;
			padding:0px 20px 20px 20px;
			text-align:center;
		}
		
		
		
		
		#icons {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 30px;
		}
		
		
		
		.interests {
			list-style: none;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
		}

		.interests li {
			background-color: #ffd6e8;

			padding: 8px 15px;
			border-radius: 20px;
			font-size: 16px;
		}
		
		
		#introduction {
		  opacity: 0;
		  transform: translateY(50px);
		  transition: all 0.8s ease;
		}

		#introduction.visible {
		  opacity: 1;
		  transform: translateY(0);
		}
	
		/* =========================
   MOBILE RESPONSIVE DESIGN
   ========================= */

@media (max-width: 768px) {

	  /* NAVBAR */
	  .navbar {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	  }

	  .navlinks {
		flex-direction: column;
		gap: 10px;
		padding: 0;
	  }

	  .navlinks li {
		list-style: none;
	  }

	  /* HOME PAGE */
	  #content {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	  }

	  article img {
		width: 100%;
		height: auto;
	  }

	  aside {
		padding: 20px;
	  }

	  aside h1 {
		font-size: 40px;
	  }

	  aside h2 {
		font-size: 24px;
	  }

	  aside p {
		font-size: 16px;
		line-height: 1.6;
	  }

	  #resume {
		flex-direction: column;
		gap: 15px;
		align-items: center;
	  }

	  /* PROJECTS PAGE */
	  .pam1 {

		text-align: center;
		padding: 20px;

	  }

	  .pam1 img {
		width: 100%;
		height: 100%;
		object-fit:cover;
	  }

	  .intro {
		padding: 20px;
		font-size: 16px;
		line-height: 1.6;
	  }

	  /* PHOTOGRAPHY PAGE */
	  .gallery .img {
		display: grid;
		grid-template-columns:1;
		gap: 15px;
	  }

	  .gallery img {
		width: 100%;
		height: auto;
	  }



	  /* ABOUT PAGE */
	  #container {
		flex-direction: column;
		padding: 20px;
	  }

	  #me img {
		width: 100%;
		height: auto;
	  }

	  #introduction {
		margin-left: 0;
		margin-top: 20px;
		font-size: 18px;
		padding: 25px;
		border-radius: 20px;
	  }

	  #base {
		flex-direction: column;
		gap: 30px;
		padding: 20px;
	  }

	  .westside, .eastside {
		width: 100%;
	  }

	  /* CONTACT PAGE */
	  #contact-container {
		padding: 40px 20px;
	  }

	  .contact-card {
		width: 100%;
		padding: 30px;
	  }

		/* VIDEO PAGE */

		.video-card img {
		width: 100%;
	  }

	  .vid {
		padding: 0 15px;
	  }

	  /* ABOUT PAGE */
	  #container {
		display: flex;
		flex-direction: column;
		padding: 20px;
	  }

	  #me img {
		width: 100%;
		height: auto;
	  }

	  #introduction {
		margin-top: 20px;
		font-size: 14px;
	  }

	  /* BASE SECTION */
	  #base {
		display: flex;
		flex-direction: column;
		padding: 20px;
	  }

	  .westside, .eastside {
		width: 100%;
		margin-bottom: 20px;
	  }

	  /* ICONS */
	  #icons img {
		width: 28px;
		height: 28px;
		margin: 5px;
	  }


	}