*{

box-sizing:border-box;

font-family:Arial, Helvetica, sans-serif;

}



body{


margin:0;

height:100vh;

background:

radial-gradient(

circle at top,

#15294d,

#050812

);


display:flex;

justify-content:center;

align-items:center;

}




.login-page{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

}





.login-card{


width:380px;


background:#0d1424;


padding:45px;


border-radius:25px;


box-shadow:


0 0 40px #000;


border:

1px solid #182742;


text-align:center;


}





.login-card h1{


margin:0;


font-size:38px;


color:#00eaff;


text-shadow:


0 0 20px #00eaff;


}




.login-card p{


color:#9ba9c4;


margin-bottom:35px;


}





.login-input{


position:relative;


margin-bottom:30px;


}





.login-input input{


width:100%;


background:transparent;


border:none;


border-bottom:

2px solid #54647c;


padding:12px 5px;


color:white;


font-size:17px;


outline:none;


}





.login-input label{


position:absolute;


left:5px;


top:12px;


color:#8c99ad;


pointer-events:none;


transition:.3s;


}




.login-input input:focus,

.login-input input:valid{


border-bottom-color:#00eaff;


}




.login-input input:focus + label,

.login-input input:valid + label{


top:-15px;


font-size:12px;


color:#00eaff;


}





.login-button{


width:100%;


padding:15px;


margin-top:10px;


background:#101827;


color:#00eaff;


border:

1px solid #00eaff;


border-radius:15px;


font-size:18px;


cursor:pointer;


transition:.3s;


}





.login-button:hover{


background:#00eaff;


color:#000;


box-shadow:


0 0 25px #00eaff;


transform:translateY(-2px);


}





@media(max-width:500px){


.login-card{


width:90%;


padding:35px;


}


}