h2{
	font-family: Arial, Helvetica, sans-serif;
}
body {
	
	font-family: Garamond, Trebuchet MS, sans-serif;
	  background-image: linear-gradient(to bottom right, red, yellow);
	
}
a:link {
	color: black;
	text-decoration: none;
	background-color: none;
	padding: 4px;
}

a:visited {
	background-color: none;
	color: gray;
}

a:hover {
	font-size: 1.4em;
	background-color: orange;
	color: white;
}

a:active{
	color: red;
}







	


#navborder{
	
	background-color: lightblue;
	border-radius: 15px;
	border: 1px solid black;
	

}



ul{
	   list-style-type: none;
}
ul li{
	padding: 20px;
	background-color: white;
	margin-bottom: 5px;
	margin-right: 30px;
	text-align: center;
	border: 10px solid black;
}
#flex_picture{
	

	display: flex;
	flex-direction: row;
	flex-flow: row-wrap;
	flex-wrap: wrap;
	align-items: center;
	
	
	



}
#flex_picture ul{
	
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content:flex-start ;
	

}

#flex_picture li{
	width: 177px;
	border-radius: 15px;
	background-color: papayawhip;
	padding:5px;
	
	margin: .5em;
}

#grid_picture{
	display: grid;
	grid-template-columns: 33% 33% 34%;
	grid-template-rows: 50% 50%;
	column-gap: 2%;
	row-gap: 10px;
	
	margin-right: 20px;
	
}
#grid_picture ul{
	
	
	
}
#grid_picture li{
	margin: auto;
	padding: 5px;
	background-color: papayawhip;
	border-radius: 15px;
	
	
	
}
@media (max-width: 700px){
	body{font-size: 50%;
		background-color: gray;
	}
	p {
		background-color: pink;
	}
}
@media (max-width: 999px){
	body{font-size: 50%;
		background-color: gray;
	}
	p {
		background-color: pink;
	}
}
@media (min-width: 1000px){
	body{font-size: 50%;
		background-color: gray;
	}
	p {
		background-color: pink;
	}
}