@font-face {
    font-family: 'JetbrainsMono';
    src: url('fonts/JetBrainsMonoNL-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JetbrainsMonoBold';
    src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: bold;
}

@keyframes cotton-candy-scroll {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}


/* Use this for text (like `a` in the navbar) */
.cotton-candy-text-hover {
	position: relative;
	display: inline-block;
	transition: color 0.4s ease;
}

.cotton-candy-text-hover::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	background: var(--cotton-candy);
	background-size: 200% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	animation: cotton-candy-scroll 3s linear infinite;
}

.cotton-candy-text-hover:hover {
	color: transparent;
}

.cotton-candy-text-hover:hover::before {
	opacity: 1;
}

.cotton-candy-text {
    background: var(--cotton-candy);
    background-size: 200% 100%;
    animation: cotton-candy-scroll 3s linear infinite;

	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


:root {
	--light-blue: #4DB8EB;
	--pink: #FFB5D8;
	--light-pink: #FAE3EE;
	--hero: #ffedf5;
	--hero-soft: #ffe3ef;
	--text: #29243a;
	--text-muted: #6d667d;
	--border: #efccdc;
	--bio: #ffe3ef;
	--projects: #f9dee4;
	--cotton-candy: linear-gradient(
        90deg,
        #ff66b2,
        #66ccff,
        #ff66b2
    );
}

#href-logo {
	font-family: 'JetbrainsMonoBold', sans-serif;
	margin-left: 5px;
}

header {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

#href-logo {
	margin-right: auto;
}

.hero {
	background-color: var(--hero);
	margin-top: 200px;
	text-align: center;
	min-height: 80vh;
}

button {
	position: relative;
	z-index: 1;
	padding: 10px 20px;
	border: none;
	color: white;
	background-color: var(--light-blue);
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	transition: background-color 0.4s ease;
}


button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cotton-candy);
	background-size: 200% 100%;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: -1;
	animation: cotton-candy-scroll 3s linear infinite;
}

button:hover {
	background-color: transparent;
}

button:hover::before {
	opacity: 1;
}

#bio_image {
	object-fit: cover;
	border-radius: 50%;
}

.bio p {
	max-width: 760px;
	box-sizing: border-box;
	margin: 0px 20px 0;
	padding: 24px clamp(20px, 4vw, 42px);
	text-align: center;
	line-height: 1.7;
}

.bio {
	background-color: var(--bio);
	min-height: 100vh;
	box-sizing: border-box;
	width: calc(100% + 2 * clamp(20px, 5vw, 72px));
	margin-left: calc(-1 * clamp(20px, 5vw, 72px));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.projects {
	background-color: var(--projects);
	min-height: 100vh;
	box-sizing: border-box;
	width: calc(100% + 2 * clamp(20px, 5vw, 72px));
	margin-left: calc(-1 * clamp(20px, 5vw, 72px));
	padding: 72px clamp(20px, 5vw, 72px);
	text-align: center;
}

.projects h2 {
	margin-top: 0;
}

#particles-js {
	position: absolute;
	top: -200px;
	left: 0;
	width: 100%;
	height: calc(100% + 200px);
	z-index: 2;
	pointer-events: none;
}

header {
	position: relative;
	z-index: 4;
}

main {
	position: relative;
	z-index: 1;
	display: flow-root;
}

main > section {
	position: relative;
	z-index: auto;
}

main > section > * {
	position: relative;
	z-index: 4;
}

.hero {
	background-color: rgba(255, 237, 245, 0.86);
}

.bio {
	background-color: rgba(255, 227, 239, 0.86);
}

.projects {
	background-color: rgba(249, 222, 228, 0.86);
}

.project_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
	max-width: 1500px;
	margin: 0 auto;
}

.project_card {
	background: var(--hero);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 14px rgba(41, 36, 58, 0.08);
}

.project_atlas,
.project_gatolang,
.project_mdg {
	height: 220px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--hero-soft), var(--light-pink));
	margin-bottom: 16px;
	overflow: hidden;
}

.project_atlas img,
.project_gatolang img,
.project_mdg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project_gatolang img {
	object-position: left center;
}

.project_card h3 {
	margin: 8px 0;
}

@media (max-width: 700px) {
	.project_grid {
		grid-template-columns: 1fr;
	}
}

ul {
	list-style-type: none;
	margin-right: 5;
	margin: 0;
	padding: 0;
	text-align: right;
}

li {
	display: inline;
}

a:hover {
	text-decoration: none;
	color: var(--text);
}


a {
	text-decoration: none;
	color: var(--text);
}

hr {
	flex-basis: 100%;
	border: none;
	border-top: 1px solid var(--pink);
}


body {
	min-height: 100vh;
	margin: 0;
	padding: 24px clamp(20px, 5vw, 72px) 0;
	box-sizing: border-box;
	font-family: 'JetbrainsMono', sans-serif;
	color: var(--text);
	background-color: var(--hero);
}

main {
	color: var(--text-muted);
}

footer {
	background: #5a3048;
	color: #f7f4f7;
	margin: 0 calc(-1 * clamp(20px, 5vw, 72px));
	padding: 28px 20px;
}

.footer-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
}

.footer-links {
	display: flex;
	gap: 18px;
	order: 2;
}

.footer-links a {
	display: inline-flex;
	color: #f7f4f7;
	transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
	color: var(--pink);
	transform: translateY(-2px);
}

.footer-links svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

footer p {
	margin: 0;
	font-size: 0.9rem;
	order: 1;
}

@media (max-width: 700px) {
	.footer-content {
		gap: 18px;
		flex-wrap: wrap;
	}

	.footer-links {
		margin-left: auto;
	}
}