@charset "utf-8";
/* CSS Document */
body
{
background-color:black;
}

/* created by ioani */

#landing
{
	background-color:#e6e6e6;
width:800px;
height:1400px;	
	position:absolute;
top:10px;
left:10px;
	z-index:1;
	text-align:center;
display:block;
cursor:pointer;
border:solid 2px;
}

#game
{
background-color:white;
width:800px;
height:1400px;	
z-index:1;
position:absolute;
top:10px;
left:10px;
border:solid 2px;
}

#testing
{
background-color:white;
width:300px;
height:1400px;	
z-index:1;
position:absolute;
top:10px;
left:820px;
display:none;
}
.btntest {
	background-color: #00b300;
	border-radius:200px;
	border:4px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:48px;
	padding:22px 30px;
	text-decoration:none;
	width:230px;
	height:140px;
margin-left:20px;
margin-top:40px;

}


#home
{
	background-color:#e6e6e6;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:23;
	text-align:center;
display:block;
cursor:pointer;
}
.logolandberry
{
background-image:url(images/logo.png);
	background-size:400px 400px;
	background-color:transparent;
width:400px;
height:400px;	
	position:absolute;
	left:200px;
	top:260px;
	z-index:1;
	text-align:center;
display:block;
}

#hometest
{
	background-color:yellow;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:24;
	text-align:center;
display:block;
cursor:pointer;
}


#zooming
{
	background-color:transparent;
width:800px;
height:200px;	
	position:absolute;
	left:0%;
	top:1402px;
	z-index:1;
	text-align:center;
display:block;
}
#boutonscreen
{
width:230px;
height:80px;	
	z-index:1;
	text-align:center;
display:inline-block;
}


#rules
{
	background-color:#e6e6e6;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:22;
	text-align:center;
display:none;
}
.classregles
{
	background-color:black;
	background-image:url(images/logo.png);
	background-size:760px 1360px;
width:760px;
height:1360px;	
	position:absolute;
	left:18px;
	top:18px;
	z-index:1;
	text-align:center;
	border-radius:20px;
display:none;
cursor:pointer;
}
#rules1
{
	background-image:url(images/rule1.png);
	z-index:4;
}
#rules2
{	background-color:red;
	background-image:url(images/rule2.png);
	z-index:3;
}


#contientniveaux
{
	background-color:transparent;
width:800px;
height:800px;	
	position:absolute;
	left:0%;
	top:400px;
	z-index:1;
	text-align:center;
display:block;
}

#ecranplay
{
	background-color:#e6e6e6;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	text-align:center;
display:block;
}
#boutonplay
{
	touch-action: manipulation;
	color:black;
    background: #111;
    cursor: pointer;
    z-index: 0;
	content: '';
	/*
    background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	*/
    background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #ff00c8, #ff0000);
	
    background-size: 400%;
    z-index: -1;
    filter: blur(0px);
    animation: glowing 40s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
	position:absolute;
	left:0px;
	top:1100px;
	z-index:1;
	text-align:center;
display:block;
border-radius:300px;
width:420px;
height:120px;
margin-left:190px;	
font-size:42px;
-webkit-tap-highlight-color: transparent;
}
#boutonlink1
{
	
	width:360px;
	height:100px;
	position:absolute;
	left:0px;
	top:700px;
	z-index:1;
	text-align:center;
display:block;
margin-left:220px;
}
#boutonregles
{
	width:360px;
	height:100px;
	position:absolute;
	left:0px;
	top:890px;
	z-index:1;
	text-align:center;
display:block;
margin-left:220px;
}


#interface
{
	background-color:black;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:block;
}

#endgame
{
background-color:#e6e6e6;
	background-size:800px 1400px;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:26;
	text-align:center;
display:none;
	font-weight:bold;
	font-family:Verdana;
	font-style: italic;
	font-size:38px;
	color:black;
}

