/* Global variables */
:root {
	--mainRGB: 50, 140, 220;
	/* hex(#328cdc) */
	--blueColor: rgb(102, 153, 204);
	/* #6699cc */
	/* --blueColor: rgb(var(--mainRGB)); */
	/* secondary: #66cccc, tertiary: 6666cc */
	--unselectedColor: rgb(220, 220, 235);
	--hoverColor: rgba(var(--mainRGB), 0.5);
	--hoverColor1: rgba(0, 140, 250, 0.5);
	--buttonWidth: 80px;
	--buttonHeight: 36px;
	--buttonContainerHeight: calc(var(--buttonHeight) + 4px);
	--buttonContainerGap: 4px;
	--sidePadding: 14px;
	--project-img-width: 400px;
	--hover-opacity: 0.7;
	--footerGap: 0.75rem;
	--lineHeight: 1.5;
	--linesShown: 2;

	--shadow-color: 0deg 0% 63%;
	--shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.25),
		0.7px 1.5px 1.9px -0.8px hsl(var(--shadow-color) / 0.25),
		1.8px 3.5px 4.4px -1.7px hsl(var(--shadow-color) / 0.25),
		4.3px 8.5px 10.7px -2.5px hsl(var(--shadow-color) / 0.25);
	--shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
		0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
		2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
		5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
	--shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
		1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
		2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
		4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
		7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
		11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
		17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
		25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	scroll-behavior: smooth;
	font-size: 1rem;
	/* z-index: 5; */
	/* font-size: calc(0.7rem + 0.5vw); */
}

/*delete this later*/
.center-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: black;
}

/*delete this later*/

html,
body {
	width: 100%;
	height: 100%;
	line-height: var(--lineHeight);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}

body {
	display: flex;
	flex-direction: column;
	margin: 0px;
	min-height: 100vh;
	background-color: white;
	align-items: center;
	text-align: left;
	position: relative;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-thumb {
	background: rgba(32, 32, 32, 0.6);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--mainRGB), 0.8);
}

.main {
	width: 100%;
	flex-grow: 1;
	z-index: 2;
	background-color: white;
	padding-top: 1rem;
}

p {
	text-align: left;
	margin: 0px;
	padding: 0px;
	z-index: 5;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1rem;
}

#portrait {
	width: 12rem;
	aspect-ratio: 1/1;
	border-radius: 100%;
	margin-top: 2rem;
	margin-bottom: 2rem;
	box-shadow: var(--shadow-elevation-medium);
	cursor: pointer;
	z-index: 10;
}

#portrait:hover {
	/* animation: slow-rotate 100s cubic-bezier(1, 0, .4, 0.01) infinite; */
	animation: slow-rotate 400s linear infinite;
}

@keyframes slow-rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#particles-js {
	position: fixed;
	/* Fixed position to cover the whole screen */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: 1;
}

.nav {
	display: flex;
	justify-content: center;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 10;
	width: 100%;
	padding: 1rem;
	background-color: var(--blueColor);
	box-shadow: var(--shadow-elevation-medium);
}

.button-container {
	height: auto;
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--buttonContainerGap);
	margin: 0px;
	padding: 2px;
	background-color: var(--unselectedColor);
	border: 1px solid rgba(60, 60, 60, 0.5);
	border-radius: 999em;
	box-shadow: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36) inset,
		0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36) inset,
		2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36) inset,
		5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36) inset;
}

.button {
	width: var(--buttonWidth);
	height: var(--buttonHeight);
	border: none;
	border-radius: 999em;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: 0.3s ease-in;
	z-index: 10;
	font-size: 0.9em;
}

.button-selector {
	position: absolute;
	height: var(--buttonHeight);
	width: var(--buttonWidth);
	margin: 0;
	padding: 0;
	border-radius: 999em;
	background-color: var(--blueColor);
	box-shadow: var(--shadow-elevation-low);
	transform: translateX(0);
	transition: 0.1s ease-in;
	/* Remove width transition during resize */
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
	background-color: var(--hoverColor);
	box-shadow: var(--shadow-elevation-medium);
	/* More prominent shadow */
}

.button.active {
	color: white;
}

.links {
	margin-bottom: 1rem;
	z-index: 5;
}

.links a:hover {
	opacity: var(--hover-opacity);
}

.header a {
	background-color: var(--blueColor);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	text-decoration: none;
	font-size: 0.9rem;
	box-shadow: var(--shadow-elevation-low);
}

.h1 {
	margin-bottom: 1.2rem;
	z-index: 5;
}

.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1.5rem;
}

