@import url("http://fonts.googleapis.com/css?family=Helvetica:200,300italic,400,400italic,500,500italic,600,600italic");

@import url("http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,600,600italic");

*{
  font-family:'Roboto','Helvetica',sans-serif;
  margin:0px;
  padding:0px;
  color:inherit;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.4em;
  text-decoration:none;
  background-color:inherit;
  -webkit-text-size-adjust:none;
}

/*******************************************************************************
 MAIN ELEMENTS
*******************************************************************************/

html{
  background-color:white;
  padding:30px;
}
body{
  min-width:880px;
  max-width:1100px;
  color:#000000;
  background-color:white;
  margin:0px auto 500px auto;
  padding:0px auto 500px auto;
}
div,p,span,a,i,ul,ol,li{
  font-size:inherit;
  color:inherit;
  text-decoration:inherit;
}
p,div{
  margin-top:3px;
}
a{
  color:#2145c1;
  text-decoration:none;
  transition: color .15s ease;
}
a:visited{
  color:#2145c1;
}
a:hover, a:focus-visible{
  color:#2145c1;
  cursor:pointer;
  text-decoration:none;
}
a.button{
  border: 1px gray solid;
  border-radius:5%;
  background-color: #F1F1F1;
  padding: 2px 10px;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
ul{
  padding: 7px 0px 0px 30px;
  margin:0px;
  list-style: circle;
}
li{
  margin-bottom:10px;
}
li:not(:last-child) {
  margin-bottom:2px;
}
u{
  text-decoration:underline;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  text-align:inherit;
}
b{
  text-decoration:inherit;
  color:inherit;
  font-size:inherit;
  font-weight:bold;
  text-align:inherit;
}

/*******************************************************************************
 STRUCTURE OF THE LAYOUT
 Picture  About
*******************************************************************************/

body{
  display:grid;
  grid-template-columns: 240px auto; /* widened photo column (~+20%) */
  grid-column-gap:40px;
  grid-row-gap:20px;
}
header{
  grid-column: 1/3;
  padding-bottom:15px;
  background-color:white;
}
maincontent{
  grid-column: 2;
  background-color:white;
}
photo{
  grid-column: 1;
  background-color:white;
  text-align:center;
}
.mainpic{
  width:100%;
  margin:0px auto 8px auto;
  border:none;
  border-radius:0;
  text-align:center;
}

.sectionleft {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sectionright {
  grid-column: 2 / 3;
}


/*******************************************************************************
 HEADER
*******************************************************************************/

.title{
  color:#2145c1;
  text-align:left;
  font-size:250%;
  display:block;
  font-weight: 500;
}
.subtitle{
  color:gray;
  text-align:left;
  font-size:140%;
  line-height:1;
  display:block;
}

/*******************************************************************************
 MAIN CONTENT
*******************************************************************************/

.section{
  margin-bottom:5px;
  width:100%;
}
h1{
  margin-bottom:15px;
  color:#2145c1;
  font-size:140%;
  font-weight: 500;
}
h2{ /*paper*/
  /*color:#2145c1;*/
  font-size:120%;
}
.subsection{
  margin-bottom:15px;
  line-height:1.6;
  width:100%;
}

/*******************************************************************************
 OTHER COMMANDS
*******************************************************************************/

.hidden{
  display:none;
  font-size:inherit;
}
paper{
  color:#006400;
  font-size:inherit;
}
journal{
  color:#920000;
  font-size:inherit;
}
color{
  color:#2145c1;
  font-size:inherit;
}
.abstract{
  color:gray;
  margin-top:8px;
  color:#616161;
  text-align:justify;
}
button{
  padding:1px 6px 1px 6px;
  margin-right:6px;
  border:solid 1px gray;
}
button:hover{
  background-color:#F1F1F1;
  color: #006400;
  border:solid 1px #006400;
}

/**
 FORMAT OF LINKS
 Using Font Awesome 5 (local all.min.css loaded in index.htm)
 Split into Free (solid/regular) and Brands families.
*/

/* Solid/regular icons (Font Awesome 5 Free) */
a.pdf::before,
a.slides::before,
a.code::before,
a.paper::before,
a.article::before,
a.more::before,
a.less::before,
a.link::before,
a.address::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* solid */
  font-size:80%;
  color:#d35400;
  margin:0px;
  padding:0px;
  margin-right:6px;
  margin-left:3px;
}

/* Brand icons (Font Awesome 5 Brands) */
a.github::before,
a.twitter::before,
a.google::before,
a.linkedin::before,
a.bluesky::before{
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size:80%;
  color:#d35400;
  margin:0px;
  padding:0px;
  margin-right:6px;
  margin-left:3px;
}

/* Avoid underlining the leading icon on hover */
/* No underline on icons (now redundant because hover has no underline) */
a.pdf:hover::before,
a.slides:hover::before,
a.code:hover::before,
a.paper:hover::before,
a.article:hover::before,
a.github:hover::before,
a.more:hover::before,
a.less:hover::before,
a.link:hover::before,
a.twitter:hover::before,
a.bluesky:hover::before,
a.google:hover::before,
a.linkedin:hover::before,
a.address:hover::before { text-decoration: none; }

/* Updated Font Awesome 5 unicodes */
a.paper::before{    content: "\f15c "; }  /* file-alt */
a.article::before{  content: "\f1ea "; }  /* newspaper */
a.pdf::before{      content: "\f1c1 "; }  /* file-pdf */
a.slides::before{   content: "\f1c4 "; }  /* file-powerpoint */
a.code::before{     content: "\f1c9 "; }  /* file-code */
a.more::before{     content: "\f0fe "; }  /* plus-square */
a.less::before{     content: "\f146 "; }  /* minus-square */
a.link::before{     content: "\f08e "; }  /* external-link */
a.address::before{  content: "\f0e0 "; }  /* envelope */
a.github::before{   content: "\f09b "; }  /* github */
a.twitter::before{  content: "\f099 "; }  /* twitter */
a.google::before{   content: "\f1a0 "; }  /* google */
a.linkedin::before{ content: "\f08c "; }  /* linkedin */
/* Bluesky isn't in FA5; use a neutral cloud icon from Free set for now */
a.bluesky::before{  content: "\f0c2 "; }  /* cloud */

a.plus,a.minus{
  margin-right:3px;
  display: inline-block;
  margin-top:4px;
}
a.plus::after,a.minus::after{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left:4px;
  font-size:70%;
}
a.plus::after{ content:"\f0fe"; }   /* plus-square */
a.minus::after{ content:"\f146"; }  /* minus-square */
a.empty{
  color:lightgrey;
}
a.empty::before{
  color:lightgrey;
}
a.empty:hover{
  cursor:not-allowed;
}