/* main.css */

/* These are the colors and fonts used throughout the webpage.
 * I've listed them here so that a user may easily
 * do a search-and-replace for these to change the site theme.
 *   'Roboto',sans-serif; Font for the title text
 *   'Roboto-Slab',serif; Font for the body text 
 *   #fafafa; Background color of the site
 *   #505050; Foreground (text) color of the site
 *   #52739e; Navy, "Template" in the logo, current page in navigation, special titles in the Program
 *   #b2132e; Reddish, "Conference" in the logo, hover color for links
 *   #813c54; Heading color, titles in the Program
 *   #b8860b; Dark Goldenrod, color for links
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre Baskerville');

*{
    border:0;
    font:inherit;
    font-size:1em;
    margin:0;
    padding:0;
    vertical-align:baseline;
}

body{
    background-color: #ffffff;
    background-size: cover;
    background-attachment: fixed;
    color: #3f4c4d; 
    text-align:left;
    font-family:'Montserrat', sans-serif;
    font-size:1em;
    line-height:1.5em;
    margin: 0px auto;
    width: 100%;
}


a{color: #55a7b0; text-decoration:none;}
a.current{color: #4e6c6e;}
a.current:hover{color: #4e6c6e;}
a:hover{color: #217f89;}
a:active{color: #217f89;}
h1,h2,h3,h4{clear: left; text-align: center; color: #3f4c4d; margin:1em 0em 1em 0em; font-family:'Libre Baskerville'; font-style: italic; font-weight: 900; font-family:'Libre Baskerville';}
h1{font-size:2.67em}
h2{font-size:2.00em}
h3{font-size:1.67em}
h4{font-size:1.33em;}
p{list-style:none; margin:10px auto 10px auto; padding:0px; width:95%; text-align:justify; float: left;}
li a, p a {text-decoration:underline; }
ul{list-style:none; margin:14px auto 14px auto; padding:0px; width:90%; text-align:left;}
ul li{list-style: disc; margin:0px auto 0px auto; padding:0px; text-align:left;}
/*i,em{font-style:italic;}
b,strong{
  font-weight: bold;}*/
sup{
    vertical-align: super;
    font-size: 0.8em;
    line-height: 0;
}
sub{
    vertical-align: sub;
    font-size: 0.8em;
    line-height: 0;
}
table{
    width: 100%;
    margin: 12px auto 24px auto;
    float: center;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}
th,td{
    text-align: left;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #8fc5cb;
  overflow: hidden;
  padding-left: 20%
/*  color: #fafafa;*/
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #3f4c4d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #b6dfe4;
  color: #3f4c4d;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #d1e9ea;
  color: #3f4c4d;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Website Banner */
.topbanner {
  display: fixed;
/*    max-width: 100%; 
    max-height: 100%;*/
  width: 100%; 
  padding: 20px 0 20px 0;
/*  height: 350px;*/

  background: #d1e9ea;
/*  object-fit: cover;  */
/*  object-position: 50% 30%;  */
/*position: relative; /* allows repositioning */
/*  left: 100%; */
/*  position: relative; */
  font-family:'Montserrat'; 
/*  overflow: hidden*/
}
.maintitle{
  font-size: 3.5em; 
  line-height: 120%; 
  color: #3f4c4d;
  background: #d1e9ea;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.1em;
  width: 100%;
/*  height: 100px;*/
}
.title{
  color: #3f4c4d; 
  font-weight: 300} 

.subtitle{
  color: #55a7b0; 
  font-weight: 200; 
  text-transform: uppercase; 
  font-size: 0.4em;
}

.twocolumns{display: flex; 
  width: 900px;
  margin-left: 25%; 
  margin-right: 50%; 
  column-gap: 2rem;
  flex-wrap: wrap; 
  padding-top: 20px
}

.textcolumn{float: left; 
  text-align: justify; 
  width: calc(60% - 1.5rem)
}

.imgcolumn{float: left; 
  text-align: center; 
  width: calc(40% - 0.5rem);
}

.imgcolumn img{
  width: 220px; 
  height: auto;
}



.buttoncv {
  border: none;
  color: #3f4c4d;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 6px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #b6dfe4;
/*  border: 2px solid #04AA6D;*/
}

#buttonreadmore, #buttonpast, #buttonreadmoremeasure, #buttonreadmorepredict, #buttonreadmoreuser, #buttonreadmorecompr {
  border: none;
  color: #55a7b0;
  background-color: #ffffff;
  display: inline-block;
  font-size: 16px;
  margin: 6px 2px;
  text-align: center;
}


