/**
 * class and id selectors
 * class selector: .className
 * id selector: #idName
 * body selector: body
 *
 * @format
 */

:root {
	--cream: #fdf6ee;
	--blush: #f2c4b0;
	--rose: #d98c7e;
	--deep-rose: #a85c50;
	--sage: #8baf8d;
	--warm-brown: #5c3d2e;
	--soft-white: #fffaf6;
	--muted: #9a8880;
	--text: #3a2820;
	--nav-h: 72px;
}

/* :root {
	--cream: #121212;
	--blush: #2a1f1b;
	--rose: #c97b63;
	--deep-rose: #e29b88;
	--sage: #6f8f72;
	--warm-brown: #d8b8a0;
	--soft-white: #1b1b1b;
	--muted: #a89a92;
	--text: #f5ebe4;
	--nav-h: 72px;
} */

a {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.78rem;
	/* color: var(--rose); */
	/* color: gold; */
	/* color: #d4af37; */
	/* color: #c9a227; */
	color: #3a2820;
	text-decoration: none;
	letter-spacing: 0.05em;
	font-weight: 500;
	border-bottom: 1px solid var(--blush);
	padding-bottom: 1px;
	transition: color 0.2s;
}
a:hover {
	/* color: var(--deep-rose); */
	/* color: #f5d76e; */
	color: #a85c50;
	/* make font bold & italics*/
	font-weight: bold;
	font-style: italic;
}

body {
	font-family: "DM Sans", sans-serif;
	background: var(--soft-white);
	color: var(--text);
	overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--bg: #121212;
	--card: #1c1c1c;
	--text: #f5ebe4;
	--muted: #a89a92;
	--accent: #d4af37;
	--accent-hover: #f5d76e;
	--border: #2a2a2a;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	padding: 60px 24px;
	max-width: 900px;
	margin: auto;
	line-height: 1.7;
}

h1 {
	font-size: 3rem;
	margin-bottom: 12px;
	letter-spacing: -1px;
}

h2,
h3 {
	margin-top: 40px;
	margin-bottom: 16px;
	font-size: 1.4rem;
	color: var(--accent);
}

img {
	margin-top: 12px;
	border-radius: 16px;
	object-fit: cover;
	border: 1px solid var(--border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.projects,
.references {
	background: var(--card);
	padding: 24px;
	border-radius: 20px;
	margin-top: 24px;
	border: 1px solid var(--border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

ul {
	list-style: none;
}

li {
	margin-bottom: 14px;
}

a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.25s ease;
}

a:hover {
	color: var(--accent-hover);
	padding-left: 4px;
}

p {
	color: var(--muted);
}

@media (max-width: 768px) {
	body {
		padding: 40px 18px;
	}

	h1 {
		font-size: 2.2rem;
	}

	img {
		width: 100%;
		height: auto;
	}
}


#musicBtn {
	position: fixed;
	top: 20px;
	right: 20px;

	width: 58px;
	height: 58px;

	border: none;
	border-radius: 50%;

	background: rgba(88, 28, 135, 0.22);
	backdrop-filter: blur(14px);

	color: #f5d76e;
	font-size: 24px;

	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.35),
		0 0 12px rgba(168, 85, 247, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.06);

	transition:
		transform 0.25s ease,
		background 0.35s ease,
		color 0.35s ease,
		box-shadow 0.35s ease;

	overflow: hidden;
	z-index: 999;
}

/* Hover */
#musicBtn:hover {
	transform: scale(1.08);

	background: rgba(124, 58, 237, 0.28);

	box-shadow:
		0 8px 28px rgba(168, 85, 247, 0.28),
		0 0 18px rgba(245, 215, 110, 0.18),
		inset 0 0 0 1px rgba(245, 215, 110, 0.16);
}

/* Click press */
#musicBtn:active {
	transform: scale(0.93);
}

/* Active playing state */
#musicBtn.active {
	background: linear-gradient(
		135deg,
		rgba(124, 58, 237, 0.38),
		rgba(245, 215, 110, 0.18)
	);

	color: #ffe08a;

	box-shadow:
		0 0 22px rgba(245, 215, 110, 0.35),
		0 0 46px rgba(168, 85, 247, 0.22),
		0 0 80px rgba(124, 58, 237, 0.12);
}

/* Ripple effect */
#musicBtn::after {
	content: "";

	position: absolute;

	width: 10px;
	height: 10px;

	background: rgba(255, 224, 138, 0.5);

	border-radius: 50%;

	transform: scale(0);
	opacity: 0;

	pointer-events: none;
}

/* Trigger ripple */
#musicBtn.ripple::after {
	animation: goldRipple 0.65s ease-out;
}

@keyframes goldRipple {
	0% {
		transform: scale(0);
		opacity: 0.75;
	}

	100% {
		transform: scale(13);
		opacity: 0;
	}
}