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

body{
font-family:Arial, Helvetica, sans-serif;
background: radial-gradient(circle at top,#2b0018,#000);
color:white;
min-height:100vh;
display:flex;
flex-direction:column;
}

.topbar{
width:100%;
display:flex;
justify-content:flex-end;
padding:10px;
}

.flags img{
width:26px;
margin-left:6px;
cursor:pointer;
}

.container{
max-width:520px;
width:95%;
margin:auto;
text-align:center;
padding:20px;
}

.profile{
width:150px;
height:150px;
margin:30px auto 10px;
border-radius:50%;
overflow:hidden;
position:relative;
}

.profile img{
width:100%;
height:100%;
object-fit:cover;
}

.badge{
position:absolute;
bottom:10px;
right:10px;
background:#ff3b3b;
padding:6px 10px;
border-radius:20px;
font-weight:bold;
}

h1{
font-size:26px;
margin-top:10px;
}

.subtitle{
margin:15px 0 25px 0;
opacity:0.9;
}

.section{
margin-top:30px;
font-weight:bold;
}

.btn{
display:block;
padding:18px;
margin:15px auto;
border-radius:14px;
font-weight:bold;
font-size:18px;
text-decoration:none;
color:white;
max-width:420px;

background:linear-gradient(90deg,#ff2f92,#b3003b);

box-shadow:0 0 20px rgba(255,0,90,0.6);
transition:0.2s;
}

.btn:hover{
transform:scale(1.05);
}

.gallery{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin:20px 0;
}

.gallery img{
width:150px;
border-radius:10px;
}

footer{
text-align:center;
padding:20px;
font-size:14px;
opacity:0.7;
margin-top:auto;
}

/* Mobile optimization */
@media (max-width:480px){

h1{
font-size:22px;
}

.btn{
font-size:16px;
padding:16px;
}

.gallery img{
width:120px;
}

}