body{
    margin: 0;
    padding: 0;
    background-image: url(../image/moon.gif);
    background-size: cover;
}
h3{
color: #fff;
}
.exit{
    width: 3%;
    position: absolute;
    top: 5%;
    left: 7%;
}
.exit:hover{
width: 3.2%;
animation: wobble-ver-right 0.8s both;
}
/*************************************************/
.image1{
  color: transparent;
    width: 21%;
    height: 100px;
    margin: 0 auto;
    background-size: cover;
    animation: float 10s infinite;
    background-image: url(../image/flecheH.png);
}
.image1:hover{
  color: #fff;
  cursor: pointer;
}
.texteHaut{
  position: absolute;
  top: -30px;
  left: 10px;
}

.image2{
  color: transparent;
    width: 21%;
    height: 100px;
    margin: 0 auto;
    background-size: cover;
    margin-left: 60%;
    animation: float 10s infinite;
    background-image: url(../image/flecheD.png);
}
.image2:hover{
  color: #fff;
  cursor: pointer;
}
.textedroite{
  position: absolute;
  top: 20px;
  left: 100px;
}

.image3{
  color: transparent;
    width: 21%;
    height: 100px;
    margin: 0 auto;
    background-size: cover;
    margin-left: 40%;
    animation: float 10s infinite;
    background-image: url(../image/flecheB.png);
}
.image3:hover{
  color: #fff;
  cursor: pointer;
}
.textebas{
  position: absolute;
  top: 70px;
}

.image4{
  color: transparent;
    width: 21%;
    height: 100px;
    position: absolute;
    margin: 0 auto;
    top: 150px;
    background-size: cover;
    margin-left: 19%;
    animation: float 10s infinite;
    background-image: url(../image/flecheG.png);
}
.image4:hover{
  color: #fff;
  cursor: pointer;
}
.textegauche{
  position: absolute;
  top: 20px;
  left: -70px;
}
/*********************************************/
.contenu{
   width: 100%;
  }

.container{
    text-align: center;
    width: 50%;
    margin: 0 auto;
    padding-top: 12%;
    }
.text{
    color: #fff;
    text-align: center;
    width: 50%;
    margin: 0 auto;
    font-size: 1.2em;
    animation: float 10s ease-in-out infinite;
    }
/* ----------------------------------------------
 * Generated by Animista on 2020-10-7 18:2:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-ver-right
 * ----------------------------------------
 */

 @keyframes wobble-ver-right {
    0%,
    100% {
              transform: translateY(0) rotate(0);
              transform-origin: 50% 50%;
    }
    15% {
              transform: translateY(-15px) rotate(3deg);
    }
    30% {
              transform: translateY(7.5px) rotate(-3deg);
    }
    45% {
              transform: translateY(-7.5px) rotate(1.8deg);
    }
    60% {
              transform: translateY(4.5px) rotate(-1.2deg);
    }
    75% {
              transform: translateY(-3px) rotate(0.6deg);
    }
  }

  @keyframes float {
    0%,
    100% {
		transform: translatey(-5px) translatex(5px);
    }
    25% {
		transform: translatey(5px) translatex(-5px);
	}
	50% {
		transform: translatey(5px) translatex(5px);
	}
	75% {
		transform: translatey(-5px) translatex(-5px);
	}
}