/* This css structure of this web site*/

*  { 
	margin:0;
	padding:0;
	box-sizing: border-box;
	}

main {
		width:100%;
		margin: 10px auto;
		}
 		
 		
 .flex-container  {
				display: flex;
				flex-direction:column;
				flex-wrap:no-wrap;
				border-width:1px;
				margin:20px auto;
				background-color: lightblue;
				border:2px solid black;
				border-radius: 25px;
				box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
				}
				
header {
		display:flex;
		flex-direction:column;

		}
		
	nav  {
		display:flex;
		justify-content:center;
		flex:2;
		padding: 10px;
		color:white;
		background-color: black;
		}

 .flex-gallery 	{
 				margin:10px auto;
				display:flex;
				justify-content:center;
				align-items;center;
 					}			
 .flex-gallery figure {
 				padding:10px;
	        	background-color: beige;
	        	text-align:center;
	        	font-size: 15px;
	        	border: 1px solid black;
	        	border-radius: 15px;
	        	margin: 15px;
	        	width: 300px;
	        	}
	        	
figcaption {
			font-size: 1.2em;
			color:black;
			text-align:center;
			}

	        		
figure img {
	border-radius: 15px;
	padding:0;
		}


.column {
		flex:1;
		basis:30%;
		}
			
		
	

	footer  {
	    color:white;
		padding: 10px;
		background-color: black;
		text-align: center;
		clear: both;
	    border-bottom-left-radius: 24px;
	    border-bottom-right-radius: 24px;
		}
		
@media screen and (max-width: 800px) {
     .column {   
        flex:2;
        basis:50%;
    }

@media screen and (max-width: 900px) {
     .flex-gallery {   
        flex-direction: column;
    }