body{
margin:0;
background:#000;
color:white;
font-family:Arial;
overflow-x:hidden;
}

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

#loader{
position:fixed;
width:100%;
height:100vh;
background:black;
display:flex;
justify-content:center;
align-items:center;
z-index:100;
} 

.nav{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
box-sizing:border-box;
z-index:1000;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(10px);
}

.nav a{
color:white;
margin-left:20px;
text-decoration:none;
}

.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-top:80px;
} 

.title{
font-size:70px;
letter-spacing:8px;
    
}


.section{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.section h2{ color:#0d6efd;}

#soundControl{
position:fixed;
bottom:25px;
right:25px;
background:rgba(0,0,0,0.6);
padding:12px 14px;
border-radius:50px;
cursor:pointer;
z-index:9999;
backdrop-filter:blur(10px);
}

#soundControl i{
color:white;
font-size:22px;
}



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





.footer{
width:100%;
background:rgba(0,0,0,0.8);
border-top:1px solid rgba(255,255,255,0.1);
padding:15px 30px;
margin-top:100px;
}

.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
color:#fff;
font-size:14px;
}

.footer-right a{
color:#fff;
text-decoration:none;
margin-left:20px;
opacity:0.8;
}

.footer-right a:hover{
opacity:1;
}


/* =====================
MOBILE
===================== */

@media (max-width:768px){

.nav{
padding:0 15px;
}

.nav nav{
display:flex;
gap:15px;
}

.nav a{
margin-left:0;
font-size:14px;
}

.title{
font-size:36px;
letter-spacing:3px;
}

.section{
min-height:auto;
padding:80px 20px; text-align:center;
}

.section h2{
font-size:22px;
}

.section p{
font-size:15px;
}

.footer-inner{
flex-direction:column;
text-align:center;
gap:10px;
}

.footer-right{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

.footer-right a{
margin:0;
}

}


@media (max-width:768px){

.footer-inner{
flex-direction:column;
text-align:center;
gap:10px;
}

.footer-right a{
margin:0 10px;
}

}