*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#000000;
overflow:hidden;
color:white;
}



.card{

width:340px;

padding:35px;

border-radius:20px;

backdrop-filter:blur(15px);

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

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

text-align:center;

animation:fade 1s;

}

.avatar{

width:110px;

height:110px;

border-radius:50%;

margin-bottom:15px;

border:0px solid white;

}

h1{

font-size:28px;

}

.bio{

opacity:.7;

margin:10px 0 12px;

}

.socials{

display:flex;

justify-content:center;

gap:20px;

font-size:28px;

margin-bottom:12px;

}

.socials a{

color:white;

transition:.3s;

}

.socials a:hover{

transform:scale(1.2);

color:#00bfff;

}

.buttons{
display:flex;
justify-content:center;
gap:0px;
margin-top:10px;
}

.buttons a{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
border-radius:50%;
background:transparent;
border:none;
color:white;
text-decoration:none;
transition:.3s;
}

.buttons a:hover{
transform:translateY(-3px);
}

.buttons a img{
width:37px;
height:37px;
object-fit:contain;
}

.footer{
margin-top:12px;
font-size:11px;
opacity:.4;
text-align:center;
}

.footer-name{
color:#00bfff;
opacity:0.5;
font-weight:600;
}

.music-btn{
margin-top:16px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:6px 14px;
font-family:inherit;
font-size:10px;
font-weight:600;
letter-spacing:.3px;
color:#ccc;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.25);
border-radius:10px;
cursor:pointer;
transition:.3s;
}

.music-btn i{
font-size:9px;
transition:.3s;
}

.music-btn:hover{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.5);
box-shadow:0 0 12px rgba(255,255,255,.2);
transform:translateY(-2px);
}

.music-btn.playing{
color:#fff;
}

.music-btn.playing i{
animation:pulse 1s infinite;
}

@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.2);}
}

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}