/* Navigation bar */

.navbar {

  padding-left: 20px;

  /*padding-top: 15px;*/

  padding-bottom: 15px;

  display: inline-block;

}



/* Navigation buttons */

.navbtn {

  width: 120px;

  height: 30px;

  font-family: Arial, sans-serif;

}



/* Active (current page) button */

.navbtn.active {

  background-color: #3366cc;

  color: #ffffff;

  font-weight: bold;

  border: 2px solid #ffffff;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

  margin-top: 40px;

  display: flex;

  gap: 40px;

}



.publication {

  margin-bottom: 20px;

  font-family: Calibri;

  font-size: 16px;

  text-align: left;

}



.main-content {

  flex: 1;        

  max-width: 1000px;

  margin: 0 auto;

}



.sidebar {

  width: 300px;   /* Add this - fixed width for figures */

  flex-shrink: 0; /* Add this - prevents shrinking */

}



h1 {

  text-align: center;

  color: #000000;

  font-size: 24px;

  margin-bottom: 10px;

}



/* Mobile responsive styles */

@media screen and (max-width: 768px) {

  .navbar {

    padding-left: 5px;

    padding-top: 10px;

    padding-bottom: 10px;

  }

  

  .navbtn {

    width: 80px;

    height: 25px;

    font-size: 10px;

    margin: 2px;

  }



  .container {

    flex-direction: column;  /* Stack vertically */

  }

  

  .sidebar {

    display: none;  /* Or keep visible if you want */

  }

    

  /* Make table stack vertically on mobile */

  table td {

    display: block;

    width: 100% !important;

  }

  

  /* Adjust text margins for mobile */

  p[align="justify"] {

    margin: 20px !important;

    font-size: 14px;

  }  

}