@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Bowlby+One+SC|McLaren|Staatliches|Supermercado+One&display=swap');
#moi{
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}
#moi .retour{
    z-index: 3;
}
#moiPC{
    margin: 0;
    overflow: hidden;
}
#moiPC h1{
    font-size: 10vw;
    margin-top: 0;
}
#ciel{
    background-repeat: no-repeat;
    background-size: cover;
}
#ciel h1{
    position: absolute;
    color: #333;
}
#prenom{
    top: 3vw;
    left: 32%;

}
#nom{
    top: 12vw;
    right: 25%;
    z-index: 1;
}
#fall{
    width:25%;
    top:5%;
    right: 5%;
}
#fondParallax1 {
    background-image: url("images/fondCV.png");
}

.parallaxParent {
    height: 150vw;
    overflow: hidden;
}
.parallaxParent > * {
    height: 185%;
    position: relative;
    top: -100%;
}
#nuageProp1{
    top: 11vw;
    width: 18vw;
    left: 28vw;
}
#route p{
    font-family: 'Staatliches', cursive;
    text-align: center;
    font-size: 4vw;
    width: 32vw;
}
#ciel p{
    font-family: 'Staatliches', cursive;
    text-align: center;
    font-size: 3vw;
    width: 25vw;
}
.nuage{
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 16vw;
    transition: ease-in 0.5s;
}
#nuage1{
    background-image: url(images/interactif/cloud1.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 10vw;
    position: absolute;
    top: 25vw;
}
#nuage1 h3{
    font-size: 8vw;
}


#nuage2{
    background-image: url("images/interactif/cloud2.png");
    top: 50vw;
    right: 2%;
    z-index: 1;
    padding: 7vw;
    padding-top: 4vw;
}
#nuage:hover{
    font-size: 4vw;
    transition: ease-in 0.5s;
}
#nuage2:hover{
    padding: 8vw;
    padding-top: 5vw;
}

#nuage3{
    background-image: url("images/interactif/cloud3.png");
    top: 70vw;
    left: 2%;
    padding: 6vw;
}
#nuage3:hover{
    padding: 7vw;
}

#nuage4{
    background-image: url("images/interactif/cloud5.png");
    top: 85vw;
    right: 5%;
    padding: 7vw;
}
#nuage4:hover{
    padding: 8vw;
}

#nuage5{
    background-image: url("images/interactif/cloud6.png");
    top: 100vw;
    left: 6%;
    padding: 8vw;
}
#nuage5:hover{
    padding: 9vw;
}

#nuage6{
    background-image: url("images/interactif/cloud9.png");
    top: 115vw;
    right: 5%;
    z-index: 1;
    padding: 7vw;
    padding-top: 5vw;
}
#nuage6:hover{
    padding: 8vw;
    padding-top: 6vw;
}

#soleil{
    width: 40%;
    left: 0;
    top: 0;
}
#ciel>img{
    position: absolute;
}


#testFall{
    position: absolute;
    height: 121vw;
}

#toit{
    position: absolute;
    top: 96vw;
    width: 100%;
}


#room1{
    background-image: url("images/interactif/fondRoom1.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 59vw;
}
#room1 p{
    font-size: 1.5vw;
}

.cadre{
    background-size: contain;
    background-repeat: no-repeat;
    height: 25vw;
    position: absolute;

}
#cadre1{
    background-image: url("images/interactif/cadre1.png");
    top:155vw;
    padding: 3vw;
    left: 23vw;
}
#cadre1 p, #cadre4 p,  #cadre2 p, #cadre5 p{
    padding-top: 5vw;
    width: 18vw;

}

#cadre3 p{
    padding-top: 3vw;
    width: 18vw;
}

#cadre2{
    background-image: url(images/interactif/cadre2.png);
    top: 179vw;
    left: 24vw;
    padding: 3vw;
}
#cadre2 p{
    padding-left: 1.3em;
}
#cadre3{
    background-image: url("images/interactif/cadre3.png");
    padding: 4vw;
    top: 152vw;
    right: 25vw;
}
#cadre3 p{
    padding-left: 1em;
}

#cadre4{
    background-image: url(images/interactif/cadre1.png);
    top: 179vw;
    right: 24vw;
    padding: 4vw;
}

#cadre5{
    background-image: url(images/interactif/cadre1.png);
    top: 165vw;
    right: 0;
    padding: 4vw;
}




#room2{
    background-image: url("images/interactif/fondEteint.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 274vw;
    transition: ease-in 0.5s;
}

#room2 p{
    font-family: 'Staatliches', cursive;
    text-align: center;
    font-size: 6vw;
    width: 59vw;
}

#hobbies{
    position: absolute;
    width: 31vw;
    left: -1vw;
    top: 212vw;
}
#spider{
    position: absolute;
    width: 3vw;
    left: 19vw;
    top: 221.5vw;
}

.inspiration{
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 46vw;
    display: flex;
    animation: float 6s ease-in-out infinite;
}