.page-content {
	align-self: flex-start;
	margin-bottom: 1rem;
}

.home-section-left {
	grid-template-areas: "imgArea pArea";
	grid-template-columns: 10rem auto;
}

.home-section-right {
	grid-template-areas: "pArea imgArea";
	grid-template-columns: auto 10rem;
}

.home-section-left,
.home-section-right {
	display: grid;
	column-gap: 1.5rem;
	margin-top: 3rem;
	justify-content: center;
}

.home-section-left > p,
.home-section-right > p {
	grid-area: pArea;
	max-width: 60vw;
	padding: 0.3rem 0 0.3rem 0;
}

.home-section-left > img:not(.img-zoom),
.home-section-right > img:not(.img-zoom) {
	grid-area: imgArea;
	width: 100%;
	max-width: 800px;
	max-height: 800px;
	align-self: center;
	object-fit: cover;
	border-radius: 0.5rem;
	box-shadow: var(--shadow-elevation-low);
	transition: 0.2s ease-out;
	cursor: pointer;
}

.home-section-left > img:hover:not(.img-zoom),
.home-section-right > img:hover:not(.img-zoom) {
	transform: scale(1.005);
	box-shadow: var(--shadow-elevation-medium);
}

.img-zoom {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	z-index: 1000;
	max-width: 80vw;
	max-height: 80vh;
	box-shadow: none;
	border-radius: 0.5rem;
	cursor: pointer;
	animation: zoom-animation 0.3s ease-out;
}

@keyframes zoom-animation {
	0% {
		transform: translate(-50%, -50%) scale(0.3);
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

.project {
	display: grid;
	grid-template-columns: auto;
	align-items: center;
	justify-items: center;
	width: 80%;
	max-width: 800px;
	height: auto;
	padding: 1rem;
	margin: 2rem;
	border-radius: 2rem;
	background-color: var(--blueColor);
	box-shadow: var(--shadow-elevation-medium);
	transition: 0.3s ease-out;
}

.project:hover {
	transform: scale(1.005);
	box-shadow: var(--shadow-elevation-high);
}

.project-content {
	margin-bottom: 0.75rem;
	color: white;
	overflow: hidden;
	width: 100%;
	height: 100%;
	/* padding: 0 0.5rem; */
}

.project-content p {
	display: -webkit-box;
	display: box;
	-webkit-box-orient: vertical;
	box-orient: vertical;
}

.truncate-text {
	/*max-height: 3rem; /* Adjust based on your font size and line height for 2 lines */
	overflow: hidden;
	display: -webkit-box;
	display: box;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	-webkit-line-clamp: var(--linesShown);
	line-clamp: var(--linesShown);
}

.show-more {
	max-height: none;
	-webkit-line-clamp: unset;
	/* Allow multiline text when expanded */
	line-clamp: unset;
}

.more-button {
	margin-top: 0.5rem;
	/* Adjust margin as needed */
	display: none;
}

.more-button button {
	display: block;
	padding: 0.2rem;
	font-size: 0.7em;
	background-color: transparent;
	color: white;
	border: 0.5px solid white;
	border-radius: 0.4rem;
	cursor: pointer;
}

/* IMAGE SLIDER */
.slider-container,
.single-container {
	display: flex;
	position: relative;
	width: 100%;
	max-width: var(--project-img-width);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 1rem;
}

.slides {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 10;
	opacity: 0;
}

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

.slides video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.displaySlide {
	z-index: 12;
	opacity: 1;
}

#idle-screen {
	aspect-ratio: 16/9;
	max-width: none;
	/* max-height: var(--project-img-width); */
}

.z-offset {
	z-index: 13;
}

.nav-buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	position: absolute;
	top: 50%;
	right: 50%;
	/* transform: translateY(-50%); */
	transform: translateX(50%);
	width: 100%;
	align-content: center;
	padding: 0px 3px 0px 3px;
	background: none;
	border: none;
	z-index: 15;
}

.nav-buttons button {
	font-size: 1.5em;
	padding: 0px 3px 4px 4px;
	background: none;
	color: white;
	border: none;
	border-radius: 20% 20% 20% 20%;
	cursor: pointer;
}

.prev {
	justify-self: left;
	rotate: 180deg;
	transform: translateY(50%);
}

.next {
	/* right: 0; */
	justify-self: right;
	transform: translateY(-50%);
}

.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.prev:active,
.next:active {
	background-color: rgba(0, 0, 0, 0.4);
}

.slider-nav {
	display: flex;
	column-gap: 1rem;
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 14;
}

