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


body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background:black;
color:white;
}


/* ANIMOWANE TŁO */

.background{
position:absolute;
width:200%;
height:200%;
background:
radial-gradient(circle,#333,black 60%);
animation:move 10s infinite alternate;
}


@keyframes move{
from{
transform:translate(-10%,-10%);
}

to{
transform:translate(10%,10%);
}
}



/* PROFIL */

.profile{

position:relative;
width:380px;
padding:40px;

text-align:center;

background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);

border-radius:25px;

box-shadow:
0 0 50px black;

animation:show 1s;
}



@keyframes show{
from{
opacity:0;
transform:translateY(50px);
}

to{
opacity:1;
transform:none;
}
}



/* AVATAR */


.avatar-box{
width:140px;
height:140px;

margin:auto;

border-radius:50%;

padding:5px;

background:linear-gradient(45deg,#fff,#555,#fff);

animation:rotate 5s linear infinite;
}


.avatar-box img{

width:100%;
height:100%;

border-radius:50%;

object-fit:cover;

}



@keyframes rotate{

to{
transform:rotate(360deg);
}

}



/* NICK */


h1{

margin-top:20px;

font-size:45px;

background:linear-gradient(90deg,#fff,#777,#fff);

background-size:200%;

color:transparent;

background-clip:text;

animation:text 3s infinite;

}


@keyframes text{

to{
background-position:200%;
}

}


p{
color:#aaa;
margin:10px;
}




.links{

display:flex;
justify-content:center;
gap:15px;

margin-top:25px;

}


.links a,button{

padding:12px 25px;

border-radius:12px;

border:none;

background:#111;

color:white;

text-decoration:none;

cursor:pointer;

transition:.3s;

}


.links a:hover,button:hover{

background:white;

color:black;

transform:scale(1.05);

}


button{

margin-top:20px;

}