/*général*/

body {
  font-family: "Pixel Font-7 V2";
  font-size: 24px;
  color: #000;
}

h1 {
  display: inline;
}


/*pages et index*/

.pderrier {
  background-color: #ffffff;
  width: 60%;
  padding: 2%;
  margin-left: 18%;
  padding-top: 15%;
  box-shadow: 0px 50px 50px #7a7a7a;
}

.pderrier img {
  margin-bottom: 5%;
}

.principale {
  background-color: #DEB887;
  width: 60%;
  padding: 2%;
  margin-left: 18%;
  padding-top: 15%;
  box-shadow: 0px 50px 50px #7a7a7a;
}

.principale h3 {
  margin-top: 5%;
}

.infobulle {
  width: 3%;
}


.contenu {
  background-color: #c0c0c0;
}

.contenu_fun {
  margin-top: 15%;
}

.photo {
  border-radius: 20px;
}

.galerie img {
  width: 60%;
  padding: 2%;
  margin-top: 15%;
  margin-left: 17%;
  background-color: #7a7a7a;
}

.galeriefond {
  background-color: #232323;
}



/*bannière et menu*/

.contenu .entete {
  position: fixed;
  top: 0;
  background-image: url(images/stone.png);
  margin-left: -8px;
}

.contenu_fun .entete {
  position: fixed;
  top: 0;
  background-image: url(images/stone.png);
  margin-left: -8px;
}

.index .entete {
  position: fixed;
  top: 0;
  background-image: url(images/bois.jpg);
  margin-left: -8px;
}


.titre {
  margin-left: 40%;
  margin-bottom: -3%;
  margin-top: -2%;
  width: 20%;
}

.menu {
  background-color: #aaaaaa;
  padding-top: 1%;
  display: flex;
  list-style-type: none;
}

.logo {
  width: 50px;
  margin-bottom: 7%;
}

.liste2 {
  margin-right: 100px;
}

.liste {
  margin-right: 125px;
}

.liste:hover {
  color: green;
  background-color: #8c8c8c;
}


/*slider*/

.slider-1 {
  background: #aaaaaa;
  width: 90%;
  margin: 10% auto;
  overflow: hidden;
  border: solid 3px;
  box-shadow: 0px 0px 50px #232323;
}

.slider-1 .slider {
  display: flex;
  animation: slider-1 200s infinite ease-in-out;
}

.slider-1 p {
  flex-shrink: 0;
  padding: 5% 0;
  width: 100%;
  text-align: center;
}

@keyframes slider-1 {
  0% {
    transform: translateX(0);
  }

  5% {
    transform: translateX(-100%);
  }

  10% {
    transform: translateX(-200%);
  }

  15% {
    transform: translateX(-300%);
  }

  20% {
    transform: translateX(-400%);
  }

  25% {
    transform: translateX(-500%);
  }

  30% {
    transform: translateX(-600%);
  }

  35% {
    transform: translateX(-700%);
  }

  40% {
    transform: translateX(-800%);
  }

  45% {
    transform: translateX(-900%);
  }

  50% {
    transform: translateX(-1000%);
  }

  55% {
    transform: translateX(-1100%);
  }

  60% {
    transform: translateX(-1200%);
  }

  65% {
    transform: translateX(-1300%);
  }

  70% {
    transform: translateX(-1400%);
  }

  75% {
    transform: translateX(-1500%);
  }

  80% {
    transform: translateX(-1600%);
  }

  85% {
    transform: translateX(-1700%);
  }

  90% {
    transform: translateX(-1800%);
  }

  95% {
    transform: translateX(-1900%);
  }

  100% {
    transform: translateX(-2000%);
  }
}

/*@keyframes sert à inserer une animation et à l'interieur c'est simplement ce qui fait slider les phrases avec entre parenthèses les coordonées
  
  au dessus animation permet de designer un objet qui va subir l'animation et d'inserer des variables comme le temps, le nombre de boucle que vas faire l'animation et enfin relier la fin au debut.*/

/*secret*/

.secret {
  background-image: url(images/secret.jpg);
  background-size: 25%;
}

.singe {
  margin-top: 15%;
  margin-left: 30%;
  border-color: white;
}

.secret img {
  margin-left: 47%;
}

.logo2 {
  width: 5%;
  background-color: #f1f1f1;
  padding: 0.5%;
  border-radius: 25px;
}