/* We moved the inline styles here to make the code cleaner! */

body {
    background-color: black;
    color: white;
    font-family: 'Open Sans', sans-serif;
}

#page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Make sure it takes up the full screen height */
}

.login-container {
    width: 100%;
    max-width: 450px;
    /* Limits how wide the login box gets */
    padding: 20px;
    animation: fadeIn 1s;
    /* Mimics the animate.css effect */
}

.form-control-lg,
.btn-lg {
    font-size: 14px;
    padding: 12px 16px;
    height: auto;
}

.logo-img {
    width: 100%;
    max-width: 400px;
    border-radius: 5px;
}

/* Customizing the Bootstrap inputs to match their dark theme */
.custom-input {
    background-color: #403d3d !important;
    color: white !important;
    border: none;
}

.custom-input::placeholder {
    color: #a0a0a0;
}

/* Simple fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.btn {
    font-weight: 700;
}

.btn-success {
    background-color: #00acac;
}