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

}

body{
font-family:"Fredoka",sans-serif;
background: #FFDFE6;
opacity:0;
transition:opacity 1s ease;
}

body.loaded{
opacity:1;
}

.bg{
position:fixed;
inset:0;
filter:brightness(1.05);
z-index:-1;
}

.card{
max-width:900px;
margin:60px auto;
background:rgba(255,255,255,.8);
backdrop-filter:blur(12px);
border-radius:30px;
overflow:hidden;
border:2px solid #ffd6e6;
}

.banner{
height:200px;
overflow:hidden;
}

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

.profile{
display:flex;
align-items:center;
gap:18px;
padding:0 30px;
margin-top:-70px;
}

.pfp{
width:150px;
height:150px;
border-radius:50%;
border:8px solid white;
object-fit:cover;
}

.titles h1{
font-family:"Delius Swash Caps",cursive;
font-size:42px;
color:#ff8fb1;
}

.titles p{
font-size:18px;
color:#d67b97;
}

.divider{
display:flex;
justify-content:center;
margin:25px 0 10px;
}

.divider img{
max-width:200px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:26px;
padding:30px;
}

.item{
opacity:0;
transform:translateY(40px) scale(.95);
transition:.7s ease;
text-align:center;
}

.item.show{
opacity:1;
transform:translateY(0) scale(1);
}

.item img{
width:100%;
border-radius:20px;
transition:.4s ease;
cursor:pointer;
}

.item img.tilt{
transform:rotate(-6deg) scale(1.05);
}

.bubble{
display:inline-block;
margin-top:10px;
padding:8px 14px;
background:#ffeaf2;
border-radius:999px;
font-size:14px;
color:#c96a8a;
}

footer{
padding:25px;
display:flex;
justify-content:center;
}

.footerbox{
background:#ffeaf2;
border-radius:20px;
padding:14px 26px;
display:flex;
gap:18px;
}

.footerbox a{
text-decoration:none;
color:#c96a8a;
font-weight:500;
transition:.25s;
}

.footerbox a:hover{
transform:translateY(-2px);
opacity:.7;
}