.hero {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  background: linear-gradient(135deg, #333, #451b2f, #9a3d68);
  background-size: 600% 600%;
  animation: gradientShift 15s ease infinite;
  overflow: hidden;
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* behind text */
}

.hero h1,
.hero .typing,
.hero p,
.hero .btn {
  position: relative;
  z-index: 1; /* above particles */
}