body{
margin:0;
font-family:Arial, sans-serif;
background:radial-gradient(circle at top,#14142b,#050510);
color:white;
text-align:center;
}

.logo{
font-size:28px;
background:linear-gradient(90deg,#7a5cff,#00d4ff,#7a5cff);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:glowmove 4s linear infinite;
}

@keyframes glowmove{
0%{background-position:0%}
100%{background-position:200%}
}

.hero{
padding:120px 20px;
}

.skills, .services, .contact{
padding:80px 20px;
}

.card{
background:rgba(255,255,255,0.05);
border-radius:16px;
padding:25px;
margin:20px auto;
max-width:400px;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.1);
transition:0.3s;
}

.card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 0 20px #7a5cff,0 0 40px #00d4ff;
}

.bar{
background:#222;
height:8px;
border-radius:10px;
margin-top:10px;
}

.bar div{
background:linear-gradient(90deg,#7a5cff,#00d4ff);
height:100%;
border-radius:10px;
}

.discord-float{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
background:linear-gradient(135deg,#5865F2,#8f9eff);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
border-radius:50%;
color:white;
box-shadow:0 0 20px rgba(88,101,242,0.7);
transition:0.3s;
}

.discord-float:hover{
transform:scale(1.1);
box-shadow:0 0 35px rgba(88,101,242,1);
}

#particles{
position:fixed;
top:0;
left:0;
z-index:-1;
}