style.css

.hero-converter {
    display: inline-block;
    background: #ddd;
    padding: 20px 30px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.form-control:focus {
    box-shadow: none;
}
.item span,.item p{
    display: inline-block;
    margin: 10px 0px;
}
.item span{
    min-width: 90px;
    font-weight: 600;
}

.red{
    background: #ef4646;
    border: 1px solid #be0707;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
.green{
    background: #55ca53;
    border: 1px solid #037802;
    color: #037802;
    font-family: 'Sriracha', cursive;
}
.blue{
    background: #908efe;
    border: 1px solid #1240c2;
    font-family: 'Dancing Script', cursive;
    font-size: 20px;

}
.yellow{
    background: #fff944;
    border: 1px solid #ffb714;
    color: #be0707;
    font-family: 'Teko', sans-serif;
    font-size: 24px;
}

.color-pan span{
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #ddd !important;
    border-radius: 6px;
    cursor: pointer;

}
.quote-text {
    vertical-align: middle;
    min-width: 400px;
    margin-right: 30px;
}
.color-pan {
    vertical-align: middle;
}

.quote-container {
    bottom: 77px;
    max-width: 600px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}

footer.text-center {
    display: relative;
    position: absolute;
    bottom: 22px;
    margin: 0 auto;
    width: 100%;
}