*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    font-family: Inter, Arial, sans-serif;

    background:#fafafa;

    color:#111;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



#grid{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:-1;

    pointer-events:none;

}



.container{

    text-align:center;

    max-width:600px;

    width:min(600px, calc(100% - 40px));



    padding:50px;



    background:rgba(255,255,255,0.7);



    backdrop-filter:blur(20px);

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



    border:1px solid rgba(0,0,0,0.06);



    border-radius:24px;



    box-shadow:

        0 20px 60px rgba(0,0,0,0.08),

        0 2px 10px rgba(0,0,0,0.04);

}



.avatar{

    width:180px;

    height:180px;



    border-radius:50%;

    object-fit:cover;



    border:1px solid #111;



    margin-bottom:25px;



    transition:transform .3s ease;

}



.avatar:hover{

    transform:scale(1.03);

}



h1{

    font-size:3rem;

    font-weight:700;

    margin-bottom:15px;

}



.bio{

    color:#555;

    line-height:1.8;

    margin-bottom:35px;

}



.socials{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}



.socials a{

    text-decoration:none;



    color:#111;

    background:white;



    border:1px solid #ddd;

    border-radius:12px;



    padding:12px 20px;



    transition:

        transform .2s ease,

        background .2s ease,

        color .2s ease,

        border-color .2s ease;

}



.socials a:hover{

    background:#111;

    color:white;

    border-color:#111;



    transform:translateY(-3px);

}



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



@media (max-width: 768px){



    .container{

        width: calc(100% - 32px);

        max-width: 100%;



        padding: 32px 24px;

    }



    .avatar{

        width: 140px;

        height: 140px;

    }



    h1{

        font-size: 2.2rem;

    }



    .bio{

        font-size: 1rem;

        line-height: 1.7;

    }



    .socials{

        gap: 10px;

    }



    .socials a{

        flex: 1 1 calc(50% - 10px);



        min-width: 120px;



        text-align:center;

    }

}



@media (max-width: 480px){



    .container{

        padding: 28px 20px;

        border-radius:20px;

    }



    .avatar{

        width: 120px;

        height: 120px;

    }



    h1{

        font-size: 2rem;

    }



    .bio{

        font-size: 0.95rem;

    }



    .socials{

        flex-direction:column;

    }



    .socials a{

        width:100%;

    }

}