body{
    margin: 0;
    padding: 0;
    background-image: url(../image/final.gif);
}

.equipe{
    width: 5%;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    bottom: 5%;
    right: 10%;
}

.manual{
    width: 5%;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    bottom: 5%;
    left: 10%;
}
.btnJeu{
        font-size: 3em;
        background-color: #000;
        position: absolute;
        top: 45%;
        left: 40%;
        text-decoration: none;
        color: #fff;
        border: #fff solid 2px;
        padding: 15px;
        border-radius: 20px;
        animation: float 10s ease-in-out infinite;
}

/**********************titre*******************/
.txtTitre {
        font-size: 5.2em;
        position: absolute;
        left: 11.9%;
        top: 5%;
        animation: tracking-in-expand 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        font-family: "Slighty", serif;
        background:linear-gradient(to bottom left,#d4cfc9, #576772);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@font-face {
        font-family: "Slighty";
        src: url("/fonts/Slightly\ Eroded.ttf");
      }
@keyframes tracking-in-expand {
        0% {
          letter-spacing: -0.5em;
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
        100% {
          opacity: 1;
        }
      }

/**********************ANIMATION*******************/
.heartbeat {
        animation: heartbeat 1.5s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-7 12:21:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  
  @keyframes float {
        0%,
        100% {
                    transform: translatey(-7px) translatex(7px);
        }
        25% {
                    transform: translatey(7px) translatex(-7px);
            }
            50% {
                    transform: translatey(7px) translatex(7px);
            }
            75% {
                    transform: translatey(-7px) translatex(-7px);
            }
    }