<div class="container">
  <div class="box">
    <h1>particles.js Demo</h1>
    <p><a href="https://marcbruederlin.github.io/particles.js/">Website</a></p>
  </div>
</div>


<canvas class="background"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>

@import url('https://fonts.googleapis.com/css?family=Merienda');

.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

/* Default Styling */
body {
  font-family: 'Merienda', cursive;
  background: #000;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  position: absolute;
  z-index: 1;
}
a {
  color: #0bd;
}

var particles = Particles.init({
	selector: '.background',
  sizeVariations: 10,
  color: ['#00bbdd', '#404B69', '#DBEDF3'],
  connectParticles: true
});