body {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        line-height: 1.8;
        /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;*/
        font-size: 15px;
        /*line-height: 1.6;*/
        color: #24292e;
        background-color: #fff;
        margin: 0;
        padding: 0;
      }
      
      .container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
      }
      

      .sidebar {
        /*width: 280px;*/
        width: 220px;
        padding-left: 20px;
        padding-right: 15px;
        padding-top: 30px;
        padding-bottom: 30px;
      /*  padding-left: 30px;
        padding-right: 20px;*/
        position: fixed;
        height: 100vh;
        overflow-y: auto;
        box-sizing: border-box;
        border-right: 1px solid #eaecef;
        /*new */
        font-family: 'Roboto', sans-serif; 
        font-weight: 400;
        line-height: 1.8;
      }
      
      .sidebar h1 {
        width: 100%;
        overflow: visible;
        /*font-size: 28px;*/
        margin-bottom: 15px;
        /*new */
        font-size: 26px;
        font-weight: 500;     /* Medium for a subtle but clear heading */
        margin-bottom: 20px;
      }
      
      .sidebar a {
        /*display: block;
        margin-bottom: 10px;
        color: #5c85c4;
        font-size: 20px;
        transition: color 0.2s;

        new*/
        display: block;
        margin-bottom: 12px;
        color: #5c85c4;
        font-size: 17px;
        font-weight: 300;      /* Light for minimalist appearance */
        letter-spacing: 0.4px; /* Helps clean look */
        font-family: 'Roboto', sans-serif;
        transition: color 0.2s;
      }
      
      .sidebar a:hover {
        color: #3a5d9c;
      }
      
      .sidebar img {
        max-width: 100%;
        display: block;
        margin: 25px auto;
        border-radius: 4px;
      }

      .content {
        margin-left: 230px;
        padding: 30px 40px 30px 0;
        width: calc(100% - 230px);
        max-width: 700px;
        font-size: 17px;
      }
      
      h1 {
        color: #5c85c4;
        font-weight: 500;
        margin-top: 0;
        white-space: nowrap;
      }
      
      h2 {
        color: #24292e;
        font-size: 24px;
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 15px;
        padding-bottom: 0.3em;
      }
      
      h4 {
        color: #24292e;
        font-size: 18px;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 12px;
      }
      
      a {
        color: #5c85c4;
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      p {
        line-height: 1.7;
      }
      
      ul {
        padding-left: 20px;
        margin-top: 10px;
      }
      
      li {
        margin-bottom: 12px;
        line-height: 1.5;
      }


/*begin headshot contain stuff */
      .headshot-container {
        margin-bottom: 30px;
      }
      
      .headshot {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      }

      html {
        overflow-y: scroll;
      }
/*end headshot contain stuff */

      
      .divider {
        border-top: 1px solid #e1e4e8;
        margin: 30px 0;
      }
      
      .abstract-link {
        cursor: pointer;
        color: #5c85c4;
        display: inline-block;
        font-size: 16px;
        padding: 2px 4px;
        border-radius: 3px;
        transition: background-color 0.2s;
      }
      
      .abstract-link:hover {
        background-color: #f0f4f8;
        text-decoration: none;
      }
      
      .abstract-content {
        margin-left: 20px;
        padding: 10px;
        background-color: #f6f8fa;
        border-left: 3px solid #dbe2ef;
        margin-top: 5px;
        font-size: 16px;
        display: none;
        transition: all 0.3s ease;
      }
      
      .paper-title {
        color: #5c85c4;
        font-weight: 500;
      }
      
      .co-authors {
        font-size: 16px;
        margin-top: 2px;
        margin-bottom: 2px;
      }
      
      .co-author-link {
        color: #5c85c4;
        text-decoration: none;
        transition: color 0.2s;
      }
      
      .co-author-link:hover {
        text-decoration: underline;
        color: #3a5d9c;
      }
      
      .journal {
        font-weight: bold;
        font-style: italic;
      }
      
      .bio-divider {
        height: 1px;
        background-color: #e1e4e8;
        margin: 25px 0;
        width: 100%;
      }
      
      /* Mobile menu button for sidebar toggle */
      .mobile-menu-btn {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        background-color: #5c85c4;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 12px;
        font-size: 16px;
        cursor: pointer;
      }
      
      /* Improved mobile styles */
      @media (max-width: 991px) {
        .container {
          flex-direction: column;
        }
        
        .sidebar {
          position: relative;
          width: 100%;
          height: auto;
          padding: 20px;
          border-right: none;
          border-bottom: 1px solid #eaecef;
        }
        
        .content {
          margin-left: 0;
          width: 100%;
          max-width: 100%;
          padding: 20px;
          box-sizing: border-box;
        }
        
        .sidebar img {
          max-width: 200px;
          margin: 20px auto;
        }
      }
      
      /* Extra small devices (phones) */
      @media (max-width: 576px) {
        body {
          font-size: 14px;
        }
        
        .sidebar {
          padding: 15px;
        }
        
        .sidebar h1 {
          font-size: 24px;
        }
        
        .sidebar a {
          font-size: 18px;
        }
        
        .content {
          padding: 15px;
          font-size: 15px;
        }
        
        h2 {
          font-size: 20px;
        }
        
        h4 {
          font-size: 16px;
        }
        
        .abstract-content {
          margin-left: 10px;
          padding: 8px;
          font-size: 14px;
        }
        
        ul {
          padding-left: 15px;
        }
        
        li {
          margin-bottom: 15px;
        }
        
        .co-authors {
          font-size: 14px;
          /* Handle long author lists on small screens */
          word-wrap: break-word;
          hyphens: auto;
        }
        
        /* Improve tap targets for mobile */
        .abstract-link {
          padding: 4px 8px;
          margin: 5px 0;
          display: inline-block;
        }
      }
      
      /* For extremely small screens */
      @media (max-width: 360px) {
        .sidebar h1 {
          font-size: 22px;
        }
        
        .sidebar a {
          font-size: 16px;
        }
        
        .content {
          padding: 10px;
        }
        
        .sidebar img {
          max-width: 150px;
        }
      }