/* Dark on purpose: the avatar is a white silhouette. Button colors follow LittleLink's brands.css (MIT, see icons/LICENSE-littlelink.md). */
:root {
	color-scheme: dark;
	--bg: #121212;
	--fg: #f5f5f5;
	--muted: #a3a3a3;
	--radius: 10px;
}
* {
	box-sizing: border-box;
}
html {
	background: var(--bg);
}
body {
	margin: 0;
	min-height: 100svh;
	color: var(--fg);
	background: var(--bg);
	font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
main {
	max-width: 26rem;
	margin: 0 auto;
	padding: 3.5rem 16px 3rem;
	text-align: center;
}
.avatar {
	display: block;
	width: 110px;
	height: auto;
	margin: 0 auto 1.25rem;
}
h1 {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.verified {
	flex: none;
}
.bio {
	margin: 0.35rem 0 2rem;
	color: var(--muted);
}
.links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}
.button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	padding: 0.7rem 3rem;
	border-radius: var(--radius);
	border: var(--button-border, 1px solid transparent);
	background: var(--button-background, #2457f5);
	background-origin: border-box;
	color: var(--button-text, #fff);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.button img {
	position: absolute;
	left: 1rem;
	top: 50%;
	translate: 0 -50%;
}
.button:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}
.button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.button {
		transition: none;
	}
	.button:hover {
		transform: none;
	}
}
.button-website,
.button-portfolio {
	--button-background: #232326;
	--button-border: 1px solid #3a3a3e;
}
.button-instagram {
	background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
}
.button-tiktok,
.button-flickr {
	--button-background: #000;
	--button-border: 1px solid #fff;
}
.button-youtube {
	--button-background: #ff0000;
}
.button-linkedin {
	--button-background: #2867b2;
}