html, body{
    height: 100%
}

.card {
    width: 480px;
    max-width: 100%;
    margin: 0 auto;
}

.card-body {
    margin: 10px 10px;
}

@media (min-width: 641px) {
    .card-body {
        margin: 30px 60px;
    }
}

body {
    background: #cebe29;
    background: linear-gradient(-45deg, #cebe29 0%, #9b1f50 33%, #2989d8 71%, #89b4ff 91%) fixed;
    -moz-background-size: 100% 100%;
    background-size: cover;
    background-size: 100% 100%;
    background-position: center center;
    color:#fff;
}

div.logo {
    text-align: center;
    margin: 1em 0;
}

div.logo svg {
    width: 50px;
}
div.logo svg path{
    fill: rgba(255,255,255,0.9);
}
div.logo a{
    display: block;
    font-size: 36px;
    color:#fff;
    text-decoration: none;
}

h1 {
    font-size: 1.8em;
}

main {

    max-width: 100%;
    margin: 0 auto;
    padding-top:10px;
}

.alert {
    color:#fff;
    margin:1em 0 0 0;
}

.alert.alert-success {
    background-color:green;
    border-color: green;
}

.alert.alert-danger {
    background-color:#D90A00;
    border-color: #D20000;
}

.form-control:focus,
.form-control {
    background-color: transparent;
    color:#000;
    border-radius: 0;
}

.btn {
    border-radius: 0;
}

.form-control::placeholder,
.form-control::-moz-placeholder {
    color: #000;
    opacity: 0.9;
}

input:required:invalid {
    outline: none;
    box-shadow: none;
}