:root {
    --text: #d8d8d8;
    --bg: #151515;
    --card-bg: rgba(25,25,25,.53);
    --border: rgba(60,60,60,.3);
}
* {margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif}
body {min-height:100vh; display:flex; justify-content:center; align-items:center; background-color:var(--bg)}
.background-video {position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.8}
.name {text-align:center; margin:.5rem 0; font-size:2rem; font-weight:600; color:#f7f7f7; text-shadow:0 0 21px #f7f7f7}
.card {width:90%; max-width:23rem; padding:1rem 1rem 2rem; background:var(--card-bg); border-radius:1rem; backdrop-filter:blur(6.4px); border:1px solid var(--border); box-shadow:0 4px 30px rgba(0,0,0,.1); animation:fadeIn .8s ease-out}
.pfp {margin:2% auto; width:8rem; height:8rem}
.pfp img {width:100%; height:100%; border-radius:50%; object-fit:cover; transition:transform .3s ease}
@keyframes fadeIn {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.social-buttons {display:flex; gap:15px; justify-content:center; margin-top:20px}
.social-btn {width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); backdrop-filter:blur(5px); transition:all .3s ease; color:white; text-decoration:none; font-size:20px; position:relative}
.social-btn::before {content:attr(data-tooltip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); padding:5px 10px; background:rgba(0,0,0,.8); color:white; font-size:14px; border-radius:4px; white-space:nowrap; opacity:0; visibility:hidden; transition:all .3s ease; pointer-events:none; margin-bottom:5px}
.social-btn:hover {transform:translateY(-3px); background:rgba(255,255,255,.2)}
.social-btn:hover::before {opacity:1; visibility:visible}
.discord:hover {color:#7289DA}
.github:hover {color:#f0f6fc}
.monero:hover {color:#ff6600}