body {
  background: #1e293b; /* slate-800 */
  position: relative;
  overflow-x: hidden;
}

/* layer garis */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(90deg, rgba(89, 169, 204, 0.42) 1px, transparent 1px),
    linear-gradient(180deg, rgba(95, 184, 240, 0.31) 1px, transparent 1px),
    linear-gradient(120deg, rgba(97, 203, 249, 0.38) 1px, transparent 1px),
    linear-gradient(60deg, rgba(156, 223, 242, 0.22) 1px, transparent 1px);

  background-size:
    120px 120px,
    140px 140px,
    180px 180px,
    200px 200px;

  animation: snakeMove 25s linear infinite;
  opacity: 0.35;
}

@keyframes snakeMove {
  0% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }
  25% {
    background-position:
      200px 50px,
      -150px 120px,
      80px -100px,
      -60px 90px;
  }
  50% {
    background-position:
      -100px 200px,
      200px -150px,
      -120px 60px,
      100px -80px;
  }
  75% {
    background-position:
      150px -120px,
      -200px 80px,
      60px 140px,
      -90px -60px;
  }
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }
}