.inspiration img{
    height: 31vw;
    margin: 10vw;
}
.inspiration p{
    margin-left: -6em;
}
#inspiration1,#inspiration3,#inspiration4{
    background-image: url("images/interactif/cloud1.png");
}
#inspiration2{
    background-image: url("images/interactif/cloud2.png");
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-1vw);
    }
    100% {
        transform: translatey(0px);
    }
}


#inspiration1{
    right: 9vw;
    top: 218vw;
}
#inspiration2{
    top: 265vw;
}
#inspiration3{
    top: 300vw;
    right: 3vw;
}
#inspiration4{
    top: 350vw;
}

#lit{
    top: 402vw;
    left: 11vw;
    position: absolute;
    width: 70vw;
}



#route{
    background-image: url("images/fondCVTerre.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 160vw;
}

#marche{
    position: absolute;
    width: 18vw;
    right: 39vw;
    top: 444vw;
    animation: 1.5s ease-in infinite marche;
}


@keyframes marche {
    0% {
        transform:  scaleX(1);
    }
    49% {
        transform:  scaleX(1);
    }
    50% {
        transform:  scaleX(-1);
    }
    99% {
        transform:  scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}


.borne{
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

.borne1{
    background-image: url("images/interactif/borne1.png");
    height: 30vw;
}
.borne2{
    background-image: url("images/interactif/borne2.png");
    height: 30vw;
    /* position: absolute;
    right: 0;
    top: 190em; */
}
.borne3{
    background-image: url("images/interactif/borne3.png");
    height: 35vw;
}

#borne1 img{
    height: 10vw;
    margin-top: 6vw;
    margin-left: 9vw;
}

#borne1 p{
    margin-top: 0;
    margin-left:2vw;;
}

#borne2{
    height: 26vw;
    right: 0;
    top: 488vw;
}
#borne2 img{
    height: 11vw;
    margin-top: 3vw;
    margin-left: 11vw;
}

#borne2 p{
    margin-top: 0;
    margin-left: 0;
}
#borne3{
    top: 510vw;
}
#borne3 img{
    height: 14vw;
    margin-top: 3vw;
    margin-left: 6vw;
}

#borne3 p{
    margin-top: 4vw;
    margin-left: -2vw;
}

#borne4{
    right: 0;
    top: 518vw;
}
#borne4 img{
    height: 12vw;
    margin-top: 2vw;
    margin-left: 11vw;
}

#borne4 p{
    margin-top: 0;
    margin-left: 0;
}

#borne5{
    right: 2vw;
    top: 552vw;
}
#borne5 img{
    height: 13vw;
    margin-top: 3vw;
    margin-left: 7vw;
}

#borne5 p{
    margin-top: 3vw;
    margin-left: -4vw;
}
#borne6{
    top: 542vw;
}
#borne6 img{
    height: 14vw;
    margin-top: 5vw;
    margin-left: 10vw;
}

#borne6 p{
    margin-top: -3vw;
    margin-left: 2vw;
}

#borne7{
    top: 569vw;
}
#borne7 img{
    height: 12vw;
    margin-top: 5vw;
    margin-left: 6vw;
}

#borne7 p{
    margin-top: 4vw;
    margin-left: -3vw;
}


#borne8{
    top: 595vw;
    right: 0;
}
#borne8 img{
    height: 10vw;
    margin-top: 7vw;
    margin-left: 8vw;
}

#borne8 p{
    margin-top: -1vw;
    margin-left: 2vw;
}

#borne9{
    top: 613vw;
}
#borne9 img{
    height: 12vw;
    margin-top: 3vw;
    margin-left: 8vw;
}

#borne9 p{
    margin-top: -1vw;
    margin-left: 0;
}


.reveal2 {
    opacity: 0;
    -webkit-transform: rotate(40deg) scale(0.5);
    -moz-transform: rotate(40deg) scale(0.5);
    -ms-transform: rotate(40deg) scale(0.5);
    -o-transform: rotate(40deg) scale(0.5);
    transform: rotate(40deg) scale(0.5);
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.reveal2.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}


#oiseau{
    width: 100%;
    overflow: hidden;
    z-index: 0;
    top: 30vw;
    position: absolute;
}
#bird{
    width: 7vw;
    animation: 8s ease-in infinite bird;
}

@keyframes bird { from { margin-left:-20%; } to { margin-left:100%; }  }

.diplome{
    width: 28vw;
    position: absolute;
    opacity: 0;
}
.diplome:hover{
    opacity: 1;
}
#diplome1{
    top: 161vw;
    left: 21vw;
}

#diplome2{
    top: 190vw;
    left: 24vw;
}
#diplome3{
    top: 158vw;
    left: 49vw;
}
#diplome4{
    top: 188vw;
    left: 46vw;
}
#diplome5{
    top: 172vw;
    left: 71vw;
}

#murContainer{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 148vw;
}

#mur{
    position: relative;
    width: 110vw;
    right: 4vw;
    z-index: 2;
}

#dodo{
    position: absolute;
    top: 392vw;
    right: 16vw;
    width: 64vw;
    z-index: 1;
    opacity: 1;
}
#debout{
    position: absolute;
    top: 378vw;
    right: 38vw;
    width: 31vw;
    z-index: 1;
    opacity: 0;
}

