I have been trying this udemy project and want to put some confetti animation once the answer is correct. However, the animation is going at the bottom part of my screen. How can I move the confetti at the body of my whole screen?

I attached below the picture of what it looks like when executed and the js code of the confetti part. Thanks!

Confetti animation picture

Please see the code for reference:

let maxParticleCount = 150; //set max confetti count
let particleSpeed = 2; //set the particle animation speed
let startConfetti; //call to start confetti animation
let stopConfetti; //call to stop adding confetti
let toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
let removeConfetti; //call to stop the confetti animation and remove all confetti immediately

(function () {
  startConfetti = startConfettiInner;
  stopConfetti = stopConfettiInner;
  toggleConfetti = toggleConfettiInner;
  removeConfetti = removeConfettiInner;
  let colors = [
    'DodgerBlue',
    'OliveDrab',
    'Gold',
    'Pink',
    'SlateBlue',
    'LightBlue',
    'Violet',
    'PaleGreen',
    'SteelBlue',
    'SandyBrown',
    'Chocolate',
    'Crimson',
  ];
  let streamingConfetti = false;
  let animationTimer = null;
  let particles = [];
  let waveAngle = 0;

  function resetParticle(particle, width, height) {
    particle.color = colors[(Math.random() * colors.length) | 0];
    particle.x = Math.random() * width;
    particle.y = Math.random() * height - height;
    particle.diameter = Math.random() * 10   5;
    particle.tilt = Math.random() * 10 - 10;
    particle.tiltAngleIncrement = Math.random() * 0.07   0.05;
    particle.tiltAngle = 0;
    return particle;
  }

  function startConfettiInner() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    window.requestAnimFrame = (function () {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          return window.setTimeout(callback, 16.6666667);
        }
      );
    })();
    let canvas = document.getElementById('confetti-canvas');
    if (canvas === null) {
      canvas = document.createElement('canvas');
      canvas.setAttribute('id', 'confetti-canvas');
      canvas.setAttribute(
        'style',
        'display:block;z-index:999999;pointer-events:none'
      );
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener(
        'resize',
        function () {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
        },
        true
      );
    }
    let context = canvas.getContext('2d');
    while (particles.length < maxParticleCount)
      particles.push(resetParticle({}, width, height));
    streamingConfetti = true;
    if (animationTimer === null) {
      (function runAnimation() {
        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
        if (particles.length === 0) animationTimer = null;
        else {
          updateParticles();
          drawParticles(context);
          animationTimer = requestAnimFrame(runAnimation);
        }
      })();
    }
  }

  function stopConfettiInner() {
    streamingConfetti = false;
  }

  function removeConfettiInner() {
    stopConfetti();
    particles = [];
  }

  function toggleConfettiInner() {
    if (streamingConfetti) stopConfettiInner();
    else startConfettiInner();
  }

  function drawParticles(context) {
    let particle;
    let x;
    for (let i = 0; i < particles.length; i  ) {
      particle = particles[i];
      context.beginPath();
      context.lineWidth = particle.diameter;
      context.strokeStyle = particle.color;
      x = particle.x   particle.tilt;
      context.moveTo(x   particle.diameter / 2, particle.y);
      context.lineTo(x, particle.y   particle.tilt   particle.diameter / 2);
      context.stroke();
    }
  }

  function updateParticles() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    let particle;
    waveAngle  = 0.01;
    for (let i = 0; i < particles.length; i  ) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15) particle.y = height   100;
      else {
        particle.tiltAngle  = particle.tiltAngleIncrement;
        particle.x  = Math.sin(waveAngle);
        particle.y  =
          (Math.cos(waveAngle)   particle.diameter   particleSpeed) * 0.5;
        particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width   20 || particle.x < -20 || particle.y > height) {
        if (streamingConfetti && particles.length <= maxParticleCount)
          resetParticle(particle, width, height);
        else {
          particles.splice(i, 1);
          i--;
        }
      }
    }
  }
})();

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  user-select: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 4px;
  color: #eee;
  background-color: #222;
  /* background-color: #60b347; */
}

/* LAYOUT */
header {
  position: relative;
  height: 35vh;
  border-bottom: 7px solid #eee;
}

main {
  height: 65vh;
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.left {
  width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right {
  width: 52rem;
  font-size: 2rem;
}

/* ELEMENTS STYLE */
h1 {
  font-size: 6rem;
  letter-spacing: 2px;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.number {
  background: #eee;
  color: #333;
  font-size: 6rem;
  width: 15rem;
  padding: 3rem 0rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.between {
  font-size: 1.4rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.again {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.guess {
  background: none;
  border: 4px solid #eee;
  font-family: inherit;
  color: inherit;
  font-size: 5rem;
  padding: 2rem;
  width: 22rem;
  text-align: center;
  display: block;
  margin-bottom: 3rem;
}

.btn {
  border: none;
  background-color: #eee;
  color: #222;
  font-size: 2rem;
  font-family: inherit;
  padding: 2rem 3rem;
  cursor: pointer;
}

.btn:hover {
  background-color: #ccc;
}

.message {
  margin-bottom: 8rem;
  height: 3rem;
  letter-spacing: 4px;
}

.label-score {
  margin-bottom: 2rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Guess My Number!</title>
  </head>
  <body>
    <script src="confetti.js"></script>
    <header>
      <h1>Guess My Number!</h1>
      <p >(Between 1 and 20)</p>
      <button >Again!</button>
      <div >?</div>
    </header>
    <main>
      <section >
        <input type="number"  />
        <button >Check!</button>
      </section>
      <section >
        <p >Start guessing...</p>
        <p >