*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
height:100vh;
width:100%;
display:flex;
justify-content:center;
align-items:center;
background:radial-gradient(circle at center,#1b2735 0%,#090a0f 100%);
overflow:hidden;
position:relative;
}

/* floating symbols */

.symbols-container{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
z-index:0;
}

.symbols-container span{
position:absolute;
color:rgba(255,255,255,0.3);
font-size:1.5rem;
user-select:none;
animation:float-up infinite linear;
}
.symbols-container span:nth-child(5n){ color:#00d2ff; text-shadow:0 0 10px #00d2ff; }
.symbols-container span:nth-child(4n){ color:#00d2ff; text-shadow:0 0 10px #ffdd00; }
.symbols-container span:nth-child(7n){ color:#00d2ff; text-shadow:0 0 10px #2600ff; }
.symbols-container span:nth-child(1n){ color:#00d2ff; text-shadow:0 0 10px #fb00ff; }
.symbols-container span:nth-child(3n){ color:#3a7bd5; text-shadow:0 0 10px #006eff;}

.symbols-container span:nth-child(8n+1){color:#d5613a;}
.symbols-container span:nth-child(8n+2){color:#d2d53a;}
.symbols-container span:nth-child(8n+3){color:#3a7bd5;}
.symbols-container span:nth-child(8n+4){color:#b63ad5;}
.symbols-container span:nth-child(8n+5){color:#ff7ad9;}
.symbols-container span:nth-child(8n+6){color:#3affc1;}
.symbols-container span:nth-child(8n+7){color:#87d53a;}
.symbols-container span:nth-child(8n+8){color:#3a9fd5;}

.symbols-container span:nth-child(1){left:5%;top:20%;animation-duration:15s;}
.symbols-container span:nth-child(2){left:15%;top:50%;animation-duration:12s;}
.symbols-container span:nth-child(3){left:25%;top:80%;animation-duration:18s;}
.symbols-container span:nth-child(4){left:35%;top:10%;animation-duration:14s;}
.symbols-container span:nth-child(5){left:45%;top:40%;animation-duration:20s;}
.symbols-container span:nth-child(6){left:55%;top:70%;animation-duration:13s;}
.symbols-container span:nth-child(7){left:65%;top:30%;animation-duration:16s;}
.symbols-container span:nth-child(8){left:75%;top:60%;animation-duration:11s;}
.symbols-container span:nth-child(9){left:145%;top:84%;animation-duration:17s;}
.symbols-container span:nth-child(10){left:28%;top:95%;animation-duration:19s;}

.symbols-container span:nth-child(11){left:16%;top:85%;animation-duration:15s;}
.symbols-container span:nth-child(12){left:95%;top:15%;animation-duration:19s;}
.symbols-container span:nth-child(13){left:12%;top:36%;animation-duration:14s;}
.symbols-container span:nth-child(14){left:28%;top:15%;animation-duration:21s;}
.symbols-container span:nth-child(15){left:48%;top:15%;animation-duration:13s;}
.symbols-container span:nth-child(16){left:62%;top:85%;animation-duration:18s;}
.symbols-container span:nth-child(17){left:12%;top:25%;animation-duration:16s;}
.symbols-container span:nth-child(18){left:82%;top:26%;animation-duration:11s;}
.symbols-container span:nth-child(19){left:92%;top:45%;animation-duration:17s;}
.symbols-container span:nth-child(20){left:8%;top:75%;animation-duration:20s;}

.symbols-container span:nth-child(21){left:18%;top:5%;animation-duration:14s;}
.symbols-container span:nth-child(22){left:32%;top:65%;animation-duration:19s;}
.symbols-container span:nth-child(23){left:52%;top:35%;animation-duration:15s;}
.symbols-container span:nth-child(24){left:68%;top:55%;animation-duration:22s;}
.symbols-container span:nth-child(25){left:78%;top:5%;animation-duration:16s;}
.symbols-container span:nth-child(26){left:88%;top:75%;animation-duration:13s;}
.symbols-container span:nth-child(27){left:6%;top:45%;animation-duration:18s;}
.symbols-container span:nth-child(28){left:22%;top:72%;animation-duration:21s;}
.symbols-container span:nth-child(29){left:42%;top:90%;animation-duration:17s;}
.symbols-container span:nth-child(30){left:58%;top:12%;animation-duration:15s;}

.symbols-container span:nth-child(31){left:5%;top:42%;animation-duration:19s;}
.symbols-container span:nth-child(32){left:84%;top:22%;animation-duration:12s;}
.symbols-container span:nth-child(33){left:10%;top:62%;animation-duration:16s;}
.symbols-container span:nth-child(34){left:10%;top:92%;animation-duration:20s;}
.symbols-container span:nth-child(35){left:26%;top:32%;animation-duration:14s;}
.symbols-container span:nth-child(36){left:46%;top:73%;animation-duration:18s;}
.symbols-container span:nth-child(37){left:56%;top:52%;animation-duration:13s;}
.symbols-container span:nth-child(38){left:66%;top:82%;animation-duration:21s;}
.symbols-container span:nth-child(39){left:76%;top:18%;animation-duration:17s;}
.symbols-container span:nth-child(40){left:86%;top:38%;animation-duration:15s;}

.symbols-container span:nth-child(41){left:36%;top:58%;animation-duration:19s;}
.symbols-container span:nth-child(42){left:14%;top:68%;animation-duration:16s;}
.symbols-container span:nth-child(43){left:34%;top:48%;animation-duration:12s;}
.symbols-container span:nth-child(44){left:54%;top:28%;animation-duration:20s;}
.symbols-container span:nth-child(45){left:64%;top:8%;animation-duration:18s;}
.symbols-container span:nth-child(46){left:74%;top:78%;animation-duration:14s;}
.symbols-container span:nth-child(47){left:84%;top:68%;animation-duration:17s;}
.symbols-container span:nth-child(48){left:94%;top:51%;animation-duration:21s;}
.symbols-container span:nth-child(49){left:4%;top:28%;animation-duration:13s;}
.symbols-container span:nth-child(50){left:24%;top:8%;animation-duration:19s;}

.symbols-container span:nth-child(51){left:44%;top:58%;animation-duration:15s;}
.symbols-container span:nth-child(52){left:64%;top:78%;animation-duration:18s;}
.symbols-container span:nth-child(53){left:74%;top:38%;animation-duration:16s;}
.symbols-container span:nth-child(54){left:97%;top:18%;animation-duration:12s;}
.symbols-container span:nth-child(55){left:94%;top:88%;animation-duration:20s;}
.symbols-container span:nth-child(56){left:9%;top:60%;animation-duration:17s;}
.symbols-container span:nth-child(57){left:29%;top:40%;animation-duration:13s;}
.symbols-container span:nth-child(58){left:49%;top:20%;animation-duration:19s;}
.symbols-container span:nth-child(59){left:69%;top:70%;animation-duration:14s;}
.symbols-container span:nth-child(60){left:19%;top:50%;animation-duration:22s;}

@keyframes float-up{

0%{
transform:translateY(110vh) rotate(0deg);
opacity:0;
}

10%{
opacity:1;
}

90%{
opacity:1;
}

100%{
transform:translateY(-20vh) rotate(360deg);
opacity:0;
}

}

/* login card */

.login-card{
position:relative;
z-index:10;
width:380px;
padding:50px 40px;
border-radius:20px;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 20px 50px rgba(0,0,0,0.6);
text-align:center;
transition:0.4s;
}

.login-card:hover{
transform:translateY(-8px) scale(1.02);
}

/* animated border */

.login-card::before{
content:"";
position:absolute;
inset:-2px;
border-radius:20px;
background:linear-gradient(45deg,#00d2ff,#3a7bd5,#6a11cb,#00d2ff);
z-index:-1;
filter:blur(12px);
opacity:0.7;
animation:borderMove 6s linear infinite;
}

@keyframes borderMove{

0%{
filter:hue-rotate(0deg);
}

100%{
filter:hue-rotate(360deg);
}

}

.login-card h2{
color:#fff;
font-weight:500;
letter-spacing:2px;
margin-bottom:40px;
}

/* input fields */

.input-group{
position:relative;
margin-bottom:35px;
}

.input-group input{
width:100%;
padding:10px 0;
/* margin: 0 16px; */
background:transparent;
/* filter: blur(1px); */
border:none;
/* border-radius: 15px; */
border-bottom:2px solid #555;
outline:none;
color:#fff;
font-size:1rem;
transition:0.5s;
}

.input-group label{
position:absolute;
left:0;
top:10px;
color:#888;
pointer-events:none;
transition:0.5s;
}

.input-group input:focus ~ label,
.input-group input:valid ~ label{

top:-20px;
color:#00d2ff;
font-size:0.8rem;

}

.input-group input:focus{

border-bottom:2px solid #00d2ff;
box-shadow:0 5px 15px rgba(0,210,255,0.3);

}

/* button */

.login-btn{
position:relative;
width:100%;
padding:12px;
border:none;
border-radius:30px;
background:linear-gradient(90deg,#00d2ff,#3a7bd5);
color:#fff;
font-size:1rem;
font-weight:600;
cursor:pointer;
overflow:hidden;
transition:0.4s;
}

.login-btn::before{

content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.5),transparent);
transition:0.6s;

}

.login-btn:hover::before{
left:100%;
}

.login-btn:hover{

transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,210,255,0.6);

}

/* footer */

.footer-links{
margin-top:25px;
}

.footer-links a{
color:#aaa;
font-size:0.8rem;
text-decoration:none;
margin:0 10px;
}

.footer-links a:hover{
color:#fff;
}