html {
    height: 100%
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    min-height: 100%;
    text-align: center;
    color: white;
    background: url("../images/main_bg.webp");
    background-size: cover;
}

.container {
    padding-top: 60px;
    padding-bottom: 40px;
    position: relative;
    z-index: 1
}

img {
    filter: drop-shadow(0px 4px 38px #000000);
}

#form_input .input-group {
    width: 62%;
    margin: 0 auto
}

#form_input .form-control {
    border-radius: 90px;
    box-shadow: 0 19px 38px -16px rgba(43, 211, 152, 0.58);
    border-color: #fff
}

#form_input_error.with-errors {
    color: #fff;
    background: red;
    padding: 5px 15px;
    display: inline-block;
}

.input-group-append .btn {
    cursor: pointer;
    width: 100px;
    background: #66C4A3;
    color: #000000;
    border-color: #66C4A3;
    border-radius: 4px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.info-box .alert {
    background-color: #2C3E50;
    border-color: #2C3E50;
    color: white;
}


@media screen and (max-width: 767px) {
    #form_input .input-group,
    #form_output {
        width: 100%
    }

    .input-group-append .btn {
        font-size: 16px
    }

}

@media screen and (max-width: 480px) {


    .input-group-append .btn {
        font-size: 14px
    }
}

@media screen and (max-width: 414px) {
    .input-group-append .btn {
        font-size: 12px
    }
}

@media (min-width: 768px) {
    .container {
        padding-top: 120px;
        padding-bottom: 70px;
    }
}