style.css

*{
	padding: 0;
	margin: 0;
 }

 

header{
	
	
	padding: 20px;
	
    background-image: url('images/banner_3.jpg');
    background-size: cover;
   width: 100%;

}

header h1{
	color: 	white;
	padding: 30px;
	margin: 10px;
}


body{
	background-color: grey;
	
}
h1{
	font-size: 80px;
}

.fb-share-button{
	clear float: both;
	align-items: center;
}

a {
	text-decoration:none;
}

footer a{
	color:white;
}

footer{
	
	background-color: #620dee;
	width: auto;
	color: white;
	padding:10px;
    clear: both;
 }

form{
	padding:
	20px;
	margin: 50px 50px;
}
nav{
	margin: 20px 30px;
	
	}
nav a{
		color:white;

	}

.feedback #card .card{
      float: right;
      margin: 0px;
      padding: 10px;
}
#card .card p { text-decoration: none;
	        color: white;
			font-size:25px;
			padding: 10px;
			text-align: left;



}
#card .card h2 
{ 

    color: white;
	font-size:25px;
	padding: 10px;
			



}
.btn{
	padding: 10px 15px;
	background-color: blue;
	float: right;
	margin-right: 3px;
	color:white;
	border-radius: 10px;
}
.btn:hover{
	background-color: white;
	border-color: blue;
	color:blue;
}
.btnC{
	padding: 10px 15px;
	background-color: blue;
	float: right;
	color:white;
	margin-right: 3px;
	color:white;
	border-radius: 10px;
}
.btnC:hover{
	background-color: white;
	border-color: blue;
	color:blue;
}

.feedback #card .card{
	background-image: url('images/banner_3.jpg');
	border-radius: 10px;
	width: 45%;
	padding: 20px;
	margin-left:0px;
	margin-right:0px; 
    float:left;
   opacity:0.8;
font-style: Verdana;}

.feedback #map{
	width:45%;
    height: 250px;
    margin: 0px;
    float:right;
    margin: 10px;
    border-radius: 10px;

}


.form{
	padding:20px;
	margin: 15px;
}

#mapsearch{ padding:15px;
	        border-radius: 20px;
            width:600px;
            border:1px groove grey;
}

.fb-share-button{
	padding: 15px;
	margin-left: 50%;]
	margin: 10px;
	align-items: center;
}


#map_d {
	float:right;
	text-align: left;
	margin-right: 50px;
	padding: 20px; 

}
#submit 
{
	border-radius: 10px;
	background-color: #6200ee;
	width:150px;
	margin:20px;
	padding:10px;
	color:white;
}

#submit:hover
{
	border-radius: 10px;
	background-color: #f0f1f0f1;
	width:150px;
	margin:20px;
	padding:10px;
	color:#6200ee;
}
.feedback{
		
}
.pac-icon{
	background-color: red;
}
.pac-matched{
	font-style: bold;
	color:gray;

}
.pac-container{
	background-color: #f0f1f0f1;

}


.body{
			
	}
	   
.footer{
	width: 100%;
	   	}
.arrow{
		color:white;
	}
.weatherCondition{
	width:100px;
	align-content: center;
	margin: 50px;
	text-align: center;
	background-color: white;
	

}
.weatherCondition button{
	padding: 10px;
}



@media all and (min-width: 320px) and (max-width: 780px) {

		footer a{
	           color:white;
        }

        .feedback{ padding: 10px;
        	  margin: 10px;
		
}

 footer{
	
	background-color: #620dee;
	color: white;
	background-size: cover;
	clear: none;
	width: 100%;
	
    }

		
header{	
	
    background-image: url('images/banner_3.jpg');
    width: 100%;
    background-size: cover;
    padding: 30px;
    
      }

header h1{
	color: 	white;
	padding: 10px;
	font-size: 35px;
}

.form{
	padding:10px;
	margin: 15px;
}

#mapsearch{ padding:15px;
	   border-radius: 20px;
       width:200px;
       border:1px groove grey;
}
	

.pac-icon{
	background-color: red;
}
.pac-matched{
	font-style: bold;
	color:gray;

}
.pac-container{
	background-color: #6200ee;
}
   .feedback #card .card{
	background-color: black;
	border-radius: 10px;
	width: 90%;
	margin: 10px;
    float:none;}

.feedback #map{
	width:100%;
    height: 300px;
    float:none;
    
}

#card .card p { 
	        color: white;
			font-size:20px;
			padding: 8px;
			text-align: left;
}


@media all and (min-width: 780px) and (max-width: 980px) {