// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = () => scrollFunction();

function scrollFunction() {
  let menu = document.getElementById("menu");
  let logo = document.getElementById("site-logo");

  // if you are scrolling
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    menu.style.borderBottom = "1px solid rgb(65, 65, 65)";
    menu.style["boxShadow"] = "5px 10px 18px #888888";
    menu.style["opacity"] = "0.95";

    // find and replace the navbar padding 
    // if scrolling, smaller vertical padding 
    menu.className = menu.className.replace(/py-\d/, 'py-3');
    logo.className = logo.className.replace(/top/, 'scrolling');
  }

  // if you are not scrolling
  else {
    menu.style["boxShadow"] = "none";
    menu.style.borderBottom = "none";
    menu.style["opacity"] = "1";

    // find and replace the navbar padding 
    // if scrolling, larger vertical padding 
    menu.className = menu.className.replace(/py-\d/, 'py-4');
    logo.className = logo.className.replace(/scrolling/, 'top');
  }
}