/*background-color:#30170E;*/



* {
	/*border: 1px solid black;
	box-sizing: border-box;*/
	font-family: Impact;
	color:#FF6A51;
}

A{
	text-decoration: none;
	color: inherit;
	display: block;
  	padding: 4px;
  
}

@font-face {
  	font-family: Impact;
  	src: url(Impact.ttf);
}

@media (min-width:893px){

@font-face {
  	font-family: Impact;
  	src: url(Impact.ttf);
}

Body{
	max-width: 1500px;
	display: grid;
	grid-template-columns: 4em 8em 1fr 8em 3em;
	grid-template-rows: 2em 2em 8em 8em 6em 1fr 2em 2em;
	background-color:#FF6A51;
	gap:1em;
}

.title{
	grid-column: 1/-1;	
	grid-row: 1/3;
}

.titre{
	grid-column: 3/4;	
	grid-row: 1/2;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 100%;
	height: 100%;
}

.image{
	grid-column: 2/5;	
	grid-row: 3/6;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 90%;
	border-radius: 25px;
	height: 100%;
}

.block1{
	grid-column: 3/4;	
	grid-row: 5/8;
	display: grid;
	grid-template-columns: 3em 16em 1fr 16em 3em;
	grid-template-rows: 1fr;
	background-color:black;
}

.menu{
	grid-column: 1/-1;	
	grid-row: 3/5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size:15px;
	list-style-type: none;
	place-self:justify;
}

.menu1{
	grid-column: 1/2;
	background-color:#786232;
	place-self:center;
}

.menu2{
	grid-column: 5/6;	
	float:left;
	background-color:white;
	Color:black;
	place-self:center;
}

.moment_id{
	grid-column: 3/4;	
	grid-row: 3/5;
	font-size:30px;
	place-self:center;
	color:white;
	background-color:black;
}


.moment{
	grid-column: 1/-1;	
	grid-row: 1/-1;
	font-size:15px;
	text-align:justify;
	border-top: 3px solid #FF6A51;
	border-bottom: 3px solid #FF6A51;
	padding-right: 50px;
	padding-left: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
	font-family:arial;	
	line-height:1.5em;
	color:#FF6A51;
	background:black;
}

.qs{
	font-size:30px;
	color:white;
}

footer{
	grid-column: 1/-1;	
	grid-row: 8/9;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	color:black;
}

.f1{
	grid-column: 1/2;	
	place-self:center;
	font-size:20px;
}

.f2{
	grid-column: 2/3;	
	place-self:center;
	font-size:20px;
}

.f3{
	grid-column: 3/4;	
	place-self:center;
	font-size:20px;
}

.f4{
	grid-column: 4/5;	
	place-self:center;
	font-size:20px;
}

.f5{
	grid-column: 5/6;	
	place-self:center;
	font-size:20px;
}

}

/*-------------------*/


@media (max-width:893px){

@font-face {
  	font-family: Impact;
  	src: url(Impact.ttf);
}

Body{
	max-width:892px;
	display: grid;
	grid-template-columns: 0em 4em 1fr 4em 0em;
	grid-template-rows: 2em 2em 8em 8em 8em 1fr 2em 2em;
	background-color:#FF6A51;
	gap:1em;
}

.title{
	grid-column: 1/-1;	
	grid-row: 1/3;
}

.titre{
	grid-column: 3/4;	
	grid-row: 1/2;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 100%;
	height: 100%;
}

.image{
	grid-column: 2/5;	
	grid-row: 3/6;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 100%;
	border-radius: 25px;
	height: 100%;
}

.block1{
	grid-column: 3/4;	
	grid-row: 5/8;
	display: grid;
	grid-template-columns: 0em 8em 1fr 8em 0em;
	grid-template-rows: 1fr;
	background-color:black;
}

.menu{
	grid-column: 1/-2;	
	grid-row: 4/5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size:15px;
	list-style-type: none;
	place-self:justify;
}

.menu1{
	grid-column: 1/2;
	background-color:#786232;
	place-self:center;
}

.menu2{
	grid-column: 5/6;	
	float:left;
	background-color:white;
	color:black;
	place-self:center;
}

.moment_id{
	grid-column: 2/-2;	
	grid-row: 3/5;
	font-size:25px;
	place-self:center;
	color:white;
	background-color:black;
}


.moment{
	grid-column: 1/-1;	
	grid-row: 1/-1;
	font-size:15px;
	text-align:justify;
	border-top: 3px solid #FF6A51;
	border-bottom: 3px solid #FF6A51;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family:arial;
	background:black;
	color:#FF6A51;
}

.qs{
	font-size:30px;
	color:white;
}



footer{
	grid-column: 1/-1;	
	grid-row: 8/9;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	color:black;
}

.f1{
	grid-column: 1/2;	
	place-self:center;
	font-size:15px;
}

.f2{
	grid-column: 2/3;	
	place-self:center;
	font-size:15px;
}

.f3{
	grid-column: 3/4;	
	place-self:center;
	font-size:15px;
}

.f4{
	grid-column: 4/5;	
	place-self:center;
	font-size:15px;
}

.f5{
	grid-column: 5/6;	
	place-self:center;
	font-size:15px;
}

}

/*-------------------*/


@media (max-width:573px){

@font-face {
  	font-family: Impact;
  	src: url(Impact.ttf);
}

Body{
	max-width:572px;
	display: grid;
	grid-template-columns: 0em 0em 1fr 0em 0em;
	grid-template-rows: 2em 2em 6em 6em 8em 1fr 2em 2em;
	background-color:#FF6A51;
	gap:1em;
}

.title{
	grid-column: 1/-1;	
	grid-row: 1/3;
}

.titre{
	grid-column: 3/4;	
	grid-row: 1/2;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 100%;
	height: 100%;
}

.image{
	grid-column: 2/5;	
	grid-row: 3/6;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 100%;
	border-radius: 25px;
	height: 75%;
}

.block1{
	grid-column: 3/4;	
	grid-row: 5/8;
	display: grid;
	grid-template-columns: 0em 8em 1fr 8em 0em;
	grid-template-rows: 1fr;
	background-color:black;
}

.menu{
	grid-column: 1/-2;	
	grid-row: 4/5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size:12px;
	list-style-type: none;
	place-self:justify;
}

.menu1{
	grid-column: 1/2;
	background-color:#786232;
	place-self:center;
}

.menu2{
	grid-column: 5/6;	
	float:left;
	background-color:white;
	color:black;
	place-self:center;
}

.moment_id{
	grid-column: 2/-2;	
	grid-row: 3/5;
	font-size:14px;
	place-self:center;
	color:white;
	background-color:black;
}


.moment{
	grid-column: 1/-1;	
	grid-row: 1/-1;
	font-size:15px;
	text-align:justify;
	border-top: 3px solid #FF6A51;
	border-bottom: 3px solid #FF6A51;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family:arial;
	background:black;
	color:#FF6A51;
}

.qs{
	font-size:30px;
	color:white;
}



footer{
	grid-column: 1/-1;	
	grid-row: 8/9;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	color:black;
}

.f1{
	grid-column: 1/2;	
	place-self:center;
	font-size:12px;
}

.f2{
	grid-column: 2/3;	
	place-self:center;
	font-size:12px;
}

.f3{
	grid-column: 3/4;	
	place-self:center;
	font-size:12px;
}

.f4{
	grid-column: 4/5;	
	place-self:center;
	font-size:12px;
}

.f5{
	grid-column: 5/6;	
	place-self:center;
	font-size:12px;
}

}