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

body{
    background:url("images/bg.png") no-repeat center center fixed;
    background-size:cover;
    min-height:100vh;
}

/* min-height (not height): on a short screen - phone in landscape, or
   with the on-screen keyboard open - the page grows and scrolls instead
   of cutting the login box off */
.overlay{
    width:100%;
    min-height:100vh;
    padding:20px 0;
    background:rgba(255,255,255,0.25);
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-box{

    width:320px;
    background:#ffffffee;

    padding:25px;

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

    border-radius:3px;
}

.logo{

    width:90px;
    margin-bottom:10px;
}

.title{

    color:green;
    font-size:24px;
    font-weight:bold;
    margin-bottom:2px;
}

.title1{

    color:orange;
    font-size:24px;
    font-weight:bold;
    margin-bottom:2px;
}

.sub-title{

    color:#1c5f88;
    font-size:14px;
    margin-bottom:18px;
}

.login-text{

    color:#666;
    font-size:14px;
    margin-bottom:20px;
}

.form-control{

    height:42px;
}

.form-select{

    height:42px;
}

.input-group-text{

    background:#f8f9fa;
}

.btn-primary{

    background:#2d88c9;
    border:none;
    height:42px;
    font-weight:bold;
}

.btn-primary:hover{

    background:#1b6ea8;
}

@media(max-width:768px){

.login-box{

    width:90%;
    max-width:360px;
}

}


/* =========================================================
   ANIMATIONS ONLY - layout, colours and sizes above are unchanged
========================================================= */

/* same background image, slowly zooming */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:url("images/bg.png") no-repeat center center;
    background-size:cover;
    animation:bgZoom 30s ease-in-out infinite alternate;
    z-index:0;
}

.overlay{
    position:relative;
    z-index:1;
}

/* login box slides up and fades in */

.login-box{
    animation:boxIn .9s cubic-bezier(.2,.8,.2,1) backwards;
}

/* logo spins in, then floats gently */

.logo{
    animation:logoIn .8s .3s backwards, logoFloat 4s 1.1s ease-in-out infinite;
}

/* SARVODAYA from the left, FOUNDATION from the right */

.title{
    animation:slideLeft .7s .5s backwards;
}

.title1{
    animation:slideRight .7s .65s backwards;
}

.sub-title{
    animation:fadeUp .6s .8s backwards;
}

.login-text{
    animation:fadeUp .6s .9s backwards;
}

/* form rows appear one after another */

.login-box form > div{
    animation:fadeUp .6s backwards;
}

.login-box form > div:nth-child(1){ animation-delay:1.0s; }
.login-box form > div:nth-child(2){ animation-delay:1.1s; }
.login-box form > div:nth-child(3){ animation-delay:1.2s; }
.login-box form > div:nth-child(4){ animation-delay:1.3s; }

/* light shine sweeping across the Sign In button */

.btn-primary{
    position:relative;
    overflow:hidden;
}

.btn-primary::after{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform:skewX(-20deg);
    animation:shine 3.5s 2s ease-in-out infinite;
}

@keyframes bgZoom{
    from{ transform:scale(1); }
    to  { transform:scale(1.1); }
}

@keyframes boxIn{
    from{ opacity:0; transform:translateY(40px) scale(.95); }
    to  { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes logoIn{
    from{ opacity:0; transform:scale(.3) rotate(-180deg); }
    to  { opacity:1; transform:scale(1) rotate(0); }
}

@keyframes logoFloat{
    0%, 100%{ transform:translateY(0); }
    50%     { transform:translateY(-6px); }
}

@keyframes slideLeft{
    from{ opacity:0; transform:translateX(-40px); }
    to  { opacity:1; transform:translateX(0); }
}

@keyframes slideRight{
    from{ opacity:0; transform:translateX(40px); }
    to  { opacity:1; transform:translateX(0); }
}

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(15px); }
    to  { opacity:1; transform:translateY(0); }
}

@keyframes shine{
    0%  { left:-75%; }
    40% { left:130%; }
    100%{ left:130%; }
}

/* users who turn off motion in their OS get the static page */

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation:none !important;
    }
}