#masqueendgame
{
background-color:#e6e6e6;
width:800px;
height:1400px;	
	position:absolute;
	left:0%;
	top:0%;
	z-index:27;
display:none;
	color:black;
	font-size:50px;
	font-weight:bold;
text-align:center;	
font-style: italic;
font-family:Verdana;
}


#ecranfin
{
background-color:transparent;
width:800px;
height:700px;	
	position:absolute;
	left:0%;
	top:640px;
	z-index:1;
	text-align:center;
display:block;
}
#pointsfin
{
	display:inline;
	margin-top:0px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:40px;
	font-weight:bold;
width:300px;
height:100px;
margin-left:0px;	
color:black;
}
#pointsheros
{
	display:inline;
	margin-top:13px;
	margin-left:-20px;
	width:90px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:40px;
	font-weight:bold;
}
#boutonfin
{
	width:360px;
	height:100px;
	position:absolute;
	left:0px;
	top:890px;
	z-index:1;
	text-align:center;
display:block;
margin-left:220px;
}
#boutonlink
{
	width:360px;
	height:100px;
	position:absolute;
	left:0px;
	top:700px;
	z-index:1;
	text-align:center;
display:block;
margin-left:220px;
}
#boutonphp
{
touch-action: manipulation;
	color:black;
    background: #111;
    cursor: pointer;
    z-index: 0;
	content: '';
       background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #ff00c8, #ff0000);
    background-size: 400%;
    z-index: -1;
    filter: blur(0px);
    animation: glowing 40s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
	position:absolute;
	left:0px;
	top:1100px;
	z-index:1;
	text-align:center;
display:block;
border-radius:300px;
width:420px;
height:120px;
margin-left:190px;	
font-size:42px;
-webkit-tap-highlight-color: transparent;
}


#header
{
		background: rgb(147,147,147);
background: linear-gradient(0deg, rgba(147,147,147,1) 0%, rgba(227,227,227,1) 100%);
	background-repeat:no-repeat;
	background-size:100%;
	width:760px;
	height:100px;
	position:absolute;
	left:16px;
	top:20px;
	display:block;
	border-radius:100px;
z-index:2;
border:4px solid black;
}
#contientlife
{
	background-color:transparent;
	width:400px;
	height:60px;
	position:absolute;
	left:0px;
	top:20px;
	display:block;
	border-radius:10px;
	z-index:1;
}
.life
{
	background-image:url(images/lifeplein.png);
	background-size:60px 60px;
	background-color:transparent;
	width:60px;
	height:60px;
	display:inline-block;
	border-radius:10px;
	margin-left:20px;
}

#contientpoints
{
	background-color:transparent;
	width:270px;
	height:80px;
	position:absolute;
	left:490px;
	top:10px;
	display:block;
	border-radius:10px;
	z-index:1;
	text-align:left;
		color:black;
	font-size:36px;
	font-weight:bold;
	font-family:Verdana;
}



#control
{
background-color:transparent;
	width:760px;
	height:220px;
	position:absolute;
	left:20px;
	top:1150px;
	z-index:2;
	text-align:center;
display:block;
	border-radius:10px;
	touch-action: manipulation;
}



#board1
{
background-color:grey;
	background-image:url(images/fondtest.png);
background-size:760px 2000px;
	width:760px;
	height:1000px;
	position:absolute;
	left:20px;
	top:130px;
	z-index:2;
	margin:0px;
	border-radius:10px;
	box-sizing: border-box;
	overflow: hidden;
}
/*
#board1 {
  background-position: 0px 0px;
  background-repeat: repeat-y;
  animation: animatedBackground 10s linear infinite alternate;
}
*/
#bordure
{
background-color:black;
	width:760px;
	height:20px;
	position:absolute;
	left:0px;
	top:980px;
	z-index:1;
}


#heros1
{
	background-image:url(images/heros1.gif);
	background-color:transparent;
	background-size:120px 160px;
	width:120px;
	height:160px;
	position:absolute;
	left:-15px;
	top:-55px;
	z-index:1;
}
#impactheros
{
	background-image:url(images/impact.gif);
	background-color:transparent;
	background-size:140px 140px;
	width:140px;
	height:140px;
	position:absolute;
	left:-25px;
	top:-40px;
	z-index:2;
	display:none;
}

