body{
    margin:0;
    min-height:100vh;

    background:
        linear-gradient(rgba(8,15,28,.75), rgba(8,15,28,.75)),
        url('/img/Blue.jpg') center center/cover no-repeat fixed;

    background-size:cover;

    animation:backgroundZoom 25s ease-in-out infinite alternate;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

/* Center everything */
.vertical-center{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Login Card */
.login{
    width:100%;
    max-width:520px;

    background:rgba(20,25,35,.65);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.08);
	
	position:relative;

	overflow:hidden;

    border-radius:18px;

    padding:45px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.45);
}

.login .form-control{
    width:100% !important;
}

.login::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:1px;

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

}

.login input.form-control{

    height:52px;

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

    color:white;

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

    border-radius:12px;

    box-shadow:none;

    font-size:16px;

    transition:all .25s ease;
}

.login input.form-control:focus{

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

    border-color:#2EA8FF;

    box-shadow:
        0 0 0 4px rgba(46,168,255,.15);

    color:white;
}

.login input::placeholder{

    color:#8ca5bc;

}

.login .btn{

    width:100%;

    height:48px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #0084ff,
        #00bfff
    );

    color:white;

    font-size:16px;

    font-weight:600;

    letter-spacing:.5px;

    transition:all .25s ease;
}

.login .btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 30px rgba(0,120,255,.35);
}

.login .btn:active{

    transform:translateY(0);
}

.login-footer{

    position:fixed;

    bottom:20px;

    width:100%;

    text-align:center;

    color:#8da2b8;

    font-size:14px;

    letter-spacing:1px;
}

.login h2{

    color:white;

    font-size:34px;

    font-weight:300;

    margin-bottom:8px;
}

.login p{

    color:#9db4c9;

    margin-bottom:40px;
}

.login{

    animation:fadeIn .8s ease;
}

.navbar{

    background:rgba(20,20,20,.85);

    backdrop-filter:blur(12px);

    border:none;

    box-shadow:
        0 2px 12px rgba(0,0,0,.3);

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}