footer {
    bottom: 0;
    width: 100%;
    height: 20px; /* adjust this value to match the height of your footer */
    margin-top: 10vh;
  }
  #myCanvas {
    width: 60%;
    height: 50vh;
    top: 0;
    left: 0;
    margin: auto;
  }
  .name:hover {
    font-weight: bold;
  }
  .navLink:hover {
    font-weight: bold;
  }
  .active {
    font-weight: bold;
  }
  

  @media (orientation: landscape) and (max-width: 767px) {
    /* styles for phones in landscape mode */
    footer {
      position: absolute;
    }
  }
  @media (min-width:700px) {
    #myCanvas {
        width: 50%;
        height: 50vh;
        top: 0;
        margin:auto;
   }
  }
  @media (min-width:1100px) {
    #myCanvas {
        width: 40%;
        height: 50vh;
        top: 0;
        margin:auto;
   }
   footer {
    position: absolute;
   }
  }
  @media (min-width:1600px) {
    #myCanvas {
        width: 35%;
        height: 50vh;
        top: 0;
        margin:auto;
   }
   footer {
    position: absolute;
   }
  }