body{
    margin: 0;
    background: lightgreen;

}

span{
    position: absolute;
    right: 5%;
    top: 5%;
}
span>img{
    width: 80px;
}

main{
    position: relative;
    height: 100vh;
}

.bg{
    width: 100%;
    height: 100%;
}
#premierT,
#premierB,
#premierP,
#premier2,
#premier3,
#premier4,
#premier5,
#premier6,
#premier7,
#premier8,
#premier9,
#premier10,
#premier11,
#premier12,
#premier13,
#premier14,
#premier15,
#premier16,
#premier17,
#premier18,
#premier19,
#premier20,
#premier21,
#premier{
    position: relative;
    display: block;
}

object{
    height: 100%;
    width: 100%;
}



/* Direction */

#f{
    position: absolute;
    top: 69%;
    left: 61%;
    transform: rotateX(64deg) rotate(7deg);
}

#f3{
    position: absolute;
    top: 52%;
    left: 20%;
    transform: rotateX(74deg) rotate(359deg);
}
#f3 img {
    width: 9vw;
}

#f6{
    position: absolute;
    top: 35%;
    left: 35%;
    transform: rotate(308deg) rotateY(65deg) skewY(20deg);
}

#f9{
    position: absolute;
    top: 52%;
    left: 76%;
    transform: rotateX(61deg);
}

#f11{
    position: absolute;
    top: 45%;
    left: 67%;
    transform: rotate(90deg);
}

#f15{
    position: absolute;
    top: 68%;
    right: 14%;
    transform: rotateX(66deg);
}

#toilette{
    position: absolute;
    top: 60%;
    right: 66%;
    transform: rotateX(66deg);
}


#f16{
    position: absolute;
    top: 47%;
    right: 22%;
    transform: rotate(180deg);
}

#f18{
    position: absolute;
    top: 45%;
    left: 42%;
    transform: rotate(180deg);
}

#fg16{
    position: absolute;
    top: 62%;
    left: 5%;
    transform: rotateX(68deg) rotate(355deg);
}
#fd16{
    position: absolute;
    top: 58%;
    left: 18%;
    transform: rotateX(68deg) rotate(355deg);
}


#fg15{
    position: absolute;
    top: 47%;
    left: 10%;
}



#cabine{
    position: absolute;
    top: 47%;
    left: 50%;
}
#goP{
    position: absolute;
    display: none;
    top: 47%;
    left: 30%;
}

#fg14{
    position: absolute;
    top: 45%;
    right: 3%;
}

#fg13{
    position: absolute;
    top: 65%;
    left: 50%;
    transform: rotateX(54deg);
}

#fg11{
    position: absolute;
    top: 57%;
    left: 18%;
    transform: rotateX(70deg) rotateZ(354deg);
}

#fg9{
    position: absolute;
    top: 45%;
    left: 10%;
    transform: rotate(-90deg);
}

#chrono{
    position: absolute;
    top: 20%;
    left: 35%;
    width: 30%;

}
#chrono2{
    position: absolute;
    top: 20%;
    left: 18%;
    width: 30%;

}

.vortex{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#chronoOmbre{
    width: 30%;
    position: absolute;
    top: 88%;
    left: 33%;
}


#profMusique{
    position: absolute;
    top: 30%;
    left: 10%;
    width: 22%;


}
#musiqueOmbre{
    position: absolute;
    top: 85.5%;
    left: 6%;
    width: 15%;
}

#doutau{
    position: absolute;
    top: 5%;
    left: 0;
    width: 26%;


}



#clem{
    position: absolute;
    top: 30%;
    left: 20%;
    width: 15%;

}
#clemOmbre{
    position: absolute;
    top: 87.5%;
    left: 9.5%;
    width: 23%;

}

#clemD,#moreauD,#anglaisD,#bouchereauD,#musiqueD,#doutauD,#roxinD,#pirandaD,#tajariolD,#mostefD{
    position: absolute;
    top: 5%;
    left: 35%;
    width: 30%;
    display: none;
}

#ChronoE1{
    position: absolute;
    top: 5%;
    left: 35%;
    width: 30%;
    display: none;
}


