*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Poppins,sans-serif;
background:#050505;
color:white;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
overflow-x:hidden;
padding:30px;
}

/* Aurora background */

.bg{
position:fixed;
width:100%;
height:100%;
z-index:-3;

background:
radial-gradient(circle at 20% 30%, #ff00c8 0%, transparent 40%),
radial-gradient(circle at 80% 40%, #00cfff 0%, transparent 40%),
radial-gradient(circle at 40% 80%, #00ff9d 0%, transparent 40%);

filter:blur(120px);
animation:moveBg 20s infinite alternate ease-in-out;
opacity:.8;
}

@keyframes moveBg{
0%{transform:translate(-10%,-10%)}
100%{transform:translate(10%,10%)}
}

/* particles */

canvas{
position:fixed;
top:0;
left:0;
z-index:-2;
}

/* container */

.container{
width:100%;
max-width:440px;

padding:35px 30px;

text-align:center;

background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);

border-radius:26px;

border:1px solid rgba(255,255,255,0.18);

box-shadow:
0 30px 80px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.2);

animation:floatCard 6s ease-in-out infinite;
}

@keyframes floatCard{
0%{transform:translateY(0px)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0px)}
}

/* avatar */

.avatar{
width:110px;
height:110px;
border-radius:50%;
margin-bottom:18px;
border:3px solid rgba(255,255,255,.25);
}

/* title */

h1{
font-size:28px;
margin-bottom:6px;
}

.bio{
opacity:.8;
margin-bottom:25px;
}

/* buttons */

.link{
display:flex;
align-items:center;

gap:16px;

padding:8px 12px;

margin:14px 0;

border-radius:16px;

text-decoration:none;
color:white;
font-weight:500;

background:rgba(255,255,255,.08);
backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.20);

transition:all .25s ease;

position:relative;
overflow:hidden;
}

/* icon style */

.link img{

width:48px;
height:48px;

border-radius:12px;

object-fit:cover;

background:rgba(255,255,255,0.15);

padding:6px;

box-shadow:0 5px 15px rgba(0,0,0,0.5);

transition:transform .25s;

}

/* hover icon */

.link:hover img{
transform:scale(1.1);
}

/* hover button */

.link:hover{
transform:translateY(-5px) scale(1.03);

background:rgba(255,255,255,.18);

box-shadow:
0 20px 50px rgba(0,0,0,.7),
0 0 20px rgba(255,255,255,.1);
}

/* shine */

.link::before{
content:"";
position:absolute;
top:0;
left:-120%;

width:80%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.5s;
}

.link:hover::before{
left:120%;
}

/* ripple effect */

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

background:rgba(255,255,255,0.4);

animation:ripple 0.6s linear;

pointer-events:none;

}

@keyframes ripple{

to{
transform:scale(4);
opacity:0;
}

}

/* footer */

.footer{
margin-top:28px;
font-size:12px;
opacity:.5;
}