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

body{
    min-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    font-family:'Inter',sans-serif;
    display:flex;
    justify-content:center;
    background:#000;
    padding:40px 20px;
}

.background{
    position:fixed;
    inset:0;

    background-image:url('https://ignacioijar.me/wp-content/uploads/2024/03/LUGARES-2-scaled.jpg');
    background-size:cover;
    background-position:center;

    transform:scale(1.1);

    animation:zoom 30s ease-in-out infinite alternate;
}

@keyframes zoom{
    from{
        transform:scale(1.1);
    }
    to{
        transform:scale(1.25);
    }
}

.glass-card{

    width:min(92%,500px);

    margin:0 auto;

    padding:30px;

    border-radius:40px;

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    box-shadow:0 8px 32px rgba(0,0,0,.25);

    position:relative;

    z-index:2;
}

.top-bar{
    display:flex;
    justify-content:space-between;

    font-size:.75rem;

    letter-spacing:2px;

    color:white;

    margin-bottom:25px;
}

.profile{
    display:flex;
    gap:20px;
    align-items:center;
}

.profile-image{

    width:110px;
    height:140px;

    border-radius:70px;

    overflow:hidden;

    flex-shrink:0;
}

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

.mini-title{

    font-size:.75rem;

    color:rgba(255,255,255,.8);

    letter-spacing:1px;
}

.profile-info h1{

    font-family:'Playfair Display',serif;

    font-size:4rem;

    line-height:.9;

    color:white;

    margin:10px 0;
}

.profile-info p{

    color:rgba(255,255,255,.85);

    line-height:1.5;

    font-size:.95rem;
}

.links{

    margin-top:35px;

    display:flex;
    flex-direction:column;

    gap:12px;
}

.links a{

    text-decoration:none;

    color:white;

    padding:15px 20px;

    border-radius:100px;

    border:1px solid rgba(255,255,255,.2);

    background:rgba(255,255,255,.08);

    transition:.35s;
}

.links a:hover{

    background:white;
    color:black;

    transform:translateX(8px);
}

.footer{

    margin-top:30px;

    display:flex;
    justify-content:space-between;

    gap:20px;

    font-size:.7rem;

    letter-spacing:2px;

    color:rgba(255,255,255,.8);
}

@media(max-width:768px){

    .profile{
        flex-direction:column;
        text-align:center;
    }

    .profile-info h1{
        font-size:3rem;
    }

    .footer{
        flex-direction:column;
        text-align:center;
    }
}