/* Terminal — green phosphor on black, scanlines, a blinking cursor, command-line rows. For developers, hackers, sysadmins, makers. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
	--bg: #020a05;
	--fg: #5dff8d;
	--muted: #2fbf5f;
	--bio-fg: #46d974;
	--accent: #39ff6a;
	--accent-fg: #021006;
	--accent-glyph: invert(1);
	--font-head: 'JetBrains Mono', ui-monospace, monospace;
	--font-body: 'JetBrains Mono', ui-monospace, monospace;

	--glyph-color: var(--accent);
	--badge-color: var(--accent);

	--btn-bg: transparent;
	--btn-fg: var(--accent);
	--btn-border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
	--btn-radius: 2px;
	--btn-pad: 15px 18px;

	--chip-bg: transparent;
	--chip-border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
	--chip-radius: 2px;
	--chip-size: 46px;

	--pop-bg: #04140a;
	--pop-fg: var(--accent);
	--pop-border: var(--accent);
	--field-bg: #031208;
	--share-bg: rgba(0, 20, 8, .6);
	--share-fg: var(--accent);
	--share-border: 1px solid var(--accent);
}

@keyframes blink { 50% { opacity: 0; } }
/* scanlines and a soft vignette over everything */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
		radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55));
}
body { text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); }

.bg {
	width: 132px;
	height: 132px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 54px;
	border: 1px solid var(--accent);
	border-radius: 2px;
	padding: 5px;
	box-shadow: 0 0 22px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.bg > img { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.6) brightness(.95) contrast(1.1); }
.bg::after { display: none; }

.header { margin-top: 24px; gap: 6px; }
.header .title h1 { font-size: clamp(1.4rem, 6.5vw, 1.8rem); font-weight: 700; letter-spacing: -.01em; }
.header .title h1::before { content: '$ '; opacity: .55; }
.header .title h1::after { content: '▌'; margin-left: 4px; animation: blink 1.05s steps(2, start) infinite; }
.header h2 { font-size: .9rem; font-weight: 400; }
.header h2::before { content: '# '; }
.bio { font-size: .88rem; text-align: left; max-width: 460px; }
.bio::before { content: '> '; opacity: .6; }

.social-media { padding-top: 22px; gap: 10px; }
.social-media > a:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

.links { padding-top: 26px; gap: 12px; }
.link { justify-content: flex-start; text-align: left; font-size: .92rem; font-weight: 500; }
.link::before { content: '>'; width: auto; height: auto; margin: 0 12px 0 0; background: none; border-radius: 0; opacity: .7; }
.link::after { content: '↵'; margin-left: auto; opacity: .5; }
.link:hover { background: var(--accent); color: var(--accent-fg); text-shadow: none; }
.links .link:first-child { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.links .link:first-child:hover { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .header .title h1::after { animation: none; } }
#rating-form { border-radius: 2px; }
#rating-form h4 { font-weight: 700; }