body {
	background-color: #f6f5f0;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -10;
	
}

/* lancer la partie */

.accueil{
    position: relative;
	border: solid 5px rgb(0, 0, 0);
	width: 1200px;
	height: 700px;
	text-align: center;
	justify-content: center;
	background-image: url(../img/decor_accueil_jeu.png);
	background-size: cover;

}


.bouton-jouer{
	position:absolute;
	top:80px;
	right:100px;
	cursor:pointer;
	scale: 0.8;
	transition:0.5s;
}

.bouton-jouer :hover {
	transform:scale(1.1);
	transition:0.5s;
}

/* explication du but du jeu */

.policier {
	position: absolute;
	justify-content: center;
	z-index: 10;
	display: none;
	left: 100px;
	bottom: 50px;
}

.texte-policier{
	justify-content: center;
	position: absolute;
	border: solid 2px rgb(0, 0, 0);
	background-color: #f6f5f0;
	border-radius: 20px;
	padding: 20px;
	left: 650px;
	display: none;

}

/* le dialogue avec le policier */

.bouton-dialogue{
	position: absolute;
	left: 660px;
	bottom: 80px;
	z-index: 15;
	display: none;
}

.bouton-dialogue :hover{
	transform:scale(1.1);
	transition: 0.5s;

}

/* Animation bouton commencer */

@keyframes float {
	0% {
	  -webkit-transform: translateY(0px);
	  -moz-transform: translateY(0px);
	  -ms-transform: translateY(0px);
	  -o-transform: translateY(0px);
	}
	50% {
	  -webkit-transform: translateY(-20px);
	  -moz-transform: translateY(-20px);
	  -ms-transform: translateY(-20px);
	  -o-transform: translateY(-20px);
	}
	100% {
		-webkit-transform: translateY(0px);
	  -moz-transform: translateY(0px);
	  -ms-transform: translateY(0px);
	  -o-transform: translateY(0px);
	}
}

.bouton-commencer {
	position:absolute;
	top:400px;
	left:260px;
	cursor:pointer;
	scale: 0.8;
	opacity: 0.5;
	z-index: 15;
	display: none;
	animation: float 4s infinite;
}

.bouton-commencer:hover {
	opacity: 1;
	transition: 0.5s;
}

/* icone pour changer la musique */

.radio {
	position: absolute;
	scale: 0.3;
	right:80px;
	top: 0;
	z-index: 5;
}

.radio :hover {
	transform:scale(1.05);
	transition:0.5s;
}

/* objet dans la salle d'interrogation */

.radio2 {
	position: absolute;
	scale: 0.3;
	left:320px;
	top: 420px;
	display: none;
	z-index: 5;
}

.radio2:hover {
	transform:scale(1.05);
	transition:0.5s;
}

.lettre-instr {
	position: absolute;
	top: 510px;
	left: 600px;
	scale: 0.7;
	display: none;
}

.lettre-instr :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.lettre-instr_grande {
	position: absolute;
	justify-content: center;
	z-index: 20;
	display: none;
}

.carte-petit {
	position: absolute;
	top: 510px;
	left: 780px;
	scale: 0.7;
	display: none;
}

.carte-petit :hover {
	transform:scale(1.05);
	transition:0.5s;
}

/* afficher la carte en grand */

.carte-grand{
	position: absolute;
	justify-content: center;
	z-index: 20;
	display: none;
}

.menottes {
	position: absolute;
	scale: 0.6;
	right: 450px;
	bottom: 180px;
	display: none;
}

.menottes :hover {
	transform:scale(1.05);
	transition:0.5s;
}

/* personnages dans la salle d'interrogation */

.perso1 {
	position: absolute;
	top: 286px;
	left: 680px;
	display: none;
}

.perso2 {
	position: absolute;
	top: 316px;
	right: 500px;
	display: none;
}

.perso3 {
	position: absolute;
	scale: 1.4;
	top: 335px;
	left: 520px;
	display: none;
}

/* dilemme, quand le joueur choisit qui est le tueur */

.phrase-dilemme {
	position: absolute;
	scale: 0.5;
	top: 10px;
	display: none;
}


