* { box-sizing: border-box;
}
*:focus { outline: none;
}
body { font-family: Arial; background-image: url(./login.jpg), linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)); padding: 50px; 
    background-size: cover; background-repeat: no-repeat; height: 100vh; display:flex; align-items:center; overflow:hidden; background-blend-mode: overlay;
}
.login { margin: 20px auto; width: 400px;
}
.login-form p { font-size: medium;
}
.login-screen { background-color: #FFF; padding: 20px; border-radius: 5px
}
.app-title img { width: 100%; padding: 45px 10px;
}
.app-title { text-align: center; color: #777;
}
.login-form { text-align: center;
}
.control-group { margin-bottom: 10px;
}
input { text-align: center; background-color: #ECF0F1; border: 2px solid transparent; border-radius: 3px; 
    font-size: 16px; font-weight: 200; padding: 10px 0; width: 350px; transition: border .5s;
}
input:focus { border: 2px solid #3498DB; box-shadow: none;
}
.btn { border: 2px solid transparent; background: #3498DB; color: #ffffff; font-size: 16px; line-height: 25px; 
    padding: 10px 0; text-decoration: none; text-shadow: none; border-radius: 3px; box-shadow: none; transition: 
    0.25s; display: block; width: 250px; margin: 0 auto;
}
.btn:hover { background-color: #2980B9;
}
.login-link { font-size: 12px; color: #444; display: block; margin-top: 12px;
}
@media screen and (max-device-width : 480px) { .login { margin: 25vh auto; width: 70vw;
    }
    input { width: 60vw;
    }
    .login-form p { font-size: small;
    }
}
@media screen and (max-device-width : 768px) { .login { width: 50vw;
    }
    input{ width: 35vw;
    }
}