<script>
document.addEventListener("DOMContentLoaded", function() {
  var styleSheet;
    const style = document.createElement('style');
    document.head.appendChild(style);
    styleSheet = style.sheet;

  styleSheet.insertRule(`
      .iisnowflake {
       width: 4px;
       height: 4px;
       border-radius: 2px;
       background: #ddf;
       position: absolute;
      }
  `, styleSheet.cssRules.length);
  styleSheet.insertRule(`
      .iisnowflakes {
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       display: block;
       width: 100vw;
       height: 100vh;
       position: fixed;
       pointer-events: none;
      }
  `, styleSheet.cssRules.length);

  var iisnowflakes = document.createElement("div");
  iisnowflakes.classList.add('iisnowflakes');
  document.body.appendChild(iisnowflakes);

  var show = true;
  const maxflakes = Math.floor(Math.sqrt(window.innerWidth*window.innerHeight)/6);
  var flakes = [];
  window.addEventListener("resize", e => {
    flakes.forEach(el=> el.element.remove());
    flakes=[]
  });
  
  class Flake {
    constructor(container = iisnowflakes) {
      this.rect = container.getBoundingClientRect();
      this.x = Math.random() * this.rect.width;
      this.y = Math.random() * this.rect.height;
      this.opacity = 0;
      this.maxopacity = Math.random() * 0.5 + 0.2;
      this.dy = Math.random() + 0.3;
      this.dx = Math.random() - 0.5;
      this.element = document.createElement("div");
      this.element.classList.add("iisnowflake");
      this.element.style.opacity = this.opacity;
      container.appendChild(this.element);
    }
    move(angle) {
      this.x = this.x + this.dx + Math.sin(angle);
      this.y = this.y + this.dy;
      if (this.opacity < this.maxopacity) {
        this.opacity+=0.01;
        this.element.style.opacity = this.opacity;
      }
      if (this.y > this.rect.height)
        this.y = -4;
      if ( this.x < -4 )
        this.x = this.rect.width;
      if ( this.x > this.rect.width )
        this.x = -4;
      this.element.style.top = this.y + "px";
      this.element.style.left = this.x + "px";
    }
  }
    
  var angle = 0;
  function loop() {
    angle += 0.005;
    if (flakes.length < maxflakes) {
      flakes.push(new Flake());
    }
    if (show) {
      flakes.forEach((element)=>{
        element.move(angle);
      })
      window.requestAnimationFrame(loop);
    }
  }
  loop();

});
</script>