body	{	
		margin:0;
		padding:0;
        	font-family: "Helvetica Neue", helvetica, sans-serif;
		color: #111;
		
}

@media (min-width: 800px) {

.frame {	display:grid;	
		grid-gap: 0;
		grid-template-columns:250px 1fr 250px;
		grid-template-areas:"left content right";
		font-size:120%;
		height:1000vw;}
h1{	margin:0;
	background-color:#fff; 
	color:#111;
	text-align:center;
	}
.left{background-color:#aa9d91;
	grid-area:left;
	}
.right{background-color:#9e7647;
	grid-area:right;
	
}

.menu a 	{display: block;
        	text-decoration: none;
        	padding: 18px 18px;
		margin-top:-5px;;
}
.left .menu a{color:#111;}
.left .menu a.active {
        	background-color:#d9d3ce;
        	color: #111;
}
.right .menu a.active {
                background-color:#8f683c;
                color: #fff;
}
.menu a:hover:not(.active) {
        	background-color: #333;
        	color: #fff;
}

.content {	grid-area:content;
		 padding:15px;
		margin:0 auto;
			}

img {
        max-width: 100%;
        height: auto;
}

a{text-decoration: none;
        color: #fff;
}
footer{ 
	font-size: 80%;
	color:grey;
	background-color: #fff;

}

.lien{text-align:center;}
.lien a{color:grey;
}
}
@media (max-width: 800px){

.frame{display:grid;  
                grid-gap: 5px;
		grid-template-columns:1fr;
		margin:5px;
		padding:5px;
		font-size:110%;}
.left{background-color:#111;}
.left .menu a{color:#fff;} 
.left img{display:none;}
.right img{display:none;}
.content img {
        max-width: 100%;
        height: auto;
}
.menu a{display:grid;
	grid-template-columns:1fr;
	text-align:center;
	text-decoration: none;
	padding:5px;}
.left .menu a.active {
   	color:#d13d31;}
.lien a{text-decoration:none;}
footer{
       height:50px;
        width:100%; 
        font-size: 80%;
	position:fixed;
	bottom:0;
	left:0;
	text-align:center;
	align-items:center;
}
}