style.css

body {
	background-image: url("./img/dfw2.gif");
	/* min-height: 100px; */
	background-size: cover;
	/* background-position: center; */
	background-repeat: no-repeat;
    color: white;
 
} 

.citybtn {
color: white;

}

.cityInfo {

    position: relative;
    top: 50px;
    float: left;
    
}
.cardBody {
height:150px ; 
width: 680px; 

float: left;
border: white ;
position: relative;
opacity: .7;
background-color: black;
color: white;
margin-bottom: 2px;
border-radius: 50px;
padding: 4px; 
margin-left: 15px; 
padding-left: 25px; 
padding-bottom: 10px;
padding-top: 10px;
border-style: thin;
margin-right: 0px; 

} 
.searchBody {
    position: relative;
    height:150px ;
      opacity: .7;
    background-color: black;
    color: white;
    border-radius: 50px;
    padding: 2px; 
    padding-left: 0px; 
    width: 270px;
    margin-left:0px ;
}

 li {
    display:block;
    float:left;
    padding: 1px; 
    padding-left: 1px; 
    padding-bottom: 0px;
    padding-top: 0px;
    margin-left: 15px;
    margin-top: 0px;
  
     } 


 hr.new1 {
    border-top: 1px solid white;
 }

.fiveday{
    text-align: center;
    padding: 0px;
    margin-left: 50px;
    margin-top: 0px;
}

.history{
height: 755px;
margin-top:75px;
padding-top:10px;
width:175px;

}

.hBTN {
    background-color: black;
    opacity: .8;/* Green background */
    border-radius: 30px;
    border: 1px solid white;  /*Green border */
    color: white;  /* White text */
    padding: 5px 25px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 75%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
    margin: auto;
    text-align: center;
    outline:none;
    border-bottom: none;
    
}

.btnH:hover {
    background-color:lightskyblue;
    color: black;
}
.cardBody:hover {
    background-color:lightskyblue;
    color: black;
    opacity: .9;/* Green background */

}