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

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#0d6efd,#4facfe,#00c6ff);

overflow:hidden;

position:relative;

}

body::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#ffffff22;

border-radius:50%;

top:-120px;

left:-120px;

filter:blur(20px);

}

body::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:#ffffff22;

border-radius:50%;

bottom:-100px;

right:-100px;

filter:blur(20px);

}

.overlay{

position:absolute;

width:100%;

height:100%;

backdrop-filter:blur(5px);

}

.login-box{

position:relative;

width:420px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(18px);

padding:40px;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.25);

border:1px solid rgba(255,255,255,.3);

text-align:center;

z-index:2;

animation:fade .8s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.logo{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

color:#0d6efd;

margin-bottom:20px;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}

.login-box h2{

font-weight:bold;

color:#fff;

}

.subtitle{

color:#f5f5f5;

margin-bottom:30px;

}

.input-group-text{

background:#0d6efd;

color:#fff;

border:none;

}

.form-control{

height:50px;

border:none;

}

.form-control:focus{

box-shadow:none;

}

.btn-login{

width:100%;

background:#fff;

color:#0d6efd;

font-weight:bold;

padding:13px;

border-radius:12px;

border:none;

transition:.3s;

}

.btn-login:hover{

background:#0d6efd;

color:#fff;

transform:translateY(-3px);

}

.btn-home{

width:100%;

margin-top:12px;

border:2px solid #fff;

color:#fff;

padding:12px;

border-radius:12px;

}

.btn-home:hover{

background:#fff;

color:#0d6efd;

}

.alert{

text-align:left;

}

@media(max-width:576px){

.login-box{

width:92%;

padding:30px 20px;

}

.logo{

width:75px;

height:75px;

font-size:30px;

}

}