/*html{
	width: 700px;
	margin: auto;
}*/


body {
/*	width: 100vw;
	z-index: 0;*/
  background-image: url('background_30.jpg');
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 10% 15%;
}



#content{
	position: absolute;
	width: 2000px
	height: 20000px;
	margin: auto;
}


/* "auto" makes the left and right margins center the wrapper */
.wrap { 
 /*Francois porpose to fix thingds with 100vw etc, it should center eveything*/
	/*width: 100vw;
	height: 100vh;
	width: 2000px;*/

	margin: auto;
	/*overflow should have fixed the existence of scrollbars but it doesnt 
	for some reason probably because of the <pre> tag*/
	overflow: hidden; 
}


.first{
	border: none;
	background: transparent;

	width: 400px;
	height: 350px;

	position: relative;

/*	This is for making it clickable or not, trouble shooting the fact that the top ladder isnt clickable*/
	/*pointer-events: none;*/
}
	/*this was supposed to fix the box size and make it fit to my ascii content.
	It actually does the opposite, its infuriating*/
	/*width: 100vw;
	height: 100vh;
	overflow: hidden;*/



.second{
	border: none;
	background: transparent;

	width: 920px;
	height: 790px;

	position: relative;

/*	This is for making it clickable or not, trouble shooting the fact that the top ladder isnt clickable*/
/*	pointer-events: none;*/
}

.toilet_left{
	border: none;
	background: transparent;

	position: absolute; 

	left: -85px;

	width: 1200px;
	height: 3000px;
}

	.toilet_left_1{

		top: 2000px; 
	}

	.toilet_left_2{

		top: 2001px; 
	}

	.toilet_left_3{

		top: 2002px; 
	}

.toilet_right{
	border: none;
	background: transparent;

	position: absolute; 

	right: -85px;

	width: 1200px;
	height: 3000px;
}

	.toilet_right_1{

		top: 5600px; 
	}

	.toilet_right_2{

		top: 5601px; 
	}

	.toilet_right_3{

		top: 5602px; 
	}




.echelle_up{ 
	border: none;
	background: transparent;
	width: 1350px;
	height: 2000px;

	position: absolute;
	top: -750px;
/*	pointer-events: auto;*/
	}

/*Les positions horizontales des échelles du haut sont gerées par ca :*/
	.echelle_up_1{
		/*position: absolute;*/
		
		left: 499px;
		}

	.echelle_up_2{		
		/*position: absolute;*/
		
		left: 500px;

		}

	.echelle_up_3{		
		/*position: absolute;*/
		
		left: 501px;

	}
.echelle_down{
	border: none;
	background: transparent;
	width: 1350px;
	height: 2000px;

	bottom: -1000px;
}

/*Les positions horizontales des échelles du bas sont gerées par ca :*/
	.echelle_down_1{
		position: absolute;
	/*	top: 6500px;*/
		left: 299px;
	}

	.echelle_down_2{
		position: absolute;
		/*top: 6500px;*/
		left: 300px;
	}

	.echelle_down_3{
		position: absolute;
		/*top: 6500px;*/
		left: 301px;
	}