/* Neon — a night-city dark with glowing outlines and a faint grid. For nightlife, gaming, music, tech. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

:root {
	--bg: #08050f;
	--fg: #f6f1ff;
	--muted: #b9a9e0;
	--bio-fg: #d3c8ee;
	--accent: #00f0ff;
	--accent-fg: #03060c;
	--accent-glyph: invert(1);
	--pink: #ff2bd6;
	--font-head: 'Sora', system-ui, sans-serif;
	--font-body: 'Sora', system-ui, sans-serif;

	--btn-bg: rgba(255, 255, 255, .02);
	--btn-fg: var(--fg);
	--btn-radius: 999px;
	--btn-pad: 17px 24px;

	--chip-bg: rgba(255, 255, 255, .03);
	--chip-size: 50px;

	--pop-bg: #0e0818;
	--pop-border: var(--accent);
	--share-bg: rgba(255, 255, 255, .06);
	--share-border: 1.5px solid var(--accent);
}

/* glow pools and a fading grid */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(46vmax 46vmax at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
		radial-gradient(46vmax 46vmax at 100% 100%, rgba(255, 43, 214, .22), transparent 60%),
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px;
	-webkit-mask-image: linear-gradient(#000 40%, rgba(0, 0, 0, .35));
	mask-image: linear-gradient(#000 40%, rgba(0, 0, 0, .35));
}

.bg {
	width: 138px;
	height: 138px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 58px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--pink), 0 0 36px 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 70px 10px rgba(255, 43, 214, .28);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 30px; gap: 6px; }
.header .title h1 {
	font-size: clamp(1.8rem, 8.5vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -.02em;
	text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 42px color-mix(in srgb, var(--accent) 35%, transparent);
}
.header h2 { font-size: .9rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); text-shadow: 0 0 14px rgba(255, 43, 214, .55); }

.social-media { padding-top: 24px; gap: 12px; }
.social-media > a { border: 1.5px solid var(--accent); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 12px -4px color-mix(in srgb, var(--accent) 50%, transparent); }
.social-media > a:nth-child(even) { border-color: var(--pink); box-shadow: 0 0 14px -2px rgba(255, 43, 214, .6), inset 0 0 12px -4px rgba(255, 43, 214, .5); }
.social-media > a:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.links { padding-top: 28px; gap: 16px; }
.link {
	--c: var(--accent);
	border: 2px solid var(--c);
	font-size: 1rem;
	font-weight: 600;
	box-shadow: 0 0 20px -3px color-mix(in srgb, var(--c) 65%, transparent), inset 0 0 18px -6px color-mix(in srgb, var(--c) 55%, transparent);
	text-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent);
}
.link:nth-child(even) { --c: var(--pink); }
.link:hover { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: 0 0 30px 0 color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 22px -4px color-mix(in srgb, var(--c) 60%, transparent); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); text-shadow: none; box-shadow: 0 0 32px 0 color-mix(in srgb, var(--accent) 70%, transparent); }
.links .link:first-child:hover { background: var(--accent); filter: brightness(1.1); }
#rating-form { box-shadow: 0 0 40px -6px color-mix(in srgb, var(--accent) 60%, transparent); }