#login {

    margin: 0;

    padding: 0;

    background-color: #ccc;

    background: url('../img/backgg.jpg') fixed;

    background-size: cover;

    background-position: bottom;

}



#login .img {

    /* width: 380px;

    position: absolute;

    left: 35%;

    top: 15%; */

    max-width: 250px;

    border-radius: 5px;

}



#login-container {

    position: relative;

    height: 100vh;

    width: 100vw;

}



#login-container .card {

    min-width: 30%;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    border-radius: 5px;

}



.cardd {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    transition: 0.3s !important;

    background: linear-gradient( 45deg, #5c4242, #602c77);

    border-radius: 5px;

    height: 150px;

    color: #fff;

    font-size: 1.2em;

}



.cardd:hover {

    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);

    font-size: 1.5em;

}





/* #login .cards {

    margin-top: 20%;

} */



@media (max-width: 640px) {

    #login-container .card {

        min-width: 90%;

    }

}