@import url(fonts.css);

header{
    height: 50px;
}
div>p{
    text-align: left;
    color: #312a2a;
    font-size: 13px;
}
#result{
    height: 150px;
}
.input-field,
.range-field{
    margin: 0 0 45px 0;
}
.input-field label {
    left: 0;
}
.color>p,
.color>div{
    display: inline-block;
}
.color{
    margin: 0 0 30px 0;
}
.color>p{
    margin: 0 10px 0 0;
}
.color{
    display: flex;
    align-items: center;
}
.text-area{
    width: 70%;
    margin: 0 auto;
}
.input-field.text-area,
.range-field.text-area{
    margin-bottom: 45px;
}
button{
    margin: 0 10px 0 0;
}
.left{
    text-align: left;
}


/*=============================================
=            Section text shadow              =
=============================================*/
#result {
    margin: 40px 0;
}
#blackout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    z-index: 100;
}
#preloader {
    position: fixed;
    top: 37%;
    left: 48%;
    z-index: 1000;
}
/*=====  End of Section comment block  ======*/