body{
	
	 margin:0;
	 font-family: ;
	 background-image: url(""); 
	 height: 100vh;
	 background-position: center;
	 background-size: cover;
	 overflow-x: hidden;
}
  .navbar
 {
	 position: absolute;
	 padding: 100px;
	 height: 100%;
	 top: -60px;
	 background-color: rgba(0, 0, 0, 0.7);
	 backdrop-filter: blur(10px);
	 width: 100%;
	 right: -200%;
	 transition: right 0.5s, transform 1s;
	 z-index:1;
	 
 }
 .navbar.change
 {
	 right: 0% !important;
	 transform: ;
 }
.navbar .logo{
	font-family: Brush Script MT;
	font-weight:bold;
	
	color:#a0db8e;
	font-size:50px;
	text-align:center;
	text-decoration-line: underline;
	text-decoration-color:#a0db8e;

}

li{ list-style:none;
	height:30px;
	 margin:2.5%;

}
a {
	text-decoration:none;
	color: white;
	font-size:1.5rem;
}
a:hover
{
	color:	#a0db8e;
	font-size:200%;
	transform: translate(50%, 50%);
}
	
.container{
	position:fixed;
	display:inline-block;
	cursor: pointer;
	left: 95%;
	top:50px;
	z-index:2;
	
}


.bar1, .bar2, .bar3{
	width: 35px;
	height:5px;
	background-color:#333;
	margin: 6px 0;
	transition:0.5s;
}

.change .bar1{
	 transform: translate(0, 11px) rotate(-45deg);
}
	.change .bar2{
	 opacity:0;
}
.change .bar3{
	 transform: translate(0, -11px) rotate(45deg);
}

h1
{	 text-shadow:5px 5px 5px black;
	 text-align: center;
	 font-size:100px;
	 font-weight:bold;
	 color: whitesmoke;
	 margin:0px;
	 background-image: url("panneaux.jpg"); 
	 padding-top:5%;
	 padding-bottom:5%;
	 margin-left:2.5%;
	 margin-right:2.5%
}
ul{ 
	 text-align:center;
	 margin:50px;
	
}