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

body{

    background:linear-gradient(180deg,#c33764,#1d2671);
    min-height:100vh;

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

    color:white;
}

/* CARD */

.card{

    width:100%;
    max-width:420px;

    padding:40px 20px;
    text-align:center;

}

/* LOCATION */

.location{

    background:rgba(255,255,255,.15);
    padding:8px 18px;
    border-radius:25px;

    display:inline-block;
    font-weight:600;

    margin-bottom:25px;

    backdrop-filter:blur(10px);

}

/* AVATAR */

.avatar{

    width:140px;
    height:140px;

    border-radius:50%;
    border:5px solid white;

    margin:0 auto 15px;

    background:url('./barbara1.jpg') center/cover;

    position:relative;

    box-shadow:0 10px 40px rgba(0,0,0,.4);

}

/* ONLINE DOT */

.online{

    width:22px;
    height:22px;

    background:#00ff88;
    border-radius:50%;

    position:absolute;
    right:6px;
    bottom:6px;

    border:3px solid #c33764;

}

/* NAME */

.name{
    font-size:28px;
    font-weight:800;
    margin-bottom:6px;
}

/* TEXT */

.tagline{
    opacity:.9;
    margin-bottom:28px;
    font-size:17px;
}

/* CTA BUTTON */

.cta{

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

    background:white;
    color:#333;

    padding:20px;
    border-radius:50px;

    font-weight:800;
    font-size:18px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

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

/* GALLERY */

.gallery{

    margin-top:35px;

    display:flex;
    gap:12px;

    overflow-x:auto;
    padding-bottom:10px;

}

.gallery img{

    height:210px;
    border-radius:20px;

}

/* MOBILE TUNING */

@media(max-width:500px){

    .card{
        padding-top:60px;
    }

    .avatar{
        width:120px;
        height:120px;
    }

    .name{
        font-size:24px;
    }

}