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



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

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 12em 12em 1fr 2em 2em;
	background-color:#CAB99A;
	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: 90%;
}

.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:#CAB99A;
}



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


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



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

.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 12em 1fr 2em 2em;
	background-color:#CAB99A;
	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: 90%;
}

.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:#301C22;
}



.moment_id{
	grid-column: 2/-2;	
	grid-row: 3/5;
	font-size:22px;
	place-self:center;
	color:white;
	padding-right: 8px;
	padding-left: 8px;
	background-color:#CAB99A;
}


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



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

.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:#CAB99A;
	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: 90%;
}

.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:#301C22;
}



.moment_id{
	grid-column: 2/-2;	
	grid-row: 3/5;
	font-size:22px;
	place-self:center;
	color:white;
	padding-right: 8px;
	padding-left: 8px;
	background-color:#CAB99A;
}


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



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

.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;
}

}