@charset "utf-8";

body {
	background-color: #f7f6f1;
	font-family: "Rubik", sans-serif;
	font-weight: 300;
	padding:40px;
}
p {
	color: #000;
}
h1 {
	text-align: center;
	font-family: "Rubik", sans-serif;
	font-weight: 300;
	padding:5px 0;
	margin:0;
}
.layout-flex {
	display: flex;
	flex-direction:row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Personnage */
.perso_wrap {
	width: 100%;
	text-align: center;
}
.perso_wrap img {
	height: 400px;
}

/*Presentation*/

#chaudron img {
	opacity:0.2;
    transition: 0.3s;
}
#chaudron img:hover {
	opacity: 1;
    transition: 1s;
	transform: scale(1.1);
    transition: 0.3s;
}

/*Musique*/
#musique1 {
	position: absolute;
	top: 20px;
    right: 110px;
    transition: 0.5s;
}
#musique1 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
#musique1 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}

/*Scene1*/

.legion {
	width: 300px;
	height: 150px;
	transform: translateX(0px);
	transition : 30s;
}
#plus {
	position: absolute;
	margin-left: 1275px;
	top: 390px;
	text-align: center;
	font-weight: 900;
	cursor: pointer;
	font-size: 3em;
	z-index: 5;
}
#mention {
	position: absolute;
	text-align: center;
	top: 250px;
	width: 100%;
	z-index: 4;
	font-weight: 200;
	font-size: 3em;
}

.perso_wrap2 {
	position: absolute;
	left: 420px;
	top: 80px;
	z-index: 3;
}
.perso_wrap2 img {
	height: 400px;
}
.perso_wrap2 img:hover {
	transform: scale(1);
    transition: 0.3s;
}
.perso_wrap2 h6 {
	pointer-events:none;
	font-size: 4em;
}
#rectangle {
	position: absolute;
	top: 350px;
	left: 557px;
	width: 42%;
	z-index: 2;
}
.maCarte {
	position: absolute;
	margin-left: 700px;
	top: 370px;
    transition: 0.3s;
	}
.maCarte img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
	z-index: 1;
}
.maCarte:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
.monSac {
	position: absolute;
	margin-left: 1245px;
	top: 70px;	
    transition: 0.3s;
}
.monSac img {
	cursor: pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.monSac img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
#maFleche {
	position: absolute;
	width: 50;
	height: 50;
	margin-left: 1350px;
	top: 250px;
}
.maFleche {
	width: 50px;
	cursor: pointer;
    transition: 0.5s;
}
.maFleche img:hover {
	transform: scale(1.2);
    transition: 0.3s;
}
#sacoche {
	position: absolute;
	display: none;
	width: 50px;
	height: 50px;
	top: 200px;
    right: 150px;
    transition: 0.5s;
}
.sacoche img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.sacoche img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
#carte {
	position: absolute;
	display: none;
	width; 50px;
	height: 50px;
	top: 130px;
    right: 150px;
    transition: 0.5s;
}
.carte img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.carte img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}

/*Scene 2*/

#plus2 {
	position: absolute;
	margin-left: 1275px;
	top: 390px;
	text-align: center;
	font-weight: 900;
	cursor: pointer;
	font-size: 3em;
	z-index: 5;
}
#panoramix {
	position: absolute;
	left: 420px;
	top: 80px;
	z-index: 3;
	height: 400px;
	width: 350px;
}
#mention2 {
	position: absolute;
	text-align: center;
	top: 250px;
	width: 100%;
	z-index: 4;
	font-weight: 200;
	font-size: 3em;
}
.baies {
	position: absolute;
	margin-left: 515px;
	top: 315px;
    transition: 0.3s;
}
.baies img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px
    transition: 0.3s;
}
.baies img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
.plante {
	position: absolute;
	margin-left: 940px;
	top: 340px;	
    transition: 0.3s;
}
.plante img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.plante img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
.maFleche2 {
	position: absolute;
	width: 50px;
	height: 50px;
	margin-left: 1350px;
	top: 250px;
}
#baies2 {
	position: absolute;
	display: none;
	width: 50px;
	height: 50px;
	right: 150px;
	top: 300px;
    transition: 0.3s;
}
.baies2 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.baies2 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
#plante2 {
	position: absolute;
	display: none;
	width: 50px;
	height: 50px;
	right: 150px;
	top: 350px;	
    transition: 0.3s;
}
.plante2 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.plante2 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
.maFleche2 {
	position: absolute;
	width: 50px;
	height: 50px;
	margin-left: 1350px;
	top: 250px;
}
.maFleche2 {
	width: 50px;
	cursor: pointer;
    transition: 0.5s;
}
.maFleche2 img:hover {
	transform: scale(1.2);
    transition: 0.3s;
}


/*Scene 3*/

#mention3 {
	position: absolute;
	text-align: center;
	top: 250px;
	width: 100%;
	z-index: 4;
	font-weight: 200;
	font-size: 3em;
}

#plus3 {
	position: absolute;
	margin-left: 1275px;
	top: 390px;
	text-align: center;
	font-weight: 900;
	cursor: pointer;
	font-size: 3em;
	z-index: 5;
}

#baies3 {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 150px;
	top: 300px;
    transition: 0.3s;
}
.baies3 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.baies3 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
#plante3 {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 150px;
	top: 350px;	
    transition: 0.3s;
}
.plante3 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.plante3 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}

.maFleche3 {
	position: absolute;
	width: 50;
	height: 50;
	margin-left: 1350px;
	top: 250px;
}
.maFleche3 {
	width: 50px;
	cursor: pointer;
    transition: 0.5s;
}
.maFleche3 img:hover {
	transform: scale(1.2);
    transition: 0.3s;
}
#panoramix2 {
	position: absolute;
	width: 300px;
	height: 400px;
	margin-left: 250px;
	top: 50px;
}
#panoramix2 {
	cursor: pointer;
    transition: 0.5s;
}
#panoramix2 img:hover {
	transform: scale(1.2);
    transition: 0.3s;
}

/*Scene 4*/
.potion {
	position: absolute;
	width: 300px;
	height: 400px;
	margin-left: 700px;
	top: 0px;
}


/*Commun*/

#plan {
	position: absolute;
	display: none;
    transition: 0.5s;
}

#sacoche2 {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 200px;
    right: 150px;
    transition: 0.5s;
}
.sacoche2 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.sacoche2 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}
#carte2 {
	position: absolute;
	width; 50px;
	height: 50px;
	top: 130px;
    right: 150px;
    transition: 0.5s;
}
.carte2 img {
	cursor:pointer;
	max-width: 100px;
	max-height: 100px;
    transition: 0.3s;
}
.carte2 img:hover {
	transform: scale(1.1);
    transition: 0.3s;
}

/*Game Over*/

#gameOver {
	position: absolute;
	text-align: center;
	width: 100%;
	font-weight: 500;
	font-size: 10em;
}

#mention4 {
	position: absolute;
	text-align: center;
	width: 100%;
	font-weight: 500;
	font-size: 10em;
}