#info
{
	background: rgb(0,189,34);
background: linear-gradient(0deg, rgba(0,189,34,1) 0%, rgba(225,255,0,1) 100%);
	width:300px;
	height:40px;
	position:absolute;
	left:216px;
	top:400px;
	z-index:8;
	color:black;
	font-weight:bold;
	font-family:Verdana;
	font-size:28px;
	display:none;
	padding:20px 10px;
	border-radius:100px;
	border:4px solid black;
}
#run
{
	background: rgb(0,189,34);
background: linear-gradient(0deg, rgba(0,189,34,1) 0%, rgba(225,255,0,1) 100%);
	width:300px;
	height:70px;
	position:absolute;
	left:226px;
	top:450px;
	z-index:9;
	color:black;
	font-weight:bold;
	font-family:Verdana;
	font-style: italic;
	font-size:54px;
	display:none;
	border-radius:120px;
	border:4px solid black;
}

#hitbox
{
	background-color:transparent;
	width:90px;
	height:90px;
	position:absolute;
	left:270px;
	top:770px;
	z-index:5;
		border-radius:90px;
}

#projectile
{
	background-image:url(images/projectile.png);
	background-color:transparent;
	background-size:40px 40px;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
}
#viebonus
{
	background-image:url(images/vie.png);
	background-color:transparent;
	background-size:60px 60px;
	width:60px;
	height:60px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:6;
}

#divimpact
{
	background-image:url(images/impact3.gif);
	background-color:transparent;
	background-size:130px 80px;
	width:130px;
	height:80px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:6;
	display:none;
	border-radius:0px;
}


#sol
{
	background-color:black;
	background-size:80px 80px;
	width:20px;
	height:1000px;
	position:absolute;
	left:370px;
	top:0px;
	z-index:4;
}


#masquehaut
{
	background-color:black;
	background-size:80px 80px;
	width:760px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:6;
	border:solid 2px;
}
#masquebas
{
	background-color:black;
	background-size:80px 80px;
	width:760px;
	height:100px;
	position:absolute;
	left:0px;
	top:900px;
	z-index:6;
	border:solid 2px;
}

#bordgauche
{
	background-color:black;
	background-size:80px 80px;
	width:20px;
	height:1000px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:4;
}
#borddroit
{
	background-color:black;
	background-size:80px 80px;
	width:20px;
	height:1000px;
	position:absolute;
	left:740px;
	top:0px;
	z-index:4;
}

#boss
{
	background-image:url(images/boss2.png);
	background-color:transparent;
	background-size:90px 150px;
	width:90px;
	height:150px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	display:none;
}


.branche1 {
		background-image:url(images/branche11.png);
		background-size:60px 40px;
	background-color:transparent;
	border-radius:0px;
	width:60px;
	height:40px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:3;
}
.branche2 {
			background-image:url(images/branche11.png);
		background-size:360px 90px;
	background-color:transparent;
	border-radius:0px;
	width:360px;
	height:90px;
	position:absolute;
	left:20px;
	top:0px;
	z-index:3;
}
.gland {
		background-image:url(images/landberry2.png);
		background-size:80px 50px;
	background-color:transparent;
	border-radius:0px;
	width:80px;
	height:50px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:4;
}
.ennemi1 {
			background-image:url(images/branche11.png);
		background-size:80px 50px;
	background-color:transparent;
	border-radius:0px;
	width:80px;
	height:50px;
	position:absolute;
	left:200px;
	top:0px;
	z-index:4;
}
.ennemi2 {
			background-image:url(images/branche11.png);
		background-size:60px 60px;
	background-color:transparent;
	border-radius:0px;
	width:60px;
	height:60px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:4;
}






