:root{
  --bg1:#0f1724;
  --bg2:#0b1220;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#7dd3fc;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#e6eef6}
body{background:linear-gradient(180deg,var(--bg1),var(--bg2));display:flex;align-items:center;justify-content:center;padding:3rem}
.page{width:100%;max-width:860px}
.card{background:rgba(255,255,255,0.03);padding:2.4rem;border-radius:12px;box-shadow:0 6px 30px rgba(2,6,23,0.6);text-align:center}
.avatar{width:500px;height:500px;border-radius:50%;border:3px solid rgba(255,255,255,0.06);display:block;margin:0 auto 1rem}
.name{margin:0;font-weight:600;font-size:2.6rem}
.title{margin:0.3rem 0;color:var(--muted)}
.bio{margin-top:1rem;color:var(--muted);line-height:1.5}
.links{margin-top:1.2rem;display:flex;gap:0.6rem;justify-content:center}
.btn{display:inline-block;padding:0.55rem 0.9rem;border-radius:8px;background:linear-gradient(90deg,rgba(125,211,252,0.12),rgba(125,211,252,0.06));color:var(--accent);text-decoration:none;border:1px solid rgba(125,211,252,0.08)}

.icon-link {
  display: inline-flex;
  align-items: center;   /* vertically centers icon and text */
  gap: 0.5rem;           /* space between icon and text */
  color: inherit;
}

.icon {
  width: 1.8em;          /* scale icon relative to text size */
  height: 1.8em;
  display: inline-block;
  color:white;
  fill:white
}

@media (max-width:520px){.page{padding:0 1rem}.card{padding:1.3rem}}