body {
	margin: 0;
	padding: 0;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
		Consolas, "Liberation Mono", "Courier New", monospace;
	background: radial-gradient(
			1000px 600px at 60% -200px,
			rgba(99, 102, 241, 0.25),
			transparent
		),
		radial-gradient(
			800px 500px at -10% 120%,
			rgba(236, 72, 153, 0.15),
			transparent
		),
		radial-gradient(
			600px 400px at 80% 20%,
			rgba(255, 105, 180, 0.1),
			transparent
		),
		rgb(10, 10, 12);
	color: rgba(255, 255, 255, 0.92);
	text-align: center;
}

.container {
	position: relative;
	z-index: 2;
	padding: 16px;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card {
	display: inline-block;
	max-width: 780px;
	padding: 20px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(14px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.avatar {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 16px;
	border: 3px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	margin-bottom: 12px;
	animation: avatarGlow 4s ease-in-out infinite;
}

@keyframes avatarGlow {
	0%,
	100% {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
			0 0 20px rgba(255, 105, 180, 0.3);
	}
	50% {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
			0 0 40px rgba(255, 105, 180, 0.6);
	}
}

h1 {
	font-size: 28px;
	margin-bottom: 12px;
	letter-spacing: 0.4px;
	text-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
	background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.65));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: titleSparkle 3s ease-in-out infinite;
}

@keyframes titleSparkle {
	0%,
	100% {
		filter: brightness(1) drop-shadow(0 0 5px rgba(255, 105, 180, 0.3));
	}
	50% {
		filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 105, 180, 0.6));
	}
}

p {
	max-width: 620px;
	margin: 0 auto 12px auto;
	line-height: 1.6;
	font-size: 15px;
	color: rgba(238, 238, 241, 0.9);
}

.divider {
	height: 2px;
	width: 100%;
	margin: 8px auto 16px auto;
	background: linear-gradient(
		90deg,
		rgba(99, 102, 241, 0.55),
		rgba(244, 114, 182, 0.45),
		rgba(96, 165, 250, 0.55)
	);
	background-size: 200% 100%;
	animation: dividerShift 8s ease-in-out infinite;
}

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

button {
	padding: 12px 24px;
	font-size: 15px;
	border: 1px solid rgba(255, 105, 180, 0.4);
	border-radius: 12px;
	background: rgba(255, 105, 180, 0.1);
	color: rgba(255, 255, 255, 0.95);
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
	0%,
	100% {
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2),
			0 0 10px rgba(255, 105, 180, 0.2);
	}
	50% {
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2),
			0 0 20px rgba(255, 105, 180, 0.4);
	}
}

button:hover {
	transform: translateY(-1px);
	background: rgba(255, 105, 180, 0.2);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 25px rgba(255, 105, 180, 0.5);
}

#fireworks {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
}

.pulse-heart {
	display: inline-block;
	font-size: 18px;
	animation: pulseHeart 2s ease-in-out infinite;
}

@keyframes pulseHeart {
	0%,
	100% {
		transform: scale(1);
		filter: brightness(1);
	}
	50% {
		transform: scale(1.3);
		filter: brightness(1.4);
	}
}