:root{
	--main-radius: 5px;
	--main-padding: 5px;

}
a:visited {color: white;}
a {color: white;}

.container{
	display: grid;
	height: 100vh;
	grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: 
		"main main main main main"
		"Logo-Info Logo-Info Logo-Info Logo-Info Logo-Info"
		"footer footer footer footer footer";
	grid-gap: 0.2rem;
	font-family: "garamond";
	font-weight: 800;
	font-size: 1em;
	color: white;
	text-align: center;
}	

nav1{
	grid-area: nav1;
	border-radius: var(--main-radius);
	padding:var(--main-padding);
	background: black;
	font-size: 1.5em;
}

nav2{
	grid-area: nav2;
	border-radius: var(--main-radius);
	padding:var(--main-padding);
	background: black;
	font-size: 1.5em;	
}

nav3{
	grid-area: nav3;
	border-radius: var(--main-radius);
	padding:var(--main-padding);
	background: black;	
	font-size: 1.5em;
}

nav4{
	grid-area: nav4;
	border-radius: var(--main-radius);
	padding:var(--main-padding);
	background: black;	
	font-size: 1.5em;
}

#Logo-Info{
	grid-area: Logo-Info;
	border-radius: var(--main-radius);
	padding:var(--main-padding);
	background: black;
	font-size: 1.5em;

	}

main{
	grid-area: main;
	border-radius: var(--main-radius);
	padding-top:var(--main-padding);
	background: black;
	}
	
footer{
		grid-area: footer;
		border-radius: var(--main-radius);
		padding-top:var(--main-padding);
		background: black;
		font-size: 1.2em;
}
/*****carrousel 3d automatique*****/

*{box-sizing : border-box}

img{max-width:100%}

.contenu_carou_auto{

margin:2rem auto;
width:600px;
height:400px;
perspective:8000px
	
	}
		
.caroussel-image{
	
animation:rotation 30s infinite alternate linear;	
transform-style:preserve-3d;
position:relative;	

}

.caroussel-image img{
	
position: absolute;
top:0;
left: 0;
	
	
	}


		
.caroussel-image img{
	
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:85%;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
	
	}
		
.caroussel-image img:nth-child(1){
	
transform:translate3d(0,0,600px)
		
		}
		
.caroussel-image img:nth-child(2){
	
transform:rotateY(45deg) translateZ(600px)
	
		}
		
.caroussel-image img:nth-child(3){
	
	transform:rotateY(90deg) translateZ(600px)
	
	}
	
.caroussel-image img:nth-child(4){
	
	transform:rotateY(135deg) translateZ(600px)
	
	}
	
.caroussel-image img:nth-child(5){
	
	transform:rotateY(180deg) translateZ(600px)
	
	}
	
	.caroussel-image img:nth-child(6){
	
transform:translate3d(0,0,600px)
		
		}
	

	
@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}
	
/*****fin carrousel 3d automatique*****/

@media only screen and (max-width:550px){ 
.container{
		grid-template-columns: 1fr;
		grid-template-rows:1fr 1fr 1fr 1fr 1f 1fr;
		grid-template-areas:
		"main"
		"Logo-Info"
		/* "nav1" */
		/* "nav2" */
		/* "nav3" */
		/* "nav4" */
		"content1"
		"content2"
		"content3"
		"footer";
            }
			
.contenu_carou_auto{

margin:2rem auto;
width:300px;
height:240px;
perspective:8000px
	
	}
		
.caroussel-image{
	
animation:rotation 30s infinite alternate linear;	
transform-style:preserve-3d;
position:relative;	

}

.caroussel-image img{
	
position: absolute;
top:0;
left: 0;
	
	
	}


		
.caroussel-image img{
	
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:85%;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
	
	}
		
.caroussel-image img:nth-child(1){
	
transform:translate3d(0,0,150px)
		
		}
		
.caroussel-image img:nth-child(2){
	
transform:rotateY(60deg) translateZ(150px)
	
		}
		
.caroussel-image img:nth-child(3){
	
	transform:rotateY(180deg) translateZ(150px)
	
	}
	
.caroussel-image img:nth-child(4){
	
	transform:rotateY(270deg) translateZ(150px)
	
	}
	
.caroussel-image img:nth-child(5){
	
	transform:rotateY(360deg) translateZ(150px)
	
	}
	
	.caroussel-image img:nth-child(6){
	
transform:translate3d(0,0,150px)
		
		}
	

	
@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}
	
/*****fin carrousel 3d automatique*****/
}