.btn {
	background: rgb(147,147,147);
background: linear-gradient(0deg, rgba(147,147,147,1) 0%, rgba(227,227,227,1) 100%);
	/*
	background-color: #b3b3b3;
	*/
	
	border-radius:80px;
	border:4px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:30px;
	padding:30px;
	text-decoration:none;
	width:230px;
	height:90px;
	margin-top:100px;
	margin-left:290px;
}
.btn:hover {
filter: contrast(1.1);
transform: scale(1.1);
}



.btn2 {
	background-color:transparent;
	border-radius:200px;
	border:4px solid #cccccc;
	display:inline-block;
	cursor:pointer;
	width:180px;
	height:180px;
	background-size:176px 176px;
	box-sizing: border-box;
	 -webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.btn2:focus {
	outline:none;
	 box-shadow: none;
}

#bouton1
{	
	background-image:url(images/boutonswap.png);
	position:absolute;
	left:18px;
	top:20px;
}
#bouton2
{	background-image:url(images/boutontir.png);
	position:absolute;
	left:288px;
	top:20px;
}
#bouton3
{	background-image:url(images/boutonjump.png);
	position:absolute;
	left:558px;
	top:20px;
}

.btnzoom {
	background-color:black;
	border-radius:200px;
	border:2px solid white;
	display:inline-block;
	cursor:pointer;
	width:80px;
	height:80px;
	color:white;
	font-size:26px;
	margin-left:20px;
}

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}
#divtest {
		position:absolute;
		z-index:40;
	left:200px;
	top:0px;
  width: 100px;
  height: 1400px;
    background-size: 100% 300%;
background-image:url(images/test3.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 3s linear infinite reverse;
}






.ground {
		position:absolute;
		z-index:1;
	left:5px;
	top:0px;
  width: 10px;
  height: 10px;
	background-color:grey;
	border-radius:10px;
}


.champs {

	display:inline;
	margin-top:13px;
	margin-left:-20px;
	width:90px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:#e6e6e6;
	font-size:40px;
	font-weight:bold;
	
}


#boutontest
{
	width:200px;
	height:200px;
	position:absolute;
	left:1000px;
	top:100px;
	z-index:30;
}
#boutontest2
{
	background-color:green;
	background-size:200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:800px;
	top:300px;
	z-index:5;
}
#boutontest3
{
	background-color:grey;
	background-size:200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:800px;
	top:500px;
	z-index:5;
}
#boutontest4
{
	background-color:yellow;
	background-size:200px 200px;
	width:200px;
	height:200px;
	position:absolute;
	left:800px;
	top:700px;
	z-index:5;
}



.formulaires {
		width:20px;
	height:20px;
	visibility:hidden;
	display:block;
}

.pages
{

background-color:#e6e6e6;
width:800px;
height:1400px;	
z-index:2;
position:absolute;
top:10px;
left:10px;
border:solid 2px; 
display:none;
	color:#e6e6e6;
	font-size:40px;
	font-weight:bold;
text-align:center;	
font-family:Verdana;
}


#email
{
	background-color:transparent;
	width:600px;
	height:50px;
	position:absolute;
	left:100px;
	top:340px;
	z-index:1;
	border:solid 2px black;
border-radius:100px;
	color:black;
	font-size:40px;
	font-weight:bold;	
	padding:40px;
	text-align:center;
}
#pseudo
{
	background-color:transparent;
	width:600px;
	height:50px;
	position:absolute;
	left:100px;
	top:120px;
	z-index:1;
	border:solid 2px black;
border-radius:100px;
	color:black;
	font-size:40px;
	font-weight:bold;	
	padding:40px;
	text-align:center;
}
.btnphp {
	background: rgb(147,147,147);
background: linear-gradient(0deg, rgba(147,147,147,1) 0%, rgba(227,227,227,1) 100%);
	border-radius:200px;
	border:4px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:48px;
	padding:22px 30px;
	text-decoration:none;
	width:600px;
	height:140px;
	position:absolute;
	left:98px;
	top:960px;

}
.btnphp:hover {
filter: contrast(1.1);
transform: scale(1.1);
}
.btnphp2 {
	background-color: #00b300;
	border-radius:200px;
	border:4px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:48px;
	padding:22px 30px;
	text-decoration:none;
	width:600px;
	height:140px;
	position:absolute;
	left:98px;
	top:1180px;

}
.btnphp2:hover {
filter: contrast(1.1);
transform: scale(1.1);
}