#moreau{
    position: absolute;
    top: 15%;
    left: 9%;
    width: 22%;


}

#chapeauWorld{
    position: absolute;
    top: 50%;
    left: 37%;
    width: 8%;
}
#ameWorld{
    position: absolute;
    top: 15%;
    left: 30%;
    width: 40%;
}
#echelleWorld{
    position: absolute;
    top: 27%;
    left: 51%;
    width: 11%;
}

#cameraWorld{
    position: absolute;
    top: 31%;
    left: 42%;
    width: 10%;
    transform: rotate(
            -7deg
    );
}

#anglais{
    position: absolute;
    top: 13%;
    left: 28%;
    width: 20%;
}

#anglaisOmbre{
    position: absolute;
    top: 88.8%;
    left: 33%;
    width: 30%;
}

#bouchereau{
    position: absolute;
    top: 24%;
    left: 46%;
    width: 13%;
}

#bouchereauOmbre{
    position: absolute;
    top: 72.8%;
    left: 47.5%;
    width: 12%;
    transform: scaleX(-1);
}

#piranda{
    position: absolute;
    top: 18%;
    left: 5%;
    width: 18%;
}

#pirandaOmbre{
    position: absolute;
    top: 85.8%;
    left: 2.5%;
    width: 16%;
    transform: rotate(
            180deg
    ) scaleX(-1);
}
#tajariol{
    position: absolute;
    top: 17%;
    left: 47%;
    width: 15%;
}

#tajariolOmbre{
    position: absolute;
    top: 73.8%;
    left: 45.1%;
    width: 14%;
}

#mostef{
    position: absolute;
    top: 9%;
    left: 3%;
    width: 33%;
}
#roxin{
    position: absolute;
    top: 27%;
    left: 34%;
    width: 16%;
}

#roxinOmbre{
    position: absolute;
    top: 87.7%;
    left: 33.2%;
    width: 15%;
}



#porte{
    position: absolute;
    top: 5%;
    left: 70%;
    width: 10%;
    height: 40%;

}


#passDetecteur{
    position: absolute;
    top: 27vw;
    width: 6vw;
    height: 9vw;
    left: 14vw;
}


#cubeWorld{
    position: absolute;
    width: 11vw;
    top: 69%;
    left: 79.2%;
}

#tropheWorld{
    position: absolute;
    top: 70%;
    left: 55%;
}
#tropheWorld>img{
    width: 6vw;
}

#microWorld{
    position: absolute;
    top: 0;
    left: 43%;
    width: 6vw;
}


#stickers{
    position: absolute;
    top: 55%;
    left: 20%;
    width: 8vw;
}


#fg8{
    position: absolute;
    top: 50%;
    left: 39%;
    transform: rotateX(58deg) rotate(359deg);
}

#fg7{
    position: absolute;
    top: 45%;
    left: 5%;
}

#droite1{
    position: absolute;
    top: 69%;
    left: 40%;
}
#droite2{
    position: absolute;
    top: 60%;
    left: 80%;
}
#gauche1{
    position: absolute;
    top: 72%;
    left: 23%;

}
#gauche2{
    position: absolute;
    top: 60%;
    left: 35%;
}
#gauche3{
    position: absolute;
    top: 40%;
    left: 5%;
}
#fg6{
    position: absolute;
    top: 58%;
    right: 6%;
    transform: rotate(90deg) rotateY(65deg) skewY(19deg);
}

#fg4{
    position: absolute;
    top: 23%;
    left: 24%;
    transform: rotate(90deg) rotateY(60deg) skewY(354deg);
}

#f500{
    position: absolute;
    top: 35%;
    left: 39%;
}

#fg3{
    position: absolute;
    top: 45%;
    left: 79%;
    transform: rotate(180deg);
}

#fg2{
    position: absolute;
    top: 70%;
    left: 28%;
    transform: rotateZ(87deg) rotateY(75deg) skewY(354deg);
}

#fg2{
    position: absolute;
    top: 70%;
    left: 28%;
    transform: rotateZ(87deg) rotateY(75deg) skewY(354deg);
}

