html {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  height:100%;
  background: black;
  overflow:hidden;

  --s:3px 30px; /* size of drop of water*/
  --c:#ccc;     /* color of the water*/
  --a:-47deg;   /* control the skewing*/
  --w:520px;    /* width of the pattern*/
  --h:710px;    /* height of the pattern*/

  --rad:radial-gradient(var(--s),var(--c) 50%,transparent 10%)
}
html:before,
html:after{
  content:"";
  position:absolute;
  bottom:0;
  right:-100%;
  left:0%;
  height:calc(200% + var(--h) + 250px); /* should be bigger than (100% + var(--h))*/
  background:
  var(--rad) 15px  1px;
  background-size:var(--w) var(--h);
  animation:rain 1.5s linear infinite;
  transform:skew(var(--a));
}
html::after {
  animation: rain 2.5s linear infinite;
  left:250px;
}

body {
  height:100%;
}

#rocket {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
#rocket img {
  animation: shake 1.5s infinite;
  width: 30%;
  height: auto;
  z-index: 10;
}

@keyframes shake {
  0%  { transform: translate3d(0, 0, 0)             rotate(0deg);    }
  10% { transform: translate3d(-0.05vw, -0.05vw, 0) rotate(0.5deg);  }
  20% { transform: translate3d(0.1vw, 0.1vw, 0)     rotate(0deg);    }
  30% { transform: translate3d(-0.2vw, -0.2vw, 0)   rotate(-1deg);   }
  40% { transform: translate3d(0.2vw, -0.2vw, 0)    rotate(0.5deg);  }
  50% { transform: translate3d(-0.2vw, 0.2vw, 0)    rotate(1deg);    }
  60% { transform: translate3d(0.2vw, 0.2vw, 0)     rotate(0deg);    }
  70% { transform: translate3d(-0.2vw, 0, 0)        rotate(-0.5deg); }
  80% { transform: translate3d(0.1vw, -0.1vw, 0)    rotate(0deg);    }
  90% { transform: translate3d(-0.05vw, 0.05vw, 0)  rotate(-0.5deg); }
}

@keyframes rain{
  to {
    transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
  }
}