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%);
}


@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); }
}


@keyframes rotate {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}


img:nth-child(1)  { top: 50%; 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: 70%; left: 60%; animation-duration: 15s; }
img:nth-child(8)  { top: 15%; 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; }
img:nth-child(16) { top: 85%; left: 25%; animation-duration: 10s; }
img:nth-child(17) { top: 26%; left: 75%; animation-duration: 18s; }
img:nth-child(18) { top: 10%;  left: 5%; animation-duration: 9s; }
img:nth-child(19) { top: 90%; left: 50%; animation-duration: 13s; }
img:nth-child(20) { top: 23%; left: 56%; animation-duration: 11s; }
img:nth-child(21) { top: 25%; left: 25%; animation-duration: 10s; }
img:nth-child(22) { top: 36%; left: 75%; animation-duration: 18s; }


/* 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(5n) {
  animation-delay: 4s;
  height: 700px;
}
*/

/*perle*/
img:nth-child(1){
    height: 20px;
    opacity: 100%;
}


/*img:nth-child(21 22){
    height: 100%;
    width: 200%;
}*/



@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%);

 
}