/* import fonts   */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");

/* CSS color variables  */
:root {
	--primary-color: #5f9a9a;
	--secondary-color: #044344;
	--body-text: #e5e4e4;
}

/* Reset default margin and padding for all elements */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

/* Set a base font size and family */
body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-family: "IBM Plex Mono", monospace;
	/* padding-top: 80px; */
	background: #333333;
}

/* Apply a responsive max-width to the main content */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Style headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: white;
	font-family: "Source Sans Pro", monospace;
	/* font-family: "Bungee", sans-serif; */
}

p {
	/* color: #f5f5f5; */
	color: var(--body-text);
}

/* Basic link styles */
a {
	/* color: white; */
	text-decoration: none;
}

header {
	position: sticky;
	top: 0;
	z-index: 1000;
}
/* styles for nav bar */
.navbar {
	background-color: rgb(95 154 154 / 0.8);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* padding: 25px 60px; */
	padding: 1.5rem 3rem;
}

.name {
	font-size: 1.2rem;
}

.navbar-right {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.nav-link {
	color: white;
	text-decoration: none;
	font-size: 18px;
}

.nav-link:hover {
	color: darkslategray;
}

/* styles for hamburger menu */
.hamburger {
	position: absolute;
	top: 1.4rem;
	right: 2rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	width: 30px;
	height: 25px;
}

.bar {
	width: 100%;
	height: 3px;
	background-color: white;
	border-radius: 10px;
	margin: 3px 0;
}

.hamburger.active .bar:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .bar:nth-child(2) {
	opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 650px) {
	.hamburger {
		display: flex;
	}
	.navbar-right {
		display: none;
		flex-direction: column;
		width: 100%;
		text-align: center;
		gap: 7px;
		padding-top: 1rem;
	}
	.navbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.navbar-right.active {
		display: flex;
	}
}

.gradient-background {
	background-image: radial-gradient(
		circle,
		rgba(95, 154, 154, 1) 0%,
		rgba(4, 67, 68, 1) 100%
	);
}

/* styles for landing page */
#landing {
	/* background: darkslategray; */
	background-image: url("/images/backgrounds/low-poly-grid-haikei.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: calc(100dvh - 71.5px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
	align-items: center;
	padding-top: 0;
	padding: 0;
	position: relative;
}

.landing-container {
	/* padding: 260px 30px 5px 30px; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: center; */
	justify-items: center;

	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	margin-top: 120px;
}

#landing h1 {
	font-size: 2.9rem;
}

#landing h2 {
	font-size: 1.5rem;
}

#landing p {
	font-size: 2rem;
}

.role {
	color: var(--body-text);
}

.quote-container {
	color: var(--body-text);
	padding-top: 50px;
	display: flex;
	flex-direction: column;
	align-items: end;
}

.quote-text {
	border: 1px solid white;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.13);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(6.4px);
	backdrop-filter: blur(6.4px);
	border: 1px solid rgba(255, 255, 255, 0.36);
	font-size: 0.9rem !important;
}

.quote-author {
	text-align: right;
	/* border: 1px solid white; */
	border-bottom: 1px solid white;
	border-right: 1px solid white;
	border-left: 1px solid white;
	padding: 1rem;
	margin: 0;
	background: rgba(255, 255, 255, 0.13);
	/* border-radius: 16px; */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(6.4px);
	backdrop-filter: blur(6.4px);
	border: 1px solid rgba(255, 255, 255, 0.36);
	font-size: 0.8rem !important;
}

.chevron-container {
	margin-top: 20px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.chevron {
	/* position: absolute; */
	top: 60px;
	/* margin: 0 auto; */
	/* left: 50%; */
	/* transform: translateX(-50%); */
	/* display: flex; */
	/* justify-content: center; */
	animation: bounce 1.5s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
	animation-iteration-count: infinite;
}

.chevron:hover {
	stroke: #5f9a9a;
	animation-play-state: paused;
}

@keyframes bounce {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, 50px, 0);
	}
}

/* styles for projects section */
#projects {
	min-height: calc(100dvh);
	padding-bottom: 3rem;
}

.projects-container {
	padding-bottom: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	justify-content: center;
	align-content: center;
	place-content: center;
}

.project-container {
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: repeat(2, 1fr);
	padding: 3rem;
	gap: 2.5rem;
	/* styles for glass  */
	background: rgba(255, 255, 255, 0.13);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(6.4px);
	backdrop-filter: blur(6.4px);
	border: 1px solid rgba(255, 255, 255, 0.36);
}