.btn_retour_dilemme {
	position: absolute;
	scale: 0.5;
	top: 600px;
	display: none;
}

.btn_retour_dilemme :hover {
	transform:scale(1.05);
	transition:0.5s;
}

/* bouton pour choisir le tueur */

.rond_personnage1{
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: rgb(176, 176, 176);
	border-radius: 100%;
	z-index: 10;
	top: 250px;
	left: 757px;
	display: none;
}

.rond_personnage1:hover {
	background-color: red;
	transition: 0.5s;
}

.rond_personnage2{
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: rgb(176, 176, 176);
	border-radius: 100%;
	z-index: 10;
	top: 280px;
	right: 558px;
	display: none;
}

.rond_personnage2:hover {
	background-color: red;
	transition: 0.5s;
	
}

.rond_personnage3{
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: rgb(176, 176, 176);
	border-radius: 100%;
	z-index: 10;
	top: 265px;
	left: 568px;
	display: none;
}

.rond_personnage3:hover {
	background-color: red;
	transition:0.5s;
}

/* timer */

.time{
    position: absolute;
    display: block;
    background-color: #1292dc;
    height: 210px;
    width: 20px;
    left: 100px;
    bottom: 283px;
    transition: 150s;
    transition-timing-function: linear;
    border-radius: 15px;
    z-index: 50;
	display: none;
}

.design-time {
	position: absolute;
	scale: 0.7;
	left: 66px;
    bottom: 195px;
	display: none;
	z-index: -10;
}

/* question que le joueur pose aux personnage 1 */

.quest_1_p1{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 550px;
	top: 250px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_1_p1 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.quest_2_p1{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 680px;
	top: 250px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_2_p1 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.quest_3_p1{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 850px;
	top: 250px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_3_p1 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.btn_retour_quest_1 {
	position: absolute;
	scale: 0.3;
	top: 155px;
	left: 733px;
	display: none;
}

.btn_retour_quest_1 :hover {
	transform:scale(1.1);
	transition:0.5s;
}

/* question que le joueur pose aux personnage 2 */

.quest_1_p2{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	right: 640px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_1_p2 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.quest_2_p2{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	right: 475px;
	top: 260px;
    display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_2_p2 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.quest_3_p2{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	right: 380px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_3_p2 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.btn_retour_quest_2 {
	position: absolute;
	scale: 0.3;
	top: 155px;
	right: 533px;
	display: none;
}

.btn_retour_quest_2 :hover {
	transform:scale(1.1);
	transition:0.5s;
}

/* question que le joueur pose aux personnage 3 */

.quest_1_p3{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 355px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_1_p3 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.quest_2_p3{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 485px;
	top: 260px;
    display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_2_p3 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.quest_3_p3{
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 655px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.quest_3_p3 :hover {
	transform:scale(1.05);
	transition:0.5s;
}

.btn_retour_quest_3 {
	position: absolute;
	scale: 0.3;
	top: 155px;
	left: 540px;
	display: none;
}

.btn_retour_quest_3 :hover {
	transform:scale(1.1);
	transition:0.5s;
}

/* question que le joueur pose aux personnage 1 */

.rep_quest_1_p1 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 743px;
	top: 230px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.rep_quest_2_p1 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 743px;
	top: 230px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.rep_quest_3_p1 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 743px;
	top: 230px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

/* question que le joueur pose aux personnage 2 */

.rep_quest_1_p2 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	right: 540px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.rep_quest_2_p2 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	right: 540px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.rep_quest_3_p2 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	right: 540px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

/* question que le joueur pose aux personnage 3 */

.rep_quest_1_p3 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 545px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.rep_quest_2_p3 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 545px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

.rep_quest_3_p3 {
	justify-content: center;
	position: absolute;
	scale: 0.8;
	border: solid 2px rgb(0, 0, 0);
	background-color: #66aad8;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	left: 545px;
	top: 260px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

/* bouton recommencer */

.recommencer{
	position: absolute;
	bottom: 100px;
	display: none;
}


.recommencer:hover {
	transform:scale(1.1);
	transition:0.5s;
}