* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #141414 32px ), repeating-linear-gradient( #00000055, #000000 );;

 font-family: 'Rubik', sans-serif;
  margin: 0;
  min-height: 100vh;
    display: grid;
  place-items: center;
}

#text {
  z-index: 10;
  margin: 20px;
  font-weight: regular;
  color: white;
  position: absolute;
  font-size: 1rem;
  text-align: bottom;
}

#link {
   color: white;
}

 .grid{
  margin-left: auto;
  margin-right: auto;
  max-width: inherit;
  width: 100%;

}

 .container{
  background-image: radial-gradient(at 300px 300px, rgba(120,123,221,.5) 0, #000000 70%);
  text-shadow: 0px 1px 2px rgba(0.8,0.8,0.8,1.6);

}

var canvas = document.createElement('canvas');
var clone = document.createElement('canvas');
var sempliceCover = document.querySelector('.container');
sempliceCover.appendChild(canvas);
sempliceCover.appendChild(clone);

var cloneCtx = clone.getContext('2d');
var ctx = canvas.getContext('2d');
   
var ww = window.innerWidth;
var wh = window.innerHeight;
  
canvas.width = ww;
canvas.height= wh;
var partCount = 100;
var particles = [];

var gradient = document.querySelector(".container");
function onMouseMove(event) {
gradient.style.backgroundImage = 'radial-gradient(at ' + event.clientX + 'px ' + event.clientY + 'px, rgba(120,123,221,.5) 0, #000000 70%)';}
document.addEventListener("mousemove", onMouseMove);
  
function particle(){
  this.color = 'rgba(255,255,255,'+ Math.random()+')';
  console.log(this.color);
  this.x = randomInt(0,ww);
  this.y = randomInt(0,wh);
  this.direction = {
    "x": -1 + Math.random() * 2,
    "y": -1 + Math.random() * 2
  };
  this.vx = 0.3 * Math.random();
  this.vy = 0.3 * Math.random();
  this.radius = randomInt(2,3);
  this.float = function(){
    this.x += this.vx * this.direction.x;
    this.y += this.vy * this.direction.y;
  };
  this.changeDirection = function (axis) {
    this.direction[axis] *= -1;
  };
  this.boundaryCheck = function () {
            if (this.x >= ww) {
                this.x = ww;
                this.changeDirection("x");
            } else if (this.x <= 0) {
                this.x = 0;
                this.changeDirection("x");
            }
            if (this.y >= wh) {
                this.y = wh;
                this.changeDirection("y");
            } else if (this.y <= 0) {
                this.y = 0;
                this.changeDirection("y");
            }
        };
  this.draw = function () {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
  };
}
function clearCanvas() {
 cloneCtx.clearRect(0, 0, ww, wh);
 ctx.clearRect(0, 0, ww, wh);
}
function createParticles(){
  for (i=0;i<partCount;i++){
    var p = new particle();
    particles.push(p);
  }
}
function drawParticles() {
   for (i=0;i<particles.length;i++) {
     p = particles[i];
     p.draw();
   }
}
function updateParticles() {
        for (var i = particles.length - 1; i >= 0; i--) {
            p = particles[i];
            p.float();
            p.boundaryCheck();
        }
}
createParticles();
drawParticles();
function animateParticles() {
        clearCanvas();
        drawParticles();
        updateParticles();
        cloneCtx.drawImage(canvas, 0, 0);
        requestAnimationFrame(animateParticles);
    }
requestAnimationFrame(animateParticles);
cloneCtx.drawImage(canvas, 0, 0);

$(window).on('resize',function(){
  ww = $(window).width();
  wh = $(window).height();
  canvas.width = ww;
  canvas.height= wh;
  clearCanvas();
  particles = [];
  createParticles();
  drawParticles();
});
function randomInt(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
function velocityInt(min,max)
{
    return Math.random()*(max-min+1)+min;
}