.canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.falling-layer, .ground-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
 

#canvas-1 {
    z-index: 0;
}

#canvas-2 {
    z-index: 0;
}

#primary {
  z-index: 1;
}

.flower {
  position: absolute;
  top: -50px;
  width: 40px;
  height: 40px;
  animation: fall var(--duration) linear forwards;
  animation-delay: var(--delay);
  transform: rotate(var(--rotate));
  /* animation-timing-function: ease-out; */
}

.canvas img {
    width: 40px !important;
    height: 40px !important;
    pointer-events: none;
}

@keyframes fall {
  0% {
    transform: translateX(0) translateY(0) rotate(var(--rotate));
  }
  100% {
    transform: translateX(var(--sway)) translateY(calc(100vh + 20px + var(--offset))) rotate(calc(var(--rotate) + 360deg));
  }
}