/* =========================
   PROFILE PAGE
========================= */

.profile{
max-width:720px;
margin:0 auto;
padding:40px 20px 60px
}

/* =========================
   PROFILE CARD
========================= */

.profile-card{
text-align:center;
margin-bottom:32px
}

.profile-avatar{
width:120px;
height:120px;
border-radius:999px;
object-fit:cover;
margin:0 auto 20px;
border:4px solid;
}

.profile-name{
font-size:32px;
font-weight:800;
line-height:1.2;
margin-bottom:10px;
word-break:break-word
}

.profile-bio{
max-width:600px;
margin:0 auto;
font-size:16px;
line-height:1.7;
word-break:break-word
}

/* =========================
   LINKS
========================= */

.profile-links{
display:flex;
flex-direction:column;
gap:14px
}

.profile-link{
display:flex;
align-items:center;
justify-content:center;
min-height:60px;
padding:16px 20px;
border:1px solid;
border-radius:16px;
font-weight:600;
text-align:center;
text-decoration:none;
word-break:break-word;
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease,
border-color .2s ease;
}

.profile-link:hover{
transform:translateY(-2px);
}

/* =========================
   EMPTY STATE
========================= */

.profile-links p{
text-align:center;
padding:30px 10px
}

/* =========================
   FOOTER
========================= */

.profile-footer{
margin-top:40px;
text-align:center
}

/* =========================
   VERIFIED BADGE
========================= */

.verified-badge{
display:inline-flex;
align-items:center;
justify-content:center;
margin-left:8px;
font-size:18px
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.profile{
padding:30px 16px 50px
}

.profile-avatar{
width:100px;
height:100px
}

.profile-name{
font-size:28px
}

.profile-bio{
font-size:15px
}

.profile-link{
min-height:56px;
padding:14px 16px
}

}

@media(max-width:480px){

.profile-name{
font-size:24px
}

.profile-avatar{
width:90px;
height:90px
}

}