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


body{

margin:0;
background:
linear-gradient(
120deg,
#020617,
#001f4d
);

color:white;

}


header{

display:flex;
justify-content:space-between;
padding:20px 8%;

background:#020617cc;

backdrop-filter:blur(10px);

position:sticky;
top:0;

}


nav a{

color:white;
margin:10px;
text-decoration:none;

}



.hero{

min-height:90vh;

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

padding:50px;

}



h1{

font-size:60px;

background:linear-gradient(
90deg,
#00aaff,
#0055ff
);

-webkit-background-clip:text;
color:transparent;

}



.buttons a{

display:inline-block;

padding:15px 30px;

margin:10px;

border-radius:15px;

background:#0077ff;

color:white;

text-decoration:none;

}



.avatar img{

width:300px;

border-radius:50%;

box-shadow:
0 0 50px #009dff;

}



.card,
.project{

background:#ffffff10;

border:1px solid #ffffff25;

border-radius:20px;

padding:25px;

margin:30px;

backdrop-filter:blur(15px);

}



.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

}



.project:hover{

transform:translateY(-10px);

box-shadow:
0 0 30px #008cff;

transition:.3s;

}



footer{

text-align:center;

padding:30px;

}