.boutonsmenu {
	background-color: transparent;
	border-radius:10px;
	display:block;
	width:800px;
	height:500px;
	position:absolute;
	left:0px;
	top:900px;
	text-align:center;
}


#saving
{
	display:block;
	color:black;
}

#inputinfos
{
	background-color:transparent;
	width:800px;
	height:460px;
	position:absolute;
	left:0px;
	top:400px;
	z-index:1;
	color:black;
	font-size:30px;
	font-weight:bold;	
	text-align:center;
}


.textinfos {
	background-color: transparent;
	border-radius:10px;
	display:block;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-style: italic;
	font-size:36px;
	padding:20px;
	width:760px;
	height:300px;
	position:absolute;
	left:0px;
	top:160px;
}


.scoring {
	display:inline-block;
	margin-top:20px;
	margin-left:30px;
	width:240px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:32px;
	font-weight:bold;
}
.pseudoscoring {
	display:inline-block;
	margin-top:25px;
	margin-left:-30px;
	width:400px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:32px;
	font-weight:bold;
}
#scorings
{
	background-color:transparent;
	width:800px;
	height:600px;
	position:absolute;
	left:0px;
	top:320px;
	z-index:1;
	color:black;
	font-size:36px;
	font-weight:bold;	
	text-align:center;
	font-style: italic;
}


.titres {
			background-image:url(images/titre2.png);
		background-size:800px 120px;
	background-color:red;
	border-radius:0px;
	width:800px;
	height:120px;
	position:absolute;
	left:0px;
	top:10px;
	z-index:5;
}

#cadrebest
{
		background: rgb(147,147,147);
background: linear-gradient(0deg, rgba(147,147,147,1) 0%, rgba(227,227,227,1) 100%);
	width:700px;
	height:100px;
	position:absolute;
	left:46px;
	top:60px;
	z-index:1;
	color:black;
	font-size:36px;
	font-weight:bold;	
	text-align:center;
	font-style: italic;
	border:4px solid black;
	border-radius:100px;
}
#cadreyour
{
		background: rgb(147,147,147);
background: linear-gradient(0deg, rgba(147,147,147,1) 0%, rgba(227,227,227,1) 100%);
	width:700px;
	height:100px;
	position:absolute;
	left:46px;
	top:330px;
	z-index:1;
	color:black;
	font-size:36px;
	font-weight:bold;	
	text-align:center;
	font-style: italic;
	border:4px solid black;
	border-radius:100px;
}

#iconemail
{
		background-image:url(images/iconemail.png);
		background-size:240px 240px;
background-color:transparent;
width:240px;
height:240px;	
	position:absolute;
	left:280px;
	top:560px;
	z-index:1;
}
#iconebiere
{
		background-image:url(images/iconebiere2.png);
		background-size:400px 500px;
background-color:transparent;
width:400px;
height:500px;	
	position:absolute;
	left:196px;
	top:400px;
	z-index:1;
		border:4px solid black;
	border-radius:20px;
}


@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


.btnphp3
{	
	border:4px solid black;
	display:block;
	cursor:pointer;
	font-weight:bold;
	font-family:Arial;
	font-size:48px;
	padding:22px 30px;
	text-decoration:none;
	width:600px;
	height:140px;
	position:absolute;
	left:98px;
	top:1180px;
	touch-action: manipulation;
	border-radius:200px;
	color:black;
    background: #111;
    cursor: pointer;
    z-index: 0;
	content: '';
       background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #ff00c8, #ff0000);
    background-size: 400%;
    z-index: -1;
    filter: blur(0px);
    animation: glowing 40s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}
.btnphp3:hover {
filter: contrast(1.1);
transform: scale(1.1);
}