/* Tree — the link-in-bio classic: a small round avatar, a stack of big white pills, icons at the bottom. Works for anyone. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--bg: #efefec;
	--fg: #111;
	--muted: #666;
	--bio-fg: #4a4a4a;
	--accent: #43e660;
	--accent-fg: #111;
	--accent-glyph: invert(1);
	--font-head: 'Inter', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--max: 560px;
	--btn-bg: #fff;
	--btn-fg: #111;
	--btn-border: 1px solid rgba(17, 17, 17, .07);
	--btn-radius: 999px;
	--btn-pad: 19px 26px;
	--btn-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 12px 22px -16px rgba(17, 17, 17, .35);

	--chip-bg: transparent;
	--chip-border: 0 solid transparent;
	--chip-size: 46px;
	--chip-glyph: invert(1);

	--glyph-page: invert(1);
	--pop-bg: #fff;
	--pop-fg: #111;
	--pop-border: transparent;
	--pop-shade: rgba(17, 17, 17, .5);
	--field-bg: #f3f3f1;
	--star-filter: invert(1);
	--share-bg: rgba(255, 255, 255, .75);
	--share-fg: #111;
	--share-border: 1px solid rgba(17, 17, 17, .08);
}

html, body { background: linear-gradient(180deg, #f6f6f3, #e6e6e1) fixed; }

.bg {
	width: 104px;
	height: 104px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 54px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 10px 26px -12px rgba(17, 17, 17, .5);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 16px; gap: 4px; }
.header .title h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.header h2 { font-size: .95rem; }

.links { padding-top: 26px; gap: 14px; }
.link { font-size: 1rem; font-weight: 600; }
.link:hover { transform: scale(1.015); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* the icons sit under the links, like a footer row */
.social-media { order: 10; padding-top: 30px; gap: 8px; }
.social-media > a:hover { background: rgba(17, 17, 17, .07); }