html, body {
	/*Set height to full view and remove default spacing*/
	height: 100%;
	margin: 0;
	padding: 0;
}

:root {
	/*Define color variables for color palette*/
  	--deep-navy: #0C0067;
  	--lavender: #DFCDFB;
  	--blush: #F6D4D4;
 	--text-dark: #222;
  	--text-light: #fff;
}

body::before {
	/*Add a somewhat transparent fixed background image*/
  	content: '';
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background-image: url('../img/duotone1.png');
  	background-size: cover;
  	background-position: center;
  	opacity: 0.40;
  	z-index: -1;
  	pointer-events: none;
}

body {
	/*Base typograpy and layout styling*/
  	font-family: Georgia, serif;
  	margin: 0;
  	padding: 0;
  	font-size: 16px;
  	color: var(--text-dark);
  	background-color: #fdfdfd;
  	line-height: 1.5;
  	display: flex;
  	flex-direction: column;
}

h1, h2 {
	/*Heading font and color*/
  	font-family: 'DM Serif Display', serif;
  	color: var(--deep-navy);
  	font-size: 30px;
  	font-weight: 600;
  	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

h3 {
	/*Heading font and color*/
  	font-family: 'DM Serif Display', serif;
  	color: var(--deep-navy);
  	font-size: 20px;
  	font-weight: 600;
  	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

header {
	/*Header styling with deep navy background*/
  	background-color: var(--deep-navy);
  	padding-top: 2em;
  	padding-bottom: 2em;
  	text-align: center;
  	border-bottom: 2.5px solid var(--blush);
}

header h1 {
	/*Title inside header*/
  	font-size: 40px;
  	padding-bottom: 1rem;
  	color: var(--lavender);
} 

nav a {
	/*Navigation links styling*/
  	margin: 0 1em;
  	text-decoration: none;
  	color: var(--lavender);
  	font-weight: bold;
}

nav a:hover {
  background-color: #f6d4d4;
  color: #0c0067;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

main {
	/*Add spacing from the top and allow flexible growth*/
  	margin-top: 3rem;
  	flex: 1;
}

.intro-container {
	/*Intro content layout*/
  	max-width: 1000px;
  	font-size: 20px;
  	margin-left: auto;
  	margin-right: auto;
  	display: flex;
  	gap: 5rem;
  	align-items: flex-start;
  	padding: 2rem 0;
}

.text-blocks {
	/*Container for intro text*/
	flex: 1;
  	max-width: 600px;
  	display: flex;
  	flex-direction: column;
}

.intro-text p {
	/*Intro paragraph spacing*/
	margin-top: 0;
	line-height: 1.5;
	font-size: 20px;
}

.carousel-section h2 {
	margin-top: 4rem;
	margin-bottom: -0.5rem;
}

.carousel-container {
	/*Container for rotating text*/
  	position: relative;
  	overflow: visible;
  	font-size: 1em;
  	line-height: 1.5;
  	font-weight: 500;
  	color: var(--text-dark);
}

.carousel-text {
	/*Hidden text for animation*/
  	position: absolute;
  	top: 0;
  	left: 0;
  	opacity: 0;
  	transition: opacity 0.5s ease-in-out;
  	background-color: rgba(246, 212, 212, 0.5);
  	padding: 0.25rem 0.5rem;
  	border-radius: 5px;
  	white-space: nowrap;
  	line-height: 1.5;
}

.intro-image img {
	/*Style intro image as circular*/
  	width: 320px;
  	height: 320px;
  	margin-top: -1rem;
  	border-radius: 50%;
  	object-fit: cover;
  	border: 2px solid var(--blush);
}

/*For smaller screens sizing*/
@media (max-width: 768px) {
	/* Global adjustments */
	html, body {
		margin: 0;
		padding: 0 1rem;
		font-size: 16px;
	}

	header {
		text-align: center;
	}

	header nav {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: center;
	}

	.text-blocks {
		max-width: 100%;
		align-items: center;
	}

	.intro-container {
    	max-width: 100%;
    	margin-left: 0;
    	margin-right: 0;
    	padding-left: 1rem; 
    	padding-right: 1rem;
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
    	justify-content: center;
    	gap: 1rem;
	}

	.carousel-section {
	  	display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		padding: 1rem;
		text-align: left;
	}

	.carousel-section h2 {
		margin-top: 0.5rem;
	  	margin-bottom: 0.5rem;
		width: 100%;
		text-align: left;
	}

	.carousel-container {
	  	display: flex;
		flex-direction: column;
		align-items: flex-start; 
		text-align: left;       
		width: 100%;
	}

	.carousel-text {
	  	white-space: normal;
	  	word-break: break-word;
	  	font-size: 1rem;
	  	line-height: 1.4;
	  	background-color: rgba(246, 212, 212, 0.5);
	  	padding: 0.4em 0.8em;
	  	border-radius: 5px;
	  	width: fit-content;
	  	max-width: 90%;
	  	text-align: left;
	  	margin-left: 0;
	}

	/*About sections stack */
	.about-section {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1rem 0;
	}

	.intro-image {
		text-align: center;
		width: 100%;
	}

	.intro-image img {
		width: 100%;
		max-width: 250px;
		margin-top: 3rem;
		height: auto;
	}

	.about-image img {
		width: 100%;
		max-width: 250px;
		height: auto;
	}

	.accordion-header {	
  		font-size: 20px;
  	}

	.accordion-header::after {
    	right: 16px;
    	width: 20px;        
    	height: 20px;
  	}

	/* Projects section */
	.project-details-columns {
    	flex-direction: column !important;
    	align-items: center;                
    	gap: 0.25rem;                
    	max-width: 100%;                    
    	padding: 0 1rem;
  	}

  	.project-detail {
    	max-width: 100% !important;         
    	width: 100% !important;      
    	margin-bottom: 0.25rem !important; 
  	}

	  .coursework-mockups figure {
	    flex: 1 1 100%;
	    max-width: 100%;
	}

	/* Fix mockup and media layout */
	.apple-mockups img,
	.flyer-gallery img,
	.video-grid video {
		width: 100%;
		max-width: 300px;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	/* Fix layout containers if needed */
	.apple-mockups,
	.deplastified-mockups,
	.flyer-gallery,
	.video-grid {
		display: grid;
		gap: 1rem;
		justify-items: center;
		grid-template-columns: 1fr;
		padding: 0 1rem;
	}

	.deplastified-mockups img {
    	max-width: 200px; 
    	width: 100%;       
    	height: auto;
    	margin-top: 1em;
  	}

	.deplastified-mockups-horizontal figure {
		padding: 0 1rem;
	}

	.deplastified-mockups-horizontal img {
		max-width: 100%;
	}

	footer {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	footer .social-icons {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

footer {
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: var(--deep-navy);
	font-family: 'DM Serif Display', serif;
	font-weight: 200;
	color: var(--lavender);
	border-top: 2px solid var(--blush);
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

footer p {
	font-size: 15px;
	margin: 0;
}

footer .social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
}

footer .social-icons a img {
	/*Style the social icon images in the footer*/
  	width: 25px;
  	height: 25px;
  	object-fit: contain;
  	vertical-align: middle;
  	margin-top: 0.5rem;
	margin-right: 0.5rem;
  	margin-bottom: 0.5rem;
  	filter: brightness(0) saturate(95%) invert(92%) sepia(12%) saturate(350%) hue-rotate(230deg) brightness(85%) contrast(85%);
  	transition: opacity 0.3s ease;
}

footer .social-icons a img:hover {
	/*Reduce opacity on hover for icons*/
  	opacity: 0.7;
}