text:   
  // var letexte = 'website under development...';
  // var montimer;
  // var cmpt = 0;
  // function typewriter(){
  //    lelien = document.getElementById('underdev');
  //    if(cmpt < letexte.length){
  //       courant = lelien.innerHTML.substring(0, lelien.innerHTML.length -1);
  //       courant += letexte.charAt(cmpt)+" ";
  //       lelien.innerHTML = courant;
  //    }
  //    else{
  //       lelien.innerHTML = "";
  //       cmpt = -1;
  //    }
  //    cmpt++;
  //    setTimeout("typewriter()",150);
  // }
  // window.onload = function(){
  //    typewriter();
  // }
  
  
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  c.height = window.innerHeight;
  c.width = window.innerWidth;
  var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
  matrix = matrix.split("");
  var font_size = 10;
  var columns = c.width/font_size; //number of columns for the rain
  //an array of drops - one per column
  var drops = [];
  //x below is the x coordinate
  //1 = y co-ordinate of the drop(same for every drop initially)
  for(var x = 0; x < columns; x++)
      drops[x] = 1; 
  
  //drawing the characters
  function draw()
  {
      //Black BG for the canvas
      //translucent BG to show trail
      ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
      ctx.fillRect(0, 0, c.width, c.height);
  
      ctx.fillStyle = "#ff003c"; //green text
      ctx.font = font_size + "px arial";
      //looping over drops
      for(var i = 0; i < drops.length; i++)
      {
          //a random chinese character to print
          var text = matrix[Math.floor(Math.random()*matrix.length)];
          //x = i*font_size, y = value of drops[i]*font_size
          ctx.fillText(text, i*font_size, drops[i]*font_size);
  
          //sending the drop back to the top randomly after it has crossed the screen
          //adding a randomness to the reset to make the drops scattered on the Y axis
          // if(drops[i]*font_size > c.height && Math.random() > 0.975)
          //     drops[i] = 0;
  
          //incrementing Y coordinate
          drops[i]++;
      }
  }
  
  setInterval(draw, 15);
  
  
  
  
  
  
  var sidenav = document.getElementById("mySidenav");
  var openBtn = document.getElementById("openBtn");
  var closeBtn = document.getElementById("closeBtn");
  
  openBtn.onclick = openNav;
  closeBtn.onclick = closeNav;
  
  /* Set the width of the side navigation to 250px */
  function openNav() {
    sidenav.classList.add("active");
  }
  
  /* Set the width of the side navigation to 0 */
  function closeNav() {
    sidenav.classList.remove("active");
  }
  
  
  
  