/**
 * @see https://teamtreehouse.com/community/shake-effect-with-javascript-only
 */
 
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.apply-shake {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

/**
 * Based on a snippet made by Mutiullah Samim.
 *
 * @see https://bootsnipp.com/snippets/vl4R7
 */

html, body {

   /* background-image: url('../images/login-background.jpg');*/
    background-color: #454d55;
    background-size: cover;
    background-repeat: no-repeat;

    height: 100%;

}

body {

    font-family: Arial, sans-serif;
    
}

.alert {

    max-width: 290px;
    margin: 15px auto;

}

.card {

    margin-top: auto;
    margin-bottom: auto;

    background-color: rgba(255, 255, 255, 0.7);

}

.card-header-name {

    font-family: Ubuntu, ubuntu-medium;

}

.input-group-text {

    width: 40px;

    background-color: #5dad1d;
    color: white;

    border: 0 !important;

}

input:focus {

    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
    
}