* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
html,body {
    height: 100%;
    overflow: hidden;
}
.background {
    left: 0;
    top: 0;
    /*background-image: url("https://images.wallpapercare.com/wp-content/uploads/2017/01/bright-multi-colour-poligon-3d-fhd-wallpaper.jpg");
    */
    background-image: url("https://images.unsplash.com/photo-1592809617613-434cd2efab9d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80");
    background-size: 100%;
    filter:blur(8px);
    -webkit-filter: blur(8px);
    transform:scale(1.1);
    height: 100%;
}
.grid-container {
    display:grid;
    grid-auto-columns: 45fr 55fr;
    grid-auto-flow: column;
    height: 100%;
}
.grid-item{
    height: 100%;
    overflow: hidden;
}
.content {
    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

#form-grid {

    overflow-y: auto;
}
#login {
    margin-bottom: 20px;
}
#login-image {
    /*object-fit: cover;*/
    object-fit: cover;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    max-width: 100%;
}

#submitBtn {
    float: right;
}
#formSection {
    width: 80%;
    margin: auto;
}

#footer {
    margin-top:40px;
    position: fixed;
    bottom: 10px;
    left:35%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}


#main-card {
    width: 50%;
    height: 600px;
    min-width:250px;
    margin:auto;
}

#logoDiv {
    margin-top:60px;
    font-family: 'Roboto', sans-serif;
    font-size:20px;
}

#email, #password {
    border:0;
    border-radius: 0px;
}

#submitBtn {
    background-color: rgb(3, 182, 252);
    border: 0;
    margin-top:5px;	
}

#err {
    color:red;
}

#tagline {
    font-family: 'Roboto', sans-serif;
    font-size:30px;
    font-weight:bold;
}

#welcomeMsg {
    color:gray;
    margin-top:20px; 
    margin-bottom:20px;
}

.form-control:focus {
    border-color: #ff80ff;
    border-radius: 0px;
    box-shadow: -6px 0px 0px 0px rgba(3, 182, 252, 0.5);
}

.link {
    color:rgb(3, 182, 252);
}


@media only screen and (max-width: 1500px) {
    #main-card {
        width: 70%;
        height: 525px;
    }
    #logoDiv {
        margin-top: 20px;
    }
    #footer {
        left:30%;
    }
}

@media only screen and (max-width: 800px) {
    /*#image-grid {
        width: 0;
    }*/

    .grid-container {
        grid-auto-columns: 1fr 0fr;
    }
    
    #footer {
        left:50%;
    }
}