header{
    height: 150px;
    padding-top: 30px;
    font-size: 2.5rem;
    background-color: rgba(9, 9, 32, 0.788);
    color: rgba(255, 248, 220, 0.808);
    font-family: 'Merriweather', serif;
}
input{
    text-align: center;
}
.container{
    text-align: center;
    line-height: 300%;
}
.search-box{
    border: 1px solid rgb(221, 213, 213);
    background-color: #e9ecef;
}
.search-head{
    margin: 5px 0;
    padding: 0 5px;
    font-size: 2rem;
    font-weight: 500;
    color: rgb(100, 98, 98);
}
.lead{
    font-family: 'Merriweather', serif;
    color:  rgb(98, 107, 116);
    margin: 0 40px;
}
.uvIndex{
    padding: 5px;
    color: white;
}
.card{
    margin: 15px;
}
#cityWrap{
    margin-bottom: 0;
    background-color: #cccfd3;
}
#cityName{
    color:  rgb(98, 107, 116);
    margin-bottom: 15px;
}
#button-addon2:active{
    background-color: rgb(66, 65, 65);
}
#button-addon2:focus{
    box-shadow: none;
}
#forecast-head{
    margin: 5px 0;
    padding: 0 5px;
    font-size: 2rem;
    font-weight: 500;
    color: rgb(100, 98, 98);
}
#list{
    cursor: pointer;
    font-weight: 500;
    font-size: 1.5rem;
    position: relative;
    background-color: #e9ecef;
}
#list:hover{
    background-color: whitesmoke;
}
#clearBtn{
    color: rgb(212, 207, 207);
    position: absolute;
    border:none;
    margin-left: 50px;
    right: 10px;
}
#clearBtn:hover{
    color: rgb(122, 119, 119);
}
#forecastWrap{
    background-color:#b4bbc3;
}
@media screen and (min-width:486px){
    header{
        padding-top: 50px;
    }
}