.autumn-container {
  display: block;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  contain: layout paint;
}

.leaf {
  position: fixed;
  z-index: 15;
  top: 0;
  will-change: transform;
  translate: 0 -10vh;
  font-size: 1em;
  color: #fff;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  user-select: none;
  cursor: default;
  animation-name: leaf-fall, leaf-shake;
  animation-duration: 7s, 4s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* Class to disable rotation */
.no-rotation {
  --rotate-start: 0deg !important;
  --rotate-end: 0deg !important;
}


@keyframes leaf-fall {
  0% {
    translate: 0 -10vh;
  }

  100% {
    translate: 0 100vh;
  }
}


@keyframes leaf-shake {
  0%, 100% {
    transform: translateX(0) rotate(var(--rotate-start, -20deg));
  }
  50% {
    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
  }
}