.slider-nav button {
	width: 0.6rem;
	aspect-ratio: 1 / 1;
	background-color: white;
	border: none;
	border-radius: 100%;
	opacity: 0.5;
	transition: opacity ease 250ms;
	cursor: pointer;
	box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
}

.slider-nav button:hover {
	opacity: 1;
}

.slider-nav button.current {
	opacity: 1;
}

.slider-nav button:active {
	transform: scale(0.9);
	box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

/* New image */
.move-right-in {
	right: 100%;
	animation: slide-right 0.5s ease-in-out;
	animation-fill-mode: forwards;
}

.move-left-in {
	left: 100%;
	animation: slide-left 0.5s ease-in-out;
	animation-fill-mode: forwards;
}

/* Previous image */
.move-right-out {
	animation: slide-right 0.5s ease-in-out;
	animation-fill-mode: backwards;
}

.move-left-out {
	animation: slide-left 0.5s ease-in-out;
	animation-fill-mode: backwards;
}

@keyframes slide-left {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(-100%);
		/* opacity: 50%; */
	}
}

@keyframes slide-right {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(100%);
		/* opacity: 50%; */
	}
}

#zoom-overlay {
	opacity: 0;
	animation: fade-in 0.3s forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.footer {
	height: 3rem;
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 1rem 0rem 1rem 1.5rem;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
	clip-path: inset(-10px 0px 0px 0px);
	z-index: 5;
	background-color: white;
}

/* Common styles for footer icons */
.footer-icon {
	display: flex;
	/* Use flexbox for centering */
	justify-content: center;
	/* Horizontally center the icon */
	align-items: center;
	/* Vertically center the icon */
	/* text-decoration: none; */
	/* font-size: 2rem; */
	width: 1.3rem;
	/* Adjust width for consistent sizing */
	margin-left: var(--footerGap);
	/* height: 2.5rem; */
	/* border: none; */
	/* border-radius: 0.3rem; */
}

.horizontal-line {
	height: 0.2rem;
	margin-left: var(--footerGap);
	flex-grow: 1;
	background-color: var(--blueColor);
	border-radius: 1rem 0 0 1rem;
}

/* =================
   MEDIA QUERIES
   ================= */
@media screen and (max-width: 768px) {

	/* Typography adjustments */
	* {
		font-size: clamp(0.9rem, calc(0.9rem + 0.5vw), 1rem);
	}

	/* Header adjustments */
	.header {
		margin: 0.5rem;
	}

	#portrait {
		width: 8rem;
		margin: 1rem 0;
	}

	/* Navigation adjustments */
	.nav {
		padding: 0.5rem;
	}

	.button {
		width: calc(var(--buttonWidth) * 0.8);
		font-size: 0.8em;
	}

	.button-container {
		gap: calc(var(--buttonContainerGap) * 0.8);
	}

	.button-selector {
		width: calc(var(--buttonWidth) * 0.8);
	}

	.page {
		margin: 0.8rem;
	}

	.img-zoom {
		max-width: 98vw;
		max-height: 98vh;
	}

	/* Project layout adjustments */
	.project {
		width: 95%;
		padding: 1rem;
		margin: 1rem 0;
	}

	/* Home section layout fixes */
	.home-section-left,
	.home-section-right {
		grid-template-columns: 1fr;
		grid-template-areas:
			"imgArea"
			"pArea";
		row-gap: 1rem;
		margin-top: 1.5rem;
	}

	.home-section-left > p,
	.home-section-right > p {
		max-width: 100%;
	}

	/* Footer adjustments */
	.footer {
		/* padding: 1rem 0.5rem; */
		padding: 1rem 0rem 1rem 0.5rem;
		font-size: 0.8em;
	}

	.fa {
		font-size: 1.5rem;
		/* Scale down the icon size */
		width: 2rem;
		/* Adjust width */
		height: 2rem;
		/* Adjust height */
	}
}

@media screen and (max-width: 480px) {

	/* Further adjustments for very small screens */
	.project {
		width: 100%;
		padding: 1rem;
		margin: 0.75rem 0;
		border-radius: 1rem;
	}

	.project-content {
		padding: 0 0.5rem;
	}

	.slider-container,
	.single-container {
		max-width: 100%;
	}

	/* Navigation for smallest screens */
	.button {
		width: calc(var(--buttonWidth) * 0.7);
		font-size: 0.75em;
	}

	.button-selector {
		width: calc(var(--buttonWidth) * 0.7);
	}

	.button-container {
		gap: calc(var(--buttonContainerGap) * 0.7);
	}
}