.project-description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	font-size: 1em;
}

.project-image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
	gap: 0.5rem;
}

.resize-image {
	max-width: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.resize-image.loaded {
	opacity: 1;
}

.project-button {
	border: 2px solid white;
	border-radius: 2em;
	padding: 1em 3em;
	color: white;
	cursor: pointer;
	justify-self: center;
}

.project-button:hover {
	background: rgba(11, 192, 192, 0.51);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(7.2px);
	backdrop-filter: blur(7.2px);
	border-color: rgb(205, 225, 225);
}

.project-group-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 3rem;
}

@media (max-width: 800px) {
	.projects-container {
		gap: 1rem;
	}
	.project-container {
		max-width: 100%;
		display: flex;
		flex-direction: column;
		font-size: 0.8rem;
	}
	.project-group-buttons {
		gap: 1rem;
	}
}

/* swiper styles test  */
.swiper {
	width: 90%;
}

.swiper-slide {
	background-position: center;
	background-size: cover;
	border-radius: 3%;
}

.swiper-slide img {
	/* display: block; */
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center;
	transform: scale(1.2);
	transform-origin: center;
	transition: transform 0.3s ease-in-out;
}

.swiper-slide img:hover,
.swiper-slide img:focus {
	width: 100%;
	transform: scale(1);
}

/* .swiper-pagination {
	
} */

.more-projects {
	font-size: 3rem;
	font-family: "Bungee", sans-serif;
	/* text-align: center; */
	/* padding-top: 3rem; */
	color: transparent;
	-webkit-text-stroke: 3px white;
	cursor: pointer;
	position: relative;
}

.more-projects::before {
	content: "ALL PROJECTS";
	position: absolute;
	width: 0%;
	height: 100%;
	overflow: hidden;
	color: white;
	border-right: 4px solid white;
	transition: 2s ease-in-out;
}

.more-projects:hover::before {
	width: 100%;
	filter: drop-shadow(0 0 25px white);
}

/* styles for about section */
#about {
	/* min-height: calc(100dvh); */
	/* background: darkslategray;
	background-image: radial-gradient(
		circle,
		rgba(95, 154, 154, 1) 0%,
		rgba(4, 67, 68, 1) 100%
	); */
	/* background-image: url("/images/backgrounds/low-poly-grid-haikei.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center; */
	padding-bottom: 2rem;
}

.about-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 2.5rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	align-content: center;
	place-content: center;
}

.information {
	display: flex;
	flex-direction: column;
	justify-content: baseline;
	gap: 1rem;
	/* padding: 5rem; */
}

.about-button-container {
	display: flex;
	/* justify-items: center; */
	/* align-items: center; */
	place-content: center;
}

.portfolio-button {
	/* display: block; */
	border: 2px solid white;
	border-radius: 2em;
	padding: 1em 3em;
	color: white;
	cursor: pointer;
}

.portfolio-button:hover {
	background: rgba(11, 192, 192, 0.51);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(7.2px);
	backdrop-filter: blur(7.2px);
	border-color: rgb(205, 225, 225);
}

/* styles for contact section */
#contact {
	/* min-height: calc(100dvh); */
	background: darkcyan;
}

.subtitle {
	text-align: center;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.contact-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 12rem;
}

.contact-container form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	grid-column-gap: 7rem;
	justify-content: center;
	align-items: center;
	min-width: 100%;
}

.contact-container label {
	color: white;
}

.contact-container textarea {
	grid-column: span 2;
	min-width: 100%;
	resize: vertical;
	background-color: transparent;
}

.form-button {
	grid-column: span 2;
	border: 2px solid white;
	border-radius: 1em;
	padding: 1.5em 2.5em;
	background-color: transparent;
	color: white;
	cursor: pointer;
	justify-self: center;
}

.form-button:hover {
	background-color: rgb(5, 163, 163);
	border-color: darkslategray;
}

/* style the inputs of the form  */
text[type="text"] {
	min-width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	border: none;
	outline: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	border-bottom: 2px solid #ccc;
	background-color: transparent;
	padding-bottom: 0.5rem;
}
textarea::placeholder {
	margin: 0;
	padding: 0;
	outline: none;
	box-shadow: none;
	border: none;
	background-color: transparent;
	font-size: 1rem;
	/* padding-bottom: 0.5rem; */
}

