html{
scroll-behavior:smooth;
}

.glow{
box-shadow:0 0 50px rgba(0,255,255,.3);
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.floating {
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 4s ease-in-out infinite;
}

.glow:hover{
transform: scale(1.05);
transition: all .3s ease;
box-shadow:
0 0 20px #22d3ee,
0 0 40px #22d3ee,
0 0 60px #8b5cf6;
}

.glass-card{
    animation: float 5s ease-in-out infinite;
}
.hero-glow{
position:absolute;
width:500px;
height:500px;
background:linear-gradient(
45deg,
#06b6d4,
#8b5cf6
);
filter:blur(150px);
opacity:.15;
border-radius:50%;
z-index:-1;
}

#tsparticles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
}

body{
overflow-x:hidden;
position:relative;
}

.cursor-glow{
position:fixed;
width:300px;
height:300px;
border-radius:50%;
background:radial-gradient(circle,
rgba(34,211,238,.15),
transparent 70%);
pointer-events:none;
z-index:-1;
transform:translate(-50%,-50%);
}
.card-hover{
transition:.4s;
}

.card-hover:hover{
transform:translateY(-10px);
box-shadow:
0 0 25px rgba(34,211,238,.25);
}

nav a{
transition:.3s;
}

nav a:hover{
color:#22d3ee;
}
#progressBar{
position:absolute;
top:0;
left:0;
height:3px;
width:0%;
background:linear-gradient(
90deg,
#22d3ee,
#8b5cf6
);
}