:root{

--primary:#6652ff;

--secondary:#00d4ff;

}



*{

box-sizing:border-box;

}



body{


margin:0;

height:100vh;

font-family:Poppins,Arial;

background:
linear-gradient(
135deg,
#050510,
#111124
);

display:flex;

align-items:center;

justify-content:center;

color:white;

}



body:before{

content:"";

position:fixed;

width:500px;

height:500px;

background:#6652ff;

filter:blur(160px);

opacity:.4;

top:-200px;

left:-200px;

}



body:after{

content:"";

position:fixed;

width:400px;

height:400px;

background:#00d4ff;

filter:blur(160px);

opacity:.3;

right:-150px;

bottom:-150px;

}



.login-box{


width:420px;

padding:40px;

border-radius:25px;

background:

rgba(255,255,255,.08);

backdrop-filter:

blur(25px);


border:

1px solid rgba(255,255,255,.15);


box-shadow:

0 30px 60px rgba(0,0,0,.4);


}



.login-box h1{

font-size:42px;

text-align:center;

}



.login-box h1 span{

color:#00d4ff;

}



.login-box p{

text-align:center;

color:#aaa;

}



.form-control{


background:

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


border:

1px solid rgba(255,255,255,.2);


color:white;


height:50px;


}



.form-control::placeholder{

color:#aaa;

}



.btn-primary{


background:#6652ff;

border:none;

height:50px;

border-radius:15px;


}


.btn-primary:hover{

background:#5844ee;

}