#buttonreadmore:hover, #buttonpast:hover, #buttonreadmoremeasure:hover,  #buttonreadmorepredict:hover, #buttonreadmoreuser:hover, #buttonreadmorecompr:hover{
  background-color: #ffffff;
  color: #31777f;
}

.mainbox {
  width: 900px;
  margin-left: 20%; 
  margin-right: 20%; 
  column-gap: 2rem;
  flex-wrap: wrap; 
  margin-top: 20px;
  border: 5px solid #d1e9ea;
  overflow: auto;
}

/*.mainbox h2, .mainbox h3, .mainbox h4, .expbox h2, .expbox h3, .expbox h4{
  text-align: center;
  font-family:'Libre Baskerville'; font-style: italic;
}*/

.mainbox p, .researchbox p{
  text-align: justify;
  margin-left: 20px;
  margin-right: 10px;
}

.mainbox strong, .mainbox2 strong{
/*  font-family: 'Montserrat-Bold';*/
  font-weight: 700;
}

.expbox {
    width: 60%;
  margin-left: 20%; 
  margin-right: 20%; 
/*  column-gap: 2rem;*/
  flex-wrap: wrap; 
  margin-top: 20px;
  border: 5px solid #d1e9ea;
  overflow: auto;
}

.expbox p {
  text-align: center;
  margin-top: 25px;
  margin-left: 0;
  margin-right: 2%;
  float: right;
}

.expbox emph{
  font-style: italic;
}

.mainbox2 {
  width: 60%;
  margin-left: 20%; 
  margin-right: 20%; 
  column-gap: 2rem;
  flex-wrap: wrap; 
  margin-top: 20px;
  border: 5px solid #d1e9ea;
  overflow: auto;
}


.mainbox2 p{
  text-align: justify;
  width: 60%;
  margin-left: 20%;
/*  padding-bottom: 20px*/
 /* margin-left: 10%;
  margin-right: 0%;*/
/*  text-overflow: auto; */
}

.mainbox2 emph{
  font-style: italic;
}

.pubbox {
  width: 60%;
  margin-left: 20%; 
  margin-right: 20%; 
/*  column-gap: 2rem;*/
  flex-wrap: wrap; 
  margin-top: 20px;
/*  border: 5px solid #d1e9ea;*/
  overflow: auto;
  font-weight: 300;
  font-size: 0.95em;
}

.pubbox h2, .pubbox h3, .pubbox h4{
  text-align: left;
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: normal;
}

.pubbox p{
  text-align: justify;
/*  margin-left: 20px;*/
/*  margin-right: 10px;*/
}

.pubbox strong{
  font-weight: 600;
}

.researchbox {
  width: 60%;
  margin-left: 20%; 
  margin-right: 20%; 
  column-gap: 2rem;
  flex-wrap: wrap; 
  margin-top: 20px;
  border: 5px solid #d1e9ea;
  overflow: auto;
}

.researchbox h2, .researchbox h3, .researchbox h4{
  text-align: left;
  font-weight: 700;
  margin-left: 20px;
}

.people_pic{
  width: 200px; 
  vertical-align: middle;
  margin: 0px 6px 0px 6px;
}


footer{
  background-color: #57acb5;
  font-size: 1em; 
  margin-top:12em; 
  text-align:center;
overflow: auto}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav {padding-left: 0}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


@media only screen and (max-width: 1100px) {
  .twocolumns{
    display: flex; 
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%; }

  .textcolumn {
    width: 60%;
  }

  .imgcolumn {
    width: 30%;
  }

  .imgcolumn img{
    width: 150px;
  }
  .title1, .title2, .year, .subtitle1{
    font-size:75%;
  }

    .mainbox {
    width: 90%;
    
    margin-left: 2%; 
    margin-right: 2%;
  }
}

@media only screen and (max-width: 600px) {
  .twocolumns{
    display: flex; 
    width: 100%; 
    margin-left: 2%; 
    margin-right: 2%; }

  .textcolumn {
    width: 60%;
  }

 /* .imgcolumn {
    display: none;
  }*/
  .title1, .title2, .year, .subtitle1{
    font-size:75%;
  }


}

#more, #more2, #moremeasure, #morepredict, #moreuser, #morecompr {display: none;}

#myBtn {
  background-color: #57acb5;
/*  color: #ffffff;*/
  font-weight: 900;
  font-size: 2em;

}