body{
	width: 100%;
	height: auto;
	background: grey;
	margin: 0;
	position: fixed;

	
}

.conteneur{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100vh;
	justify-content: center;

}

#canvas{
	width: 100%;
}

#overlay{
	width: 100%;
	height: auto;
	padding-bottom: 20%;
	padding-top: 20%;
	z-index: 2000;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
	flex-wrap: wrap;

}

.ccanva{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: -20px;
}

#menu{
	width: 50%;
	height: 100%;


}

#menu img{
	width: 50%;
	height: auto;
	position: absolute;
	top: 20%;
	left: 25%;
	z-index: -1;
}

#contain{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.image{
	width: 100%;
}


.image img{
	height: auto;
	width: 3%;
	margin: 10px;
}


.letext{
	width: 70%;
	height: auto;

	z-index: 100;
}









button{
	width: 100%;
	z-index: +1;
	margin: 1.5%;
	background:none;
	border:none;
	cursor: pointer;
	font-size: 2vw;
}

#togg1{

}





.audio{
	display: flex;
	justify-content: center;
	width: 100%;
	z-index: +1;
}

#aud{
	width: 50%;
}

#touches{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	display: none;
}

#touches p{
	width: 40%;
	margin: 2%;
	margin-left: 10px;
	font-size: 1.5vw;
	height: 25%;
	margin-top: 0;
}

#touches input{
	width: 6%;
	height:50%;
}

#touches h1{
	font-size: 1.8vw;
	width: 50%;
	text-align: center;
}

.gauche{
	text-align: right;
}

a{
	text-decoration: none;
	color: black;
}









#start{
	width: 100%;
	height: auto;
	padding-bottom: 20%;
	padding-top: 0%;
	background-image: url('Images/woaw.png');
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 2000;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

#lol{
	width: 50%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;


	margin-top: 6%;


}

@media(max-width:600px){

}

button{

	font-size: 2vw;
	background:none;
	border:none;
	background-image: linear-gradient(45deg, #835d16, #ffa600);
    background-size: 100%;
    background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  cursor: pointer;
  z-index: 10000;
}

#mess{
	margin-top:40%;
	width: 50%;
	height: 100%;
	margin-left: 55%;
}

#mess img{
	width: 50%;
	height: auto;
	position: absolute;
	top: 20%;
	left: 40%;
	z-index: -1;
}

#oe2{
	display: none;
	justify-content: center;
}

#oe1{
	display: flex;
	justify-content: center;
}




#player1{
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;

}


.gros{
	cursor: pointer;
}

#fin{
	width: 50%;
	height: auto;
	padding-bottom: 20%;
	padding-top: 20%;
	z-index: 2000;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

#mess2{
	width: 50%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
}



#mess2 form{
	margin-top: 28%;
	margin-left: 10%;

}

#pseudo{
	width: 50%;
	height: 5%;
	background-color: #d9a96b;
	border-color: #b27323;
}

#ratio{
	background-image: linear-gradient(0deg, #835d16, #ffa600);
    background-size: 100%;
    background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  z-index: 10000;
  overflow:hidden;
}

#envoyer{
	width: auto;
	height: auto;
	background:none;
	border:none;
	font-size: 1.5vw;
	cursor: pointer;
	background-image: linear-gradient(0deg, #835d16, #ffa600);
    background-size: 100%;
    background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  z-index: 10000;
  overflow:hidden;
}



#mess2 h1{
	width: 100%;
	font-size: 2vw;
}

#class{

	background-color: rgb(238, 204, 160, 0.9);
	box-shadow: -5px 5px 5px rgb(0, 0, 0, 0.4);
	padding: 10px;
	border-radius: 20px;
	width: auto;
	max-height: 50%;
	position: absolute;
	left: 10%;
	top: 20%;
	overflow: hidden;
}


#class a{
	font-size: 2vw;
	background:none;
	border:none;
	background-image: linear-gradient(0deg, #835d16, #ffa600);
    background-size: 100%;
    background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  z-index: 10000;
  overflow:hidden;
}

#class h1{
	font-size: 2vw;
	background:none;
	border:none;
	background-image: linear-gradient(0deg, #835d16, #ffa600);
    background-size: 100%;
    background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  z-index: 10000;
}


.mort{
	position: absolute;
	width: 80%;
	height: auto;
	z-index: -1;
	border-radius: 20px;
}