#fg{
    position: absolute;
    top: 40%;
    left: 44%;
    transform: rotateY(44deg);
    cursor: url("direction/FlecheG.png");

}

#fd66{
    position: absolute;
    top: 45%;
    left: 90%;
}

#droite3{
    position: absolute;
    top: 62%;
    left: 54%;
}
#fdSon{
    display: none;
    position: absolute;
    top: 45%;
    left: 50%;
}
#fDevantconf{
    position: absolute;
    top: 50%;
    left: 54%;
}

#premierPlanSon{
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
}

/*Perso */
#f11>img,
#f9>img,
#f3>img,
#fg9>img{
    width: 5vw;
    opacity: 0.5;
    transform: scale(1);
}

.fleche>img,
#fdSon>img,
#fd66>img,
#f500>img,
#f18>img,
#fg16>img,
#fd16>img,
#f16>img,
#f15>img,
#cabine>img,
#goP>img,
#toilette>img,
#fg15>img,
#fg14>img,
#fg13>img,
#fg11>img,
#fg8>img,
#fg7>img,
#f6>img,
#fg6>img,
#fg4>img,
#f>img,
#droite1>img,
#droite2>img,
#droite3>img,
#gauche1>img,
#gauche2>img,
#gauche3>img,
#fg3>img{
    width: 9vw;
    opacity: 0.5;
    transform: scale(1);
}


#fg2>img,
#fg>img{
    width: 150px;
    opacity: 0.5;
    transform: scale(1);
}

.fleche>img:hover,
#fdSon>img:hover,
#fd66>img:hover,
#f500>img:hover,
#f18>img:hover,
#fg16>img:hover,
#fd16>img:hover,
#f16>img:hover,
#f15>img:hover,
#toilette>img:hover,
#cabine>img:hover,
#goP>img:hover,
#fg15>img:hover,
#fg14>img:hover,
#fg13>img:hover,
#fg11>img:hover,
#f11>img:hover,
#f9>img:hover,
#fg9>img:hover,
#fg8>img:hover,
#fg7>img:hover,
#fg6>img:hover,
#f6>img:hover,
#fg4>img:hover,
#fg3>img:hover,
#fg2>img:hover,
#f3>img:hover,
#f>img:hover,
#droite1>img:hover,
#droite2>img:hover,
#droite3>img:hover,
#gauche1>img:hover,
#gauche2>img:hover,
#gauche3>img:hover,
#fg>img:hover{
    transform: scale(1.2);
    opacity: 1;
    transition: 0.5s ease-in-out;


}

.back,
#backT,
#back21,
#backToilette,
#backP,
#backT,
#back20,
#back19,
#back18,
#back17,
#back16,
#back14,
#back13,
#back12,
#back11,
#back10,
#back9,
#back8,
#back7,
#back6,
#back5,
#back4,
#back3,
#back2,
#back{
    position: absolute;
    margin: auto;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

#backT>img,
#backToilette>img,
#backP>img,
#back21>img,
#back20>img,
#back19>img,
#back18>img,
#back17>img,
#back16>img,
#back14>img,
#back13>img,
#back12>img,
#back11>img,
#back10>img,
#back9>img,
#back8>img,
#back7>img,
#back6>img,
#back5>img,
#back4>img,
#back3>img,
#back2>img,
#back>img{
    margin: auto;
    height: 4vw;
    width: 100%;
    opacity: 0.5;
}
#backT>img:hover,
#backToilette>img:hover,
#backP>img:hover,
#back21>img:hover,
#back20>img:hover,
#back19>img:hover,
#back18>img:hover,
#back17>img:hover,
#back16>img:hover,
#back14>img:hover,
#back13>img:hover,
#back12>img:hover,
#back11>img:hover,
#back10>img:hover,
#back9>img:hover,
#back8>img:hover,
#back7>img:hover,
#back6>img:hover,
#back5>img:hover,
#back4>img:hover,
#back3>img:hover,
#back2>img:hover,
#back>img:hover{
    opacity: 1;
    transition: 0.3s;
}


*, *::before, *::after {
    box-sizing: border-box;
}





