:root {
    --noir: #3c3c3c;
    --vert: #96d72f;
    --rouge: #fd3c1d;
}

body {
    color: #1b1d1b
}

a:hover {
    color: #97d63f
}

.card {
    background-color: #fff;
    border: none;
}

.card-footer:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.card-body {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-image: url("/img/Reabita-Fond-ciel.png");
    background-size: cover;
}

.card-footer {
    background-color: #96d72f;
    border: none;
}

.text-kuffam {
    font-family: 'Kufam', cursive;
}

.text-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.text-vert {
    color: #97d63f
}

.text-noir {
    color: #1b1d1b
}

.inputEmail {
    display: inline-flex;
    border: 1px solid #e3e4e5;
    background: #e3e4e5;
    padding: 10px 10px;
    border-radius: .5rem;
}

.inputEmail input {
    border: none;
    outline: none;
    font-family: 'Kufam', cursive;
    color: #1b1d1b;
    background: #e3e4e5;
}

.form-control:focus {
    color: var(--noir);
    background-color: #e3e4e5;
    border-color: #e3e4e5;
    outline: 0;
    box-shadow: none;
}

.badge-success {
    background-color: var(--vert);
}

.badge-danger {
    background-color: var(--rouge);
}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/

.position-absolute {
    max-width: 300px;
    bottom: -82px;
    right: 20px;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .card-body {
        padding: 6rem !important;
    }

    .card-footer {
        padding: 3rem 6rem !important;
    }

    #logo {
        max-width: 100%
    }

    .inputEmail input {
        min-width: 300px;
    }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    #logo {
        max-width: 400px
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .position-absolute {
        max-width: 600px;
        bottom: -161px;
        right: 20px;
    }

}


/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

@media (min-width: 1400px) {

    .position-absolute {
        max-width: 600px;
        bottom: -161px;
        right: 20px;
    }
}

@media (min-width: 1800px) {

    .position-absolute {
        max-width: 800px;
        bottom: -214px;
        right: 20px;
    }

}