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

html{
scroll-behavior:smooth;
}

body{
background:#000;
color:#fff;
overflow-x:hidden;
}



/* Mouse Glow */

.cursor-glow{

position:fixed;

width:250px;
height:250px;

background:
radial-gradient(
circle,
rgba(255,255,255,.12),
transparent
);

border-radius:50%;

pointer-events:none;

transform:
translate(-50%,-50%);

z-index:-1;

}



/* Hero */

.hero{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;

}


/* Profile Ring */

.profile-ring{

width:140px;
height:140px;

padding:3px;

border-radius:50%;

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

animation:
rotate 8s linear infinite;

}

.profile{

width:100%;
height:100%;

background:#111;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:50px;

}



.hero h1{

font-size:40px;

letter-spacing:3px;

text-shadow:

0 0 10px #fff,
0 0 30px #fff;

animation:
pulse 2s infinite alternate;

}

.hero h2{

color:#bbb;

margin-top:5px;

}

.typing{

margin-top:10px;

height:30px;

color:#ddd;

}



/* Button */

button{

padding:12px 30px;

border:none;

border-radius:30px;

background:#fff;

color:#000;

font-weight:bold;

margin-top:20px;

cursor:pointer;

transition:.5s;

}

button:hover{

transform:
scale(1.1);

box-shadow:

0 0 20px white,
0 0 50px white;

}



/* Cards */

.container{

padding:20px;

}

.card{

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

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

backdrop-filter:
blur(15px);

padding:20px;

margin:20px 0;

border-radius:25px;

transition:.5s;

}


.card:hover{

transform:
translateY(-10px);

box-shadow:

0 0 15px white,
0 0 40px rgba(255,255,255,.4);

}


.item{

margin:15px 0;

}

.item span{

color:#fff;

font-weight:bold;

}



/* Tags */

.tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:15px;

}

.tags span{

padding:10px;

background:#111;

border-radius:20px;

border:1px solid #fff;

transition:.5s;

}

.tags span:hover{

background:#fff;

color:#000;

transform:scale(1.1);

}



/* Scroll Animation */

.hidden{

opacity:0;

transform:
translateY(50px);

transition:1s;

}

.show{

opacity:1;

transform:
translateY(0);

}



/* Animation */

@keyframes rotate{

100%{

transform:
rotate(360deg);

}

}

@keyframes pulse{

from{

text-shadow:
0 0 10px white;

}

to{

text-shadow:

0 0 20px white,
0 0 50px white;

}

}
/* Home */

.homeBtn{

position:fixed;

left:20px;
top:20px;

width:50px;
height:50px;

display:flex;

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

border-radius:50%;

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

backdrop-filter:
blur(10px);

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

color:white;

text-decoration:none;

font-size:24px;

z-index:999;

transition:.5s;

}


.homeBtn:hover{

transform:scale(1.1);

box-shadow:
0 0 20px
rgba(255,255,255,.3);

}