:root {
	/* Base Colors */
	--primary-bg: #1a1a1a;
	/* Black */
	--secondary-bg: #EEEEEE;
	/* White */
	--accent-bg: #a32424;
	/* Red */

	/* Text Colors */
	--text: #eee7e7;
	/* White */
	--background: #121212;
	/* Black (used as text on white backgrounds) */

	/* Highlight/Secondary Accent */
	--highlight: #be6363;
}

/*Display functionaltiy*/
.display {
	display: flex;
	flex-direction: column;
}

html {
	overflow-x: hidden;
}


/* Title box (top)*/
.title-card {

	font-family: 'Montserrat', sans-serif;
	padding: 1rem;
	border-bottom: 1px solid #EAEFEF;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	min-height: 100vh;
	height: clamp(400px, 55vw, 700px);

	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;

	scroll-snap-align: start;
}

/* Background opaque effect*/
.title-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
	z-index: 0;
}

.title-card>* {
	position: relative;
	z-index: 1;
}




@keyframes slideInFromLeft {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.proj-title {
	animation: slideInFromLeft 1.2s ease-out forwards;
	font-weight: bold;
	font-size: clamp(2rem, 5vw, 4rem);
	color: whitesmoke;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.proj-technologies {
	animation: slideInFromLeft 1.4s ease-in forwards;
	padding-top: 0.5rem;
	font-size: clamp(1.2vh, 3.6vw, 6vh);
	color: whitesmoke;
	font-style: italic;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.proj-date {
	animation: slideInFromLeft 1.7s ease-in forwards;
	padding-top: 0.5rem;
	font-size: clamp(0.9vw, 1.5vw, 1.8vw);
	color: whitesmoke;
	font-style: italic;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
	.proj-title {
		font-size: clamp(1.5rem, 10vw, 5rem);
	}

	.proj-technologies {
		font-size: clamp(1rem, 4.5vw, 10rem);
	}

	.proj-date,
	.proj-description {
		font-size: clamp(1vw, 3vw, 6vw);
	}
}

@media (max-width: 430px) {
	.proj-title {
		font-size: clamp(1.2rem, 8vw, 2rem);
	}
}

.summary-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	min-height: clamp(600px, 85vh, 900px);
	padding: clamp(1rem, 5vw, 3rem);
	background-color:var(--primary-bg);
}

.summary-title {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--secondary-bg);
}

.summary-card-content {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

.summary-left,
.summary-right {
	flex: 1;
}

.summary-left {
	color: var(--text);
}


.summary-left .proj-description {
	font-size: clamp(1rem, 1.8vw, 1.3rem);
	line-height: 1.6;
}

.summary-right .demo-video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	/* 16:9 ratio */
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.demo-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


@media (max-width: 768px) {
	.summary-card-content {
		flex-direction: column;
		gap: 1rem;
		align-items: center;

	}

	.summary-title {
		font-size: clamp(2vw, 8vw, 10vw);
	}

	.summary-left {
		font-size: larger;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}


	.summary-right {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

}

@media (max-width: 430px) {}

/* Design Carousel Container */
.design-card {
	padding: 4rem 2rem;
	color: var(--text);
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--accent-bg);
}

.design-title {
	font-size: 3rem;
	font-weight: bold;
	color: var(--text);
	margin-bottom: 2rem;
}

/* Wrapper holds the track + arrows */
.design-carousel-wrapper {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}

/* Track of Slides */
.design-carousel-track {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

/* Individual Slide */
.design-carousel-slide {
	min-width: 100%;
	padding: 2rem;
	box-sizing: border-box;
	text-align: left;
	background-color: #1e1e1e;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	color: var(--text);
}

.design-carousel-slide h3 {
	font-size: 1.8rem;
	color: var(--yellow);
	margin-bottom: 1rem;
}

.design-carousel-slide p {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #ddd;
}

.design-carousel-slide img {
	max-width: 100%;
	max-height: 300px;
	margin: 1rem auto;
	display: block;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Navigation Arrows */
.design-carousel-arrow,
.design-carousel-left {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.08);
	border: none;
	font-size: 2.5rem;
	color: var(--highlight);
	cursor: pointer;
	padding: 0.5rem 1rem;
	z-index: 10;
	transition: background-color 0.3s ease;
}

.design-carousel-arrow:hover,
.design-carousel-left:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.design-carousel-left {
	left: 10px;
}

.design-carousel-arrow.right {
	right: 10px;
}


.design-carousel-dots {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	gap: 0.5rem;
}

.design-carousel-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.664);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.design-carousel-dot.active {
	background-color: var(--text);
}

.design-carousel-dot:focus {
	outline: 2px solid var(--highlight);
	outline-offset: 2px;
}


.code-card {
	display: flex;
	flex-direction: column;
	padding: 4rem 2rem;
	background-color: var(--secondary-bg);

	text-align: center;
	position: relative;
	overflow: hidden;
}

.code-card-title {
	font-size: 3rem;
	font-weight: bolder;
	margin: 1rem 0 0.5rem;
	color: var(--accent-bg);
	margin-bottom: 2rem;
}


.code-box {
	background-color: #1e1e1e;
	border-radius: 10px;
	padding: 1rem;
	max-height: 500px;
	overflow: auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	font-family: 'Fira Code', monospace;

	max-width: 1000px;
	box-sizing: border-box;
	overflow-x: auto;
	width: 100%;
	margin: 0 auto;

}

.code-nav {
	background-color: var(--DARK);
	padding: 1rem;
}


.code-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center;
}

.code-nav ul li div {
	text-decoration: none;
	color: var(--highlight);
	cursor: pointer;
}

.code-nav ul li div:hover {
	color: var(--text)
}

.code-nav ul li div.active {
	color: var(--text);
	border-radius: 4px;
	font-weight: bold;
}

.next-project-card {
	background-color: var(--primary-bg);
	padding: 4rem 1rem;
	text-align: center;
}

.next-project-button-wrapper {
	margin: 0 auto;
	width: fit-content;
}

.next-project-button {
	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border: none;
	padding: 0;

	color: var(--text);
	text-decoration: none;
	transition: all 0.3s ease;
}


.next-project-content {
	display: flex;
	flex-direction: column;
	text-align: right;
	margin-right: 1.5rem;
}

.next-project-label {
	color: var(--highlight);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.next-project-title {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--secondary-bg);
	padding-bottom: 5px;
	box-shadow: 0 1px 0 0 transparent;
	transition: box-shadow 0.3s ease, color 0.3s ease;
}

.next-project-arrow {
	font-size: 3rem;
	font-weight: 300;
	color: var(--accent-bg);
	transition: transform 0.3s ease, color 0.3s ease;
}

.next-project-button:hover .next-project-title {
	color: var(--accent-bg);
	box-shadow: 0 1px 0 0 var(--accent-bg);
}

.next-project-button:hover .next-project-arrow {
	transform: translateX(10px);
}

/* Tablets and smaller */
@media (max-width: 900px) {
	.code-card {
		padding: 3rem 1.5rem;
	}

	.code-card-title {
		font-size: 1.8rem;
	}

	.code-box {
		max-height: 60vh;
		/* relative to viewport height */
	}
}

/* Medium tablets and large phones */
@media (max-width: 768px) {

	.summary-card-content,
	.reflection-card-content {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		text-align: center;
	}

	.summary-left,
	.summary-right,
	.reflection-left,
	.reflection-right {
		width: 100%;
		max-width: 600px;
		flex: none;
		/* Reset flex-grow/shrink */
	}

	.reflection-card-image {
		max-width: 80vw;
		/* scale image nicely on mobile */
	}
}

/* Phones and small devices */
@media (max-width: 600px) {

	/* Typography */
	.summary-title,
	.design-title,
	.reflection-card-title {
		font-size: 1.8rem;
	}

	.proj-title {
		font-size: clamp(1.5rem, 10vw, 3rem);
	}

	.proj-technologies,
	.proj-date {
		font-size: clamp(0.9rem, 4vw, 1.2rem);
	}

	/* Carousel arrows */
	.design-carousel-arrow,
	.design-carousel-left {
		font-size: 1.8rem;
		padding: 0.3rem 0.6rem;
	}

	.design-carousel-left {
		left: 5px;
	}

	.design-carousel-arrow.right {
		right: 5px;
	}

	/* Code box */
	.code-box {
		font-size: 0.85rem;
		max-height: 55vh;
	}

	/* Padding and gaps for cards */
	.summary-card,
	.design-card,
	.code-card,
	.reflection-card {
		padding: 2rem 1rem;
	}

	.summary-card-content,
	.reflection-card-content {
		gap: 1rem;
	}

	/* Code card specific */
	.code-card {
		padding: 2rem 1rem;
	}

	.code-card-title {
		font-size: 1.5rem;
	}

	.code-nav ul {
		justify-content: flex-start;
		gap: 0.5rem;
	}

	.code-nav ul li div {
		padding: 0.4rem 0.8rem;
		font-size: 0.95rem;
		background-color: rgba(255, 255, 255, 0.05);
		border-radius: 4px;
	}

}

/* Very small phones */
@media (max-width: 400px) {

	.summary-left,
	.summary-right,
	.reflection-left,
	.reflection-right {
		max-width: 90vw;
	}

	.code-card {
		padding: 1.5rem 0.5rem;
	}
}

@media (max-width: 768px) {
	.reflection-card-content {
		flex-direction: column;
		align-items: center;
	}

	.reflection-left,
	.reflection-right {
		width: 100%;
		max-width: 600px;
	}

	.reflection-card-text {
		text-align: center;
		/* optional */
	}
}