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



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

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

}

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

@media (min-width:832px){

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

Body{
	max-width: 3840px;
	display: grid;
	grid-template-columns: 4em 8em 1fr 8em 3em;
	grid-template-rows: 1em 8em 12em 1fr 2em 2em;
	/*background-color:black;*/
	background-image: url("back_242.png");
	gap:1em;
  	background-repeat: repeat;
	background-attachment: fixed;
  	
}

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

.titre{
	grid-column: 3/4;	
	grid-row: 2/3;
	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: 120%;
}*/

.block1{
	grid-column: 3/4;	
	grid-row: 4/5;
	display: grid;
	grid-template-columns: 3em 16em 1fr 16em 3em;
	grid-template-rows: 1fr;
	position: relative;
}

.menubis{
	position:relative;
	grid-column: 1/-1;	
	grid-row: 3/4;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size:1vw;
	list-style-type: none;
	place-self:justify;
}

.menu{
	grid-column: 1/-1;	
	grid-row: 1/2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	font-size:1.8vw;
	list-style-type: none;
}

.menu1{
	grid-column: 1/2;
	Color:black;
	background-color:#FFA600;
	text-align: center;
	
}


.menu2{
	grid-column: 2/3;	
	float:left;
	background-color:#FF008F;
	color:black;
	text-align: center;
}

.menu3{
	grid-column: 3/4;
	float:left;	
	background-color:#4A00FF;
	Color:black;
	text-align: center;
}


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

.moment_id{
	position:relative;
	grid-column: 3/4;	
	grid-row: 3/4;
	font-size:2vw;
	place-self:center;
	color:white;
	background-color:black;
	opacity: 0.8;
	padding:0.5em;
}


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




.un{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.un:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.deux{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.deux:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.trois{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.trois:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.quatre{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.quatre:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}


footer{
	grid-column: 1/-1;	
	grid-row: 6/7;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	Color:white;
}

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

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

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

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

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

}

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


@media (max-width:831px){

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

Body{
	max-width:830px;
	display: grid;
	grid-template-columns: 0em 4em 1fr 5em 0em;
	grid-template-rows: 1em 5em 8em 1fr 2em 2em;
	/*background-color:black;*/
	background-image: url("back_242.png");
	gap:1em;
  	background-repeat: repeat;
	background-attachment: fixed;
  	
}

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

.titre{
	grid-column: 3/4;	
	grid-row: 2/3;
	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: 120%;
}*/

.block1{
	grid-column: 3/4;	
	grid-row: 4/5;
	display: grid;
	grid-template-columns: 3em 16em 1fr 16em 3em;
	grid-template-rows: 1fr;
	position: relative;
}

.menubis{
	position:relative;
	grid-column: -4/-1;	
	grid-row: 3/4;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size:1.2vw;
	list-style-type: none;
	place-self:justify;
}

.menu{
	grid-column: 1/-1;	
	grid-row: 1/2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	font-size:1.8vw;
	list-style-type: none;
}

.menu1{
	grid-column: 1/2;
	Color:black;
	background-color:#FFA600;
	text-align: center;
	
}


.menu2{
	grid-column: 2/3;	
	float:left;
	background-color:#FF008F;
	color:black;
	text-align: center;
}

.menu3{
	grid-column: 3/4;
	float:left;	
	background-color:#4A00FF;
	Color:black;
	text-align: center;
}


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

.moment_id{
	position:relative;
	grid-column: 3/4;	
	grid-row: 3/4;
	font-size:2.4vw;
	place-self:center;
	color:white;
	background-color:black;
	opacity: 0.8;
	padding:0.5em;
}


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

.un{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.un:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.deux{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.deux:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.trois{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.trois:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.quatre{
	font-size:1.2vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.quatre:hover { 
	font-size:1.2vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}





footer{
	grid-column: 1/-1;	
	grid-row: 6/7;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	Color:white;
}

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

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

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

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

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

}

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


@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: 1em 4em 4em 3em 1fr 2em;
	/*background-color:black;*/
	background-image: url("back_242.png");
	gap:1em;
  	background-repeat: repeat;
	background-attachment: fixed;
  	
}

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

.titre{
	grid-column: 1/-1;	
	grid-row: 2/3;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 80%;
	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/6;
	display: grid;
	grid-template-columns: 0em 8em 1fr 8em 0em;
	grid-template-rows: 1fr;
	position: relative;
}

.menubis{
	position:relative;
	grid-column: 2/-2;	
	grid-row: 4/5;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size:3vw;
	list-style-type: none;
	place-self:justify;
}

.menu{
	grid-column: 2/-2;	
	grid-row: 1/2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	font-size:3vw;
	list-style-type: none;
}

.menu1{
	grid-column: 1/2;
	Color:black;
	background-color:#FFA600;
	text-align: center;
	
}


.menu2{
	grid-column: 2/3;	
	float:left;
	background-color:#FF008F;
	color:black;
	text-align: center;
}

.menu3{
	grid-column: 3/4;
	float:left;	
	background-color:#4A00FF;
	Color:black;
	text-align: center;
}


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

.moment_id{
	position:relative;
	grid-column: 2/-2;	
	grid-row: 3/4;
	place-self:center;
	color:white;
	background-color:black;
	opacity: 0.8;
	padding:0.5em;
	font-size:4vw;
}


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


.un{
	font-size:3vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.un:hover { 
	font-size:3vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.deux{
	font-size:3vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.deux:hover { 
	font-size:3vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.trois{
	font-size:3vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.trois:hover { 
	font-size:3vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}

.quatre{
	font-size:3vw;
	color:#FF008F;
	text-decoration: underline;
	text-decoration-color: black;
}

.quatre:hover { 
	font-size:3vw;
  	text-decoration: underline;
	text-decoration-color: #FF008F;
  	color: black;
}




footer{
	grid-column: 1/-1;	
	grid-row: 6/7;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	Color:white;
}

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

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

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

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

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

}