input::placeholder,
textarea::placeholder {
	color: white; /* Change the placeholder text color to your desired color */
}

input:focus,
textarea:focus {
	border-color: dodgerblue;
	outline: dodgerblue;
}

input:focus::placeholder,
textarea:focus::placeholder {
	color: transparent;
}

/* attempted to make label change color */
input:focus label,
textarea:focus label {
	color: dodgerblue;
}

@media screen and (max-width: 600px) {
	.contact-container {
		padding: 2rem; /* Reduce padding for smaller screens */
	}
	.contact-container form {
		gap: 1rem;
		grid-column-gap: 1rem;
	}
	/* Adjust label font size and input font size */
	.contact-container label {
		font-size: 0.9rem;
	}

	.contact-container input,
	.contact-container textarea {
		font-size: 0.9rem;
	}
}
textarea {
	padding: 0;
	margin: 0;
	line-height: normal;
	box-sizing: border-box;
}

/* styles for titles */
.title {
	width: 100%;
	max-width: 1200px;
	font-size: 5rem;
	text-transform: uppercase;
	font-family: "Bungee", sans-serif;
}

@media screen and (max-width: 800px) {
	.title {
		font-size: 4rem;
	}
}

/* styles for skills  */
#skills {
	min-height: calc(100dvh);
	padding-bottom: 40px;
}

.skills-container {
	margin-bottom: 40rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	place-content: center;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	justify-content: space-between;
}

.skill {
	display: flex;
	align-items: center;
	justify-items: center;
	color: white;
	padding: 1rem;
	gap: 1rem;

	background: rgba(255, 255, 255, 0.13);
	border-radius: 4px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(6.4px);
	backdrop-filter: blur(6.4px);
	border: 1px solid rgba(255, 255, 255, 0.36);
}

.skill .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.3em;
	background: rgba(255, 255, 255, 0.13);
	border-radius: 8px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(6.4px);
	backdrop-filter: blur(6.4px);
	border: 1px solid rgba(255, 255, 255, 0.36);
}

@media (max-width: 600px) {
	.skills-grid {
		grid-template-columns: repeat(
			2,
			1fr
		); /* Ensure at least 2 columns on small screens */
		font-size: 0.7rem;
	}
	.skill {
		padding: 0.5rem;
		gap: 0.5rem;
	}
}
/* TODO: might need to change this */
/* it is being used for the navbar...  */
/* styles for sections */
section {
	padding-top: 80px;
}

/* styles for footer */
footer {
	display: flex;
	flex-direction: column;
	background-color: #333;
	padding-top: 25px;
	padding-bottom: 15px;
	align-items: center;
	gap: 15px;
}

.social-icons {
	display: flex;
	flex-direction: row;
	gap: 30px;
	justify-content: center;
}

footer i {
	color: white;
	font-size: 30px;
}

footer i:hover {
	color: darkslategray;
}

footer p {
	text-align: center;
}

/* styles for scroll up button  */
#scroll-up {
	position: fixed;
	display: none;
	bottom: 2rem;
	right: 2rem;
	font-size: 3rem;
	cursor: pointer;
	z-index: 99;
	opacity: 0;
	transform: opacity 0.1s easy-in-out;
	color: white;
}

#scroll-up:hover {
	color: rgb(95, 154, 154);
}

#scroll-up.show {
	opacity: 1;
	display: block;
}

.scroll-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 10rem 0rem;
}

.oval {
	width: 30px;
	height: 40px;
	border-radius: 45%;
	border: 2px solid #fff;
	position: relative;
}

.ball {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	justify-self: center;
	align-self: center;
	bottom: 2px;
	top: 50%;
	left: 30%;
	transform: translateX(-50%);
	animation: bounce-ball 2s infinite;
}

@keyframes bounce-ball {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-8px);
	}
	60% {
		transform: translateY(-4px);
	}
}

canvas {
	border: 2px solid #fff;
	background-color: #000;
}

.about-article {
	display: flex;
	/* flex-direction: column; */
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.memoji {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	/* max-width: 300px; */
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	background-color: #333;
	display: inline;
}

@media screen and (max-width: 800px) {
	.about-article {
		flex-direction: column;
	}
	.memoji {
		max-width: 20%;
		margin: -2.5rem 0;
	}
}

.memoji img {
	width: 100%;
}