#text{
    border-bottom: 5px solid #80B524;
    padding-bottom: 10px;
    font-size: 1.5vw;
}
.container {
    display: flex;

    width: 80vw;
    max-width: 100%;
    height: 20vw;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    display: none;
    border: solid;
    border-color: #5C8F04;
    border-width: 5px;
    margin-left: 10vw;
    z-index: 9999;
}

.btn-grid {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.btn {

    border-radius: 5px;
    padding: 0.1vw 0.2vw;

    outline: none;
    justify-content: center;
    font-size: 1.5vw;
    margin:0;
    color: #111111;
    border:  #5C8F04 solid 2px;
    background-color: #C1DA96;
    transition: 0.5s;
}

.btn:hover {
    transition: 0.5s;
    background-color: #80B524;

}
.character{}

#chronoD{
    display: none;
}
#ChronoEnd1{
    display: none;
}


.Bgcharacter{
    display:block;
    width: 100vw;
}

.Dcharacter img{
    margin-left: 30vw;
    width: 40vw;
}

#nomPerso{
    position: fixed;
    background-color: #5C8F04;
    color: white;
    bottom: 19.8vw;
    padding: 0.5vw;
    left: 10vw;
    font-size: 1.3vw;
}




#inventaire{
    z-index: 999;
    position: absolute;
    top: 0.5%;
    right: 1%;
    width: 5%;
}
#listeInventaire{
    z-index: 998;
    position: absolute;
    top: 6vw;
    right: 1%;
    width: 5%;
    height: 0;
    background-color: #4B7E03;
    transition: 1s;
    border-radius: 10px ;
    overflow: hidden;
}

#listeInventaire img:first-child{
    margin-top: 2vw;
}
#listeInventaire img{
    padding-left: 0.5vw;
    height: 4vw;
    width: 4vw;
}
#nbrPièces{
    font-family: 'Bungee', cursive;
    position: absolute;
    margin-top: -2vw;
    margin-left: 3vw;
    color: white;
    font-size: 1vw;
}



.CursorNormal, body{
    cursor: url(image/curseurs/CursorNormal.png), auto !important;
}

.CursorDoigt, .btn{
    cursor: url(image/curseurs/CursorsDoigt.png) 10 0, auto !important;
}

.CursorGrab, .CursorDoigt:active{
    cursor: url(image/curseurs/CursorsGrab.png) 10 0, auto !important;
}

.CursorParler{
    cursor: url(image/curseurs/CursorParler.png), auto !important;
}

.CursorMainOuverte{
    cursor: url(image/curseurs/CursorsMainOuverte.png) 10 0, auto !important;
}

.CursorPinceau{
    cursor: url(image/curseurs/CursorsPinceau.png), auto !important;
}
.CursorGomme{
    cursor: url(image/curseurs/CursorGomme.png), auto !important;
}


@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Roboto&display=swap');

p, .container,label{
    font-family: 'Roboto', sans-serif;
}
h1,h2,h3, #nomPerso,.titreDrag{
    font-family: 'Roboto', sans-serif;
    /*font-family: 'Bungee', cursive; */
}



body{
    margin: 0;
    background-color: #CDFFC4;
    background-image: url("image/FondJeu.png");
}

#imgSon{
    position: fixed;
    width: 10vh;
    height: 10vh;
    top:5px;
    left: 5px;
    z-index: 999;
}
#imgFull{
    position: fixed;
    width: 10vh;
    height: 10vh;
    top:5px;
    left: 5px;
    z-index: 999;
}


.logo{
    position: fixed;
    bottom:0;
    left: 0;
    width: 175px;
}

.aide{
    position: fixed;
    right:0;
    top: 0;
    width: 5%;
}

.imgTuto{
    position: fixed;
    z-index: 900;
    width: 70%;
    right: 5%;
    top: 0;
}

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

button{
    border-radius: 12px;
    background-color: #80B524; /* Green */
    border: 2px solid #5C8F04;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition: 0.5s;
}

button:hover{
    transition: 0.5s;
    background-color: #70A413;
    border: 2px solid #4B7E03;
}

.hidden{
    display: none;
}

.stored{

}

.corp{
    overflow: hidden;
    height: 100%;
    width: 100%;
}