/* styles_new.css */
html {
  scroll-behavior: smooth;
}

.container {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 10px;
    align-items: start;
    margin: 0 auto;
    max-width: 1240px;
  }


.container_onecolumn {
    align-items: center;
    margin: 0 auto;
    padding: 40px;
    max-width: 1120px;
    
    border: 1px solid #ECECEC; /* Light grey border for subtlety */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    /* border-radius: 1px; */
    background-color: #FFF; /* Ensures background is white */
}
  
  .item {
    padding: 20px;
  }

  .item.image {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-self: center; /* Align the image vertically in the middle */
  }
  
  .text {
    text-align: left;
  }

  .image img {
    /* max-width: 100%;  */
    width: 100%;
    max-height: auto; 
    /* max-width: 320px; */
  }

  
/* for the Research section: image left text right, do not center on smaller screens */
.container2 {
    font-family: 'Lato';
    display: grid;
    /* grid-template-columns: 24% 76%; */
    grid-template-columns: 30% 70%;
    gap: 10px;
    align-items: center;
    margin: 0 auto;
    margin-top: 6px;
    max-width: 1240px;
    scroll-margin-top: 80px;
  }

.text2 {
    font-family: 'Lato';
    text-align: left;
  }

.image2 img {
    max-width: 100%; 
    width: 100%;
    max-height: auto; 
    /* max-width: 220px; */
    margin: 10px 0;
    object-fit: cover;
  }

.item.image2 {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-self: center; /* Align the image vertically in the middle */
}

.bibtex-entry {
  text-align: left;
  white-space: pre-wrap;
  margin-left: 2ch; 
  background-color: #ECECEC; /* Light grey background color */
  padding: 10px; /* Optional: Add padding for better readability */
}


hr {
  border: 0.1px solid #e9e9e9; /* Set the border style, color, and width */
  margin: 0px 0px; /* Add some space above and below the line */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 100%;
    gap: 5px;
    padding-bottom: 36px; 
  }

  .container2 {
      grid-template-columns: 100%;
      margin-top: 20px;
    }

  .item {
    padding: 5px;
  }

  .text {
    text-align: center;
  }
}