#porteMF{
    position: absolute;
    top: 151vw;
    left: -5vw;
    width: 10vw;
}



#moiDiplome{
    position: absolute;
    top: 155vw;
    left: -32vw;
    width: 23vw;
}
#porteMO{
    position: absolute;
    top: 154vw;
    left: -10vw;
    width: 37vw;
    opacity: 0;
}

#plancherContainer{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 204vw;
}

#plancher{
    position: relative;
    width: 102vw;
    left: -2vw;
}

#facadeContainer{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 426vw;
}

#facade{
    position: relative;
    width: 102vw;
    left: -2vw;
}

#dehorsF{
    width: 30vw;
    position: absolute;
    top: 442vw;
    right: 34vw;
    z-index: 2;
}
#dehorsO{
    width: 15vw;
    position: absolute;
    top: 442vw;
    right: 55vw;
    opacity: 0;
}
.triggerPorte{
    position: absolute;
    top: 460vw;
}

#testMarche{
    position: absolute;
    height: 460vw;
}


#z1{
    position: absolute;
    animation: float 2.5s ease-in-out infinite;
    top: 356vw;
    right: 23vw;
    width: 13vw;
}

#z2{
    position: absolute;
    animation: float 4s ease-in-out infinite;
    width: 13vw;
    top: 285vw;
    right: 11vw;
}

#z3{
    position: absolute;
    animation: float 1.5s ease-in-out infinite;
    top: 321vw;
    width: 13vw;
    left: 8vw;
}

#z4{
    animation: float 2s ease-in-out infinite;
    position: absolute;
    top: 370vw;
    right: 13vw;
    width: 15vw;
}

#z5{
    position: absolute;
    animation: float 3s ease-in-out infinite;
    right: 81vw;
    top: 249vw;
    width: 14vw;
}

.triggerDebout{
    position: absolute;
    top: 390vw;
}

.allume{
    transition: ease-in 0.5s;
    background-image: url("images/interactif/fondAllumer.png")!important;
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .allume{
        background-image: url("images/interactif/fondEteint.png");
    }
}

#terre{
    background-image: url("images/interactif/fondTerre.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 65vw;
}

#solContainer{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 643vw;
}

#sol{
    position: relative;
    width: 134vw;
    right: 17vw;
}

#terre h3{
    position: absolute;
    z-index: 3;
    margin: 0;
}



#qualite1{
    font-family: 'Abril Fatface', cursive;
    font-size: 8vw;
    top: 666vw;
    left: 34vw;
    transform: rotate(45deg);
    color: yellowgreen;
    transition: 1s;
}

#qualite1:hover{
    transition: 1s;
    font-size: 8.5vw;
}
#qualite2{
    font-family: 'Staatliches', cursive;
    font-size: 11vw;
    top: 682vw;
    left: 31vw;
    color: forestgreen;
}
#qualite2:hover{
    transition: 1s;
    font-size: 11.2vw;
}

#qualite3{
    font-family: 'Bowlby One SC', cursive;
    font-size: 9vw;
    color: honeydew;
    top: 661vw;
    left: 4vw;
    transition: 1s;
}
#qualite3:hover{
    transition: 1s;
    font-size: 9.3vw;
}
#qualite4{
    font-family: 'Supermercado One', cursive;
    transform: rotate(-30deg);
    font-size: 12vw;
    color: #2BA62B;
    top: 677vw;
    transition: 1s;
}
#qualite4:hover{
    transition: 1s;
    font-size: 12.2vw;
}

#qualite5{
    font-family: 'McLaren', cursive;
    font-size: 9vw;
    top: 668vw;
    right: -16vw;
    transform: rotate(-90deg);
    color: seagreen;
    transition: 1s;
}
#qualite5:hover{
    transition: 1s;
    font-size: 9.3vw;
}

#cave{
    background-image: url("images/interactif/fondCave.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 55vw;
}

#rocheContainer{
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 700vw;
}

#roche{
    position: relative;
    width: 111vw;
    right: 6vw;
}

#cvNormal{
    position: absolute;
    top: 742vw;
    width: 17vw;
    left: 26vw;
}

#cvCreatif{
    position: absolute;
    top: 743vw;
    width: 15vw;
    left: 63vw;
}

#number{
    position: absolute;
    top: 750vw;
    font-size: 4vw;
    left: 43vw;
    font-family: 'Staatliches', cursive;
    color: white;
    margin: 0;
}

#mailMoi{
    position: absolute;
    top: 743vw;
    left: 43vw;
    font-size: 6vw;
    font-family: 'Staatliches', cursive;
    text-decoration: none;
    color: white;
    transition: 0.5s ease-out;
    margin: 0;
}

#mailMoi:hover{
    text-decoration: underline solid;
    color: #5bc0de;
    transition: 0.5s ease-out;
}

#descriptionCave{
    position: absolute;
    top: 722vw;
    left: 12vw;
    width: 78vw;
    text-align: center;
    font-size: 2.6vw;
    margin: 0;
    font-family: 'Staatliches', cursive;
    color: white;
}