styles_responsive.css

/* styles_new.css */
.container {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 20px;
    align-items: center;
    margin: 0 auto;
    max-width: 1080px;
  }


.container_onecolumn {
    align-items: center;
    margin: 0 auto;
    padding: 40px;
    max-width: 1080px;

    border-radius: 20px;
    box-shadow: 0px 0px 20px #9CBBD0;
    /*background-color: #F5FAFF;*/
    text-align: center;
}
  
  .item {
    padding: 20px;
  }

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

  .circular.image {
  display: flex;
  justify-content: center;
  align-self: center;
  max-width: 330px;
  max-height: 330px;
  overflow: hidden;
  border-radius: 50%;
      border: 5px solid #FFF;
  box-shadow: 0 -1px 5px 5px rgba(156, 187, 208, 0.3);
}


  .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: 'Candara', serif;
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 10px;
    align-items: center;
    margin: 0 auto;
    margin-top: 6px;
    max-width: 1080px;
  }

.text2 {
    font-family: 'Candara', serif;
    text-align: left;
  }

.image2 img {
    max-width: 100%;
    width: 100%;
    max-height: auto;
    max-width: 250px;
    margin: 10px 0;
  }

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

.box {text-align: left;}
.box a:first-child { margin-left: 0px; }
.box {
    display: inline-block;
    height: 25px;
    /*width: 70px;*/
    margin-right: 5px;
    margin-bottom:10px;
    border-radius: 15px;
    /*box-shadow: 0px 0px 2px 2px #DDE8FC;*/
    padding: 1px 10px;
    background-color: #DDE8FC;
    /*font-weight: bold;*/
    text-align: center;
}
.box:hover {
      background-color:#FEEAB3;
      transition: 0.5s;
  }
/*.box a:hover {*/
/*    display: inline-block;*/
/*    pointer: cursor;*/
/*    color: #1A2B7E;*/
/*    background-color: #f09228;*/
/*    font-weight: bold;*/
/*}*/

/*.links a[data-type="Long"] {*/
/*    background-color: #DDE8FC;*/
/*    width: 10px;*/
/*}*/
/*.links a[data-type="Short"] {*/
/*    background-color: #0081af;*/
/*}*/
/*.links .link-content {*/
/*    display: none;*/
/*    font-style: italic;*/
/*    margin-top: 10px;*/
/*}*/
/*.links .link-content > pre {*/
/*    font-style: normal;*/
/*    line-height: 1.2em;*/
/*}*/

/*.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 #ECECEC; /* 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;
  }
}