body{
background:#e8e8e8;
font-family:sans-serif;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}



.container{

width:350px;
padding:40px 25px;
border-radius:30px;

background:#e8e8e8;

box-shadow:
12px 12px 25px #cfcfcf,
-12px -12px 25px #ffffff;

text-align:center;

animation:fadeIn 1s ease;

}



.profile{

width:120px;
height:120px;

border-radius:50%;

margin:auto;

background:url("perfil.png");
background-size:cover;
background-position:center;

box-shadow:
8px 8px 18px #cfcfcf,
-8px -8px 18px #ffffff;

transition:0.4s;

}

.profile:hover{

transform:scale(1.08);

box-shadow:
0 0 20px rgba(0,0,0,0.2);

}



.name{

margin-top:20px;
font-size:24px;
font-weight:bold;

}



.bio{

font-size:14px;
color:#555;
margin-bottom:30px;

}



.link{

display:flex;
align-items:center;
justify-content:space-between;

padding:15px 20px;
margin:18px 0;

border-radius:20px;

background:#e8e8e8;

box-shadow:
6px 6px 15px #cfcfcf,
-6px -6px 15px #ffffff;

text-decoration:none;
color:black;
font-weight:600;

transition:0.25s ease;

}



.link span{

flex:1;
text-align:right;

}



.icon{

width:30px;
display:flex;
align-items:center;
justify-content:center;

}



.icon i{

font-size:20px;

}



.icon img{

width:20px;
height:20px;

}



.link:hover{

transform:translateY(-3px);

box-shadow:
10px 10px 20px #cfcfcf,
-10px -10px 20px #ffffff;

}



.link:active{

box-shadow:
inset 4px 4px 10px #cfcfcf,
inset -4px -4px 10px #ffffff;

transform:scale(0.98);

}



@keyframes fadeIn{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}