/*html,
body {
    background-color: #efefef;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}*/

#texte {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.3em;
    line-height: 0.7em;
    text-align: center;
    transform: translateY(-116%);
    text-shadow: 8px 8px 8px rgb(170, 168, 168);
    /* text-transform: uppercase; */
    letter-spacing: 1px;
}


/* déplacement des lettres de haut en bas*/

#texte {
    transform: rotateX(360deg);
}

#texte:hover {
    cursor: default;
}

#texte .wrapper {
    display: inline-block;
    top: -700px;
    position: relative;
    height: 50px;
    /* default */
    width: 100px;
    /* default */
    transition: ease 0.9s all;
}

#texte .wrapper span {
    position: absolute;
    top: 0;
    right: 0;
    transition: ease 0.6s all;
}


/* couleur des lettres animées du dessous  */

#texte .wrapper span.letter-2 {
    color: #FF8D53;
}


/* couleur des lettres animées  */

#texte .wrapper span.letter-1 {
    color: #3A2B4E;
    z-index: 1;
}

#texte .wrapper span.letter-1:hover {
    top: -3px;
    right: -3px;
}

#texte .wrapper span.letter-1:hover~.letter-2 {
    top: 3px;
    right: 3px;
}

#texte .wrapper span.space {
    padding: 0;
    min-width: 18px;
    /*display: inline-block;*/
}