html, body {
    background-color: darkgrey ;
    height: 100%;
}

.navbar {
    background-color: slategray;
    
    justify-content: center;
    box-shadow: 0px 4px 0px 0 rgba(68, 66, 66, 0.673)
}
 

.footer {
    background-color: slategray;
}

#mainW {
    background-color: turquoise;
    box-shadow: 4px 4px 5px 0; 
}


#d1 {
    
    background-color: skyblue;
    box-shadow: 4px 4px 5px 0 rgb(69, 136, 136) 
    
}

#d2 {
    color: silver;
    background-color: royalblue;
    box-shadow: 4px 4px 5px 0 rgb(69, 136, 136) 
   

}

#d3 {
    color: silver;
    background-color: slateblue;
    box-shadow: 4px 4px 5px 0 rgb(69, 136, 136)
    

}

#d4 {
    color: silver;
    background-color: steelblue;
    box-shadow: 4px 4px 5px 0 rgb(69, 136, 136)
   

}

#d5 {
    
    background-color: silver;
    box-shadow: 4px 4px 5px 0 rgb(69, 136, 136) 

}

.city-btn {
    
    float: left;
    border-radius: 5px;
}

.city-btn:hover {
    box-shadow: 4px 4px 5px 0 rgb(69, 136, 136);
    
}

#userInput {
    width: 250px;
    border-radius: 5px
}


#searchBtn {
    
    text-align: center;
    border-radius: 5px;
}

#searchBtn:hover {
    box-shadow: 4px 4px 5px 0 rgb(79, 79, 79);
    background-color: rgb(69, 136, 136);
    
}

#clear-history {
    /* width : 80%; */
    box-shadow: rgb(69, 136, 136);
    border-radius: 5px;
}

#clear-history:hover {
    box-shadow: 4px 4px 5px 0 rgb(79, 79, 79);
    background-color: rgb(69, 136, 136);
    
}

@media screen and ( min-width: 200px ) and ( max-width: 576px ) {
    #userInput, .searchSection, #clear-history, .city-btn, #searchBtn, .form-group { width: 100%; justify-content: center; align-items: center;} 
    
    }

@media screen and ( min-width: 576px ) and ( max-width: 767px ) {
    #clear-history, #userInput, .city-btn, #searchBtn { width: 495px }
    }

@media screen and ( min-width: 768px ) and ( max-width: 991px ) {
    #clear-history, #userInput, .city-btn, #searchBtn { width: 675px }
    }

@media screen and ( min-width: 992px ) and ( max-width: 1999px ) {
    #clear-history, #userInput, .city-btn, #searchBtn { width: 220px }
    }

@media screen and ( min-width: 1200px ) {
    #clear-history, #userInput, .city-btn, #searchBtn { width: 250px }
    }