:root {
  --width-body-section: 1200px;
  --min-footer-width: 630px;
  --height-navbar: 125px;
  --color-navbar-transparent: rgba(0, 131, 76, 0.8);
  --color-navbar-solid: rgb(44, 156, 110);
  --color-navbar-buttons: rgb(0, 167, 117);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin-top: var(--height-navbar);
  margin-bottom: 0;

  /*bg image related css*/
  background-image: url("/Assets/artwork/web_2.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}

/*Styles to make mid body section in a semi-transparent box*/
/*this box contains the webpage's main content*/
.body-section {
  max-width: var(--width-body-section);
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.95); /* semi-transparent white */
  padding: 20px;

  box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1),
    -5px 0 10px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/

  /*padding-bottom: 2500px; /*test scrolling*/
}