* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: crosshair;
}
/*  */
#container-otoño {
  width: 100%;
  height: 100vh;
  background: rgba(248, 248, 248, 0.692);
  background-image: url(/img/fondo3.jpg);
  background-size: cover;
  background-repeat: no-repeat;

  filter: contrast(1); /* para colocarlo en su posicion */
  overflow: hidden;
}
otoño {
  position: absolute;
  border-radius: 50%;
  top: -10px;
  animation: hojas-otoño linear infinite;
  z-index: 10;

  /* position: fixed; */ /* fijar */
}

@keyframes hojas-otoño {
  0% {
    background-image: url(/img/hojaOtoño.png);
    background-size: cover;
    /* box-shadow: 1px 1px 1px rgb(255, 123, 0); */
    top: -10px;
    transform: rotate(0deg) translateX(100px); /* DE a IZ */

    filter: hue-rotate(0deg) contrast(1);
  }
  20% {
    filter: hue-rotate(60deg);
  }
  50% {
    background-image: url(/img/hojaOtoño.png);
    background-size: cover;
    transform: rotate(180deg) translateX(-100px); /* IZ a DE */
  }
  100% {
    background-image: url(/img/hojaOtoño.png);
    background-size: cover;
    /* box-shadow: 1px 1px 1px rgb(255, 123, 0); */
    top: calc(100vh + 50px);
    transform: rotate(360deg) translateX(200px); /* DE a IZ */

    filter: hue-rotate(0deg) contrast(1);
  }
}