body {
  margin: 0;
  /*overflow: hidden;*/
  background-color: black;
  color: white;
  font-family: bianzhidai;
}

h1{
    
   /*text-align: center;*/
   font-size: 100px;
  display: grid;
  place-content: center;
  gap: 1ch;

}


img {
  position: absolute;
  opacity: 0.5;
  pointer-events: auto;

  animation: move 12s infinite ease-in-out,
   rotate 20s infinite linear;
}


img:hover {
  opacity: 1;
  filter: brightness(110%) saturate(130%);
}

/* Animation principale (trajectoire) 
@keyframes move {
  0%   { transform: translate(0vw, 0vh); }
  25%  { transform: translate(30vw, 20vh); }
  50%  { transform: translate(60vw, -20vh); }
  75%  { transform: translate(-20vw, 30vh); }
  100% { transform: translate(0vw, 0vh); }
}*/

/* Rotation douce */
@keyframes rotate {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}


img:nth-child(1)  { top: 10%; left: 5%;  animation-duration: 14s; }
img:nth-child(2)  { top: 80%; left: 20%; animation-duration: 10s; }
img:nth-child(3)  { top: 30%; left: 70%; animation-duration: 16s; }
img:nth-child(4)  { top: 60%; left: 40%; animation-duration: 9s; }
img:nth-child(5)  { top: 20%; left: 90%; animation-duration: 13s; }
img:nth-child(6)  { top: 50%; left: 10%; animation-duration: 11s; }
img:nth-child(7)  { top: 20%; left: 60%; animation-duration: 15s; }
img:nth-child(8)  { top: 60%; left: 50%; animation-duration: 12s; }
img:nth-child(9)  { top: 85%; left: 35%; animation-duration: 8s; }
img:nth-child(10) { top: 40%; left: 80%; animation-duration: 14s; }
img:nth-child(11) { top: 25%; left: 25%; animation-duration: 10s; }
img:nth-child(12) { top: 65%; left: 75%; animation-duration: 18s; }
img:nth-child(13) { top: 5%;  left: 60%; animation-duration: 9s; }
img:nth-child(14) { top: 90%; left: 50%; animation-duration: 13s; }
img:nth-child(15) { top: 45%; left: 15%; animation-duration: 11s; }

/* Variations de direction */
img:nth-child(even) {
  animation-direction: reverse;
}

/* Délais différents pour casser la synchro */
img:nth-child(3n) {
  animation-delay: 2s;
}

img:nth-child(4n) {
  animation-delay: 4s;
}









@font-face {
  font-family: bianzhidai;
  src: url(/font/bianzhidai-2.0-main/bianzhidai-2.0-main/fonts/bianzhidai/WOFF/bianzhidai-Base.woff);
}

img:active{
    width: 70%;
    opacity: 1;
    filter: brightness(110%) saturate(130%);

 
}






/*body{
    background-color:black;
    display: grid;
    place-items: center;
    background-image: url(fond/fond.jpg);
} 

img{
    
    opacity: 55%;
}
img:hover {
    opacity:1;
    filter: brightness(110%)saturate(130%);
}

.background-image{
    opacity: 30%;
}

img {
  position: absolute;
  animation: movearound 1800ms infinite alternate;
  /*animation: rotation 8s infinite alternate;
}





délais et positions différentes pour chaque image
img:nth-child(1) {top:10%; animation-delay: 0ms}
img:nth-child(2) {bottom: 10%; animation-delay: 1000ms}
img:nth-child(3) {top: 10%; animation-delay: 650ms}
img:nth-child(4) {top: 10%; animation-delay: -1000ms}
img:nth-child(5) {bottom: 10%; animation-delay: 850ms}
img:nth-child(6) {top:10%; animation-delay: 0ms}
img:nth-child(7) {bottom: 60%; animation-delay: 350ms}
img:nth-child(8) {top: 10%; animation-delay: 650ms}
img:nth-child(9) {top: 10%; animation-delay: -250ms}
img:nth-child(10) {bottom: 10%; animation-delay: 850ms}
img:nth-child(11) {top: 10%; animation-delay: -1000ms}
img:nth-child(12) {bottom: 10%; animation-delay: 850ms}
img:nth-child(13) {top:10%; animation-delay: 0ms}
img:nth-child(14) {bottom: 60%; animation-delay: 350ms}
img:nth-child(15) {top: 10%; animation-delay: 650ms}

@keyframes movearound {
  0% { transform: translate(0,0,)}
  100% { transform: translate(calc(100vw - 200px),0)}
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}



*/