body {
	text-align: center;
	background: linear-gradient(
		135deg /* direction of the gradient */,
		#ff6b6b /* first color */,
		#f0e130 /* second color */,
		#1dd1a1 /* third color */
	);

	background-position: center top; /* horizontal vertical */
	background-repeat: no-repeat;
	background-size: 600% 600%; /* for animation */

	font-family: "Courier New", Courier, monospace;

	padding-top: 200px; /* Adjust this value */
}

h1 {
	color: red; /* starting color */
	animation: color-change 5s linear infinite;
}

/* h1:hover {
    animation-play-state: paused;
} */

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes color-change {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(
			360deg
		); /* rotate all the way through the color spectrum */
	}
}

@keyframes spin-text {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes make-text-big {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(var(--hover-scale, 1.15));
	}
}

.spin {
	animation: spin-text 2s linear infinite;
}

p {
	--hover-scale: 1.15;
	display: inline-block;
	transform-origin: center;
	will-change: transform;
}

p:hover,
p:focus-visible {
	animation: make-text-big 240ms ease-out forwards;
}

p:not(:hover):not(:focus-visible) {
	animation: none;
	transform: scale(1);
}

.projects-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 32px;
	max-width: 700px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: left;
}

.card {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition:
		transform 0.2s,
		box-shadow 0.2s,
		background 0.2s;
	border-radius: 12px;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 0.35);
}

.container {
	padding: 16px 20px;
}

.card h2 {
	margin: 0 0 8px 0;
	font-size: 1.2em;
}

.card p {
	margin: 0 0 12px 0;
	font-size: 0.95em;
	opacity: 0.85;
	line-height: 1.5;
}

.card a {
	display: inline-block;
	padding: 4px 14px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	font-size: 0.85em;
	transition: background 0.2s;
}

.card a:hover {
	background: rgba(0, 0, 0, 0.3);
}

ul {
	list-style: none;
	padding: 0;
	max-width: 600px;
	margin: 20px auto;
	text-align: left;
}

li {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	margin: 16px 0;
	padding: 20px 24px;
	border-radius: 12px;
	transition:
		transform 0.2s,
		background 0.2s;
}

li:hover {
	transform: translateX(6px);
	background: rgba(255, 255, 255, 0.35);
}

li h2 {
	margin: 0 0 6px 0;
	font-size: 1.2em;
}

li p {
	margin: 0 0 10px 0;
	font-size: 0.95em;
	opacity: 0.85;
	line-height: 1.5;
}

li a {
	display: inline-block;
	padding: 4px 14px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	font-size: 0.85em;
	transition: background 0.2s;
}

li a:hover {
	background: rgba(0, 0, 0, 0.3);
}

img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 20px auto;
}

@media (prefers-reduced-motion: reduce) {
	p,
	p:hover,
	p:focus-visible {
		animation: none;
		transform: none;
	}
}

.navbar {
	list-style: none;
	margin: 0 auto 32px;
	padding: 12px 18px;
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	width: fit-content;
}

.navbar li {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
	backdrop-filter: none;
	transition:
		transform 0.2s,
		background 0.2s;
}

.navbar li:hover {
	transform: none;
	background: none;
}

.navbar a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	color: #111;
	font-weight: 700;
	transition:
		background 0.2s,
		transform 0.2s;
}

.navbar a:hover {
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-1px);
}