body {
  font-family:sans-serif;
}
p {
  font-size:18px;
}
h1 {
  margin-bottom:0.5em;
}
.container{
  margin-left:auto;
  margin-right:auto;
  width:1024px;
} 
.topsection {
  display:grid;
  grid-template-columns:25% 54% 21%;
}
.photo_div{
  text-align:center;   
  margin-top:25px;
  padding-top:1em;
}
.profile_div{
  margin-top:25px;
  margin-left:25px;
  padding-left:10px;
  padding-right:25px;
}
.contact_div{
  border-left:thick solid #d8e1ed;
  margin-top:25px;
  margin-left:25px;
  padding-left:25px;
  display:flex;
}
.contact_text{
  align-self:center;
}
.photo_im {
  border-radius:50%;
  width:256px;
  height:256px;
}
.hname {
  color:black;
  font-size:30px;
  margin-top:0px;
  margin-bottom:0px;
}
.hname2 {
  color:gray;
  font-size:20px;
  margin-top:0px;
  margin-bottom:0px;
}
.hname3 {
  color:#adadad;
  font-size:16px;
  margin-top:0px;
}
.hcontact1 {
  color:#052f69;
  font-size:20px;
  margin-top:0px;
  margin-bottom:0px;
}
.pcontact {
  font-size:16px;
}
.icon_im{
  height:18px;
  width:18px;
  padding-left:4px;
  padding-right:5px;
}
.yt_icon_im{
  height:21px;
  width:24px;
  padding-right:3px;
}
.email_icon{
  font-size:18px;
  padding-left:2px;
  padding-right:5px;
}
.saddress{
  font-size:12px;
}
.bottomcontainer{
  background-color:#f5f5f7;
  margin-top:25px;
  padding-top:20px;
}
.bottomsection{
  background-color:#fafafb;
  padding-left:25px;
  padding-right:25px;
  padding-top:1px;
  padding-bottom:10px;
  margin-bottom:15px;
}
.bio_container{
  display:grid;
  grid-template-columns:20% 80%;
  padding-bottom:10px;
}
.bio_date_div{
  text-align:right;
  padding-right:20px;
}
.bio_item_div{
  border-left:solid #d6d6d6;
  margin-bottom:10px;
}
.pbio_name{
  margin-bottom:0;
  padding-left:10px;
}
.pbio_loc{
  margin-top:0;
  padding-left:10px;
}
.sgithub{
  margin-left:40px; 
  font-size:14px;
}
.scitations{
  font-size:14px;
}
.pdf_icon{
  width:22px;
  height:26px;
  padding-right:5px;
}

/*Change layout for tablet screens (1 column, medium font)*/
@media (min-width:640px) and (max-width:1024px){
  .container{
    width:auto;
  } 
  .topsection {
    display:grid;
    grid-template-columns:100%;
  }
  .contact_div{
    border-left:none;
    padding-left:10px;
  }
  p {
    font-size:22px;
  }
  .hname {
    font-size:36px;
  }
  .hname2 {
    font-size:26px;
  }
  .hname3 {
    font-size:22px;
  }
  .hcontact1 {
    font-size:24px;
  }
  .pcontact {
    font-size:22px;
  }
  .bio_container{
    display:grid;
    grid-template-columns:25% 75%;
  } 
  h1{
    font-size:40px;
  }
  h2{
    font-size:30px;
  }
  h3{
    font-size:22px;
  }
  .sgithub{
    margin-left:48px; 
    font-size:18px;
  }
  .scitations{
    font-size:18px;
  }
  .icon_im{
    height:22px;
    width:22px;
  }
  .yt_icon_im{
    height:26px;
    width:30px;
  }
  .email_icon{
    font-size:22px;
  }
  .saddress{
    font-size:14px;
  }  
  .pdf_icon{
    width:26px;
    height:32px;
  }
}
/*Change layout for phone screens (1 column, big font)*/
@media (max-width:640px) {
  .container{
    width:auto;
  } 
  .topsection {
    display:grid;
    grid-template-columns:100%;
  }
  .contact_div{
    border-left:none;
    padding-left:10px;
  }
  p {
    font-size:45px;
  }
  .hname {
    font-size:72px;
  }
  .hname2 {
    font-size:48px;
  }
  .hname3 {
    font-size:45px;
  }
  .hcontact1 {
    font-size:50px;
  }
  .pcontact {
    font-size:45px;
  }
  .bio_container{
    display:grid;
    grid-template-columns:25% 75%;
  }
  h1{
    font-size:80px;
  }
  h2{
    font-size:60px;
  }
  h3{
    font-size:45px;
  }
  .sgithub{
    margin-left:100px; 
    font-size:36px;
  }
  .scitations{
    font-size:36px;
  }
  .icon_im{
    height:54px;
    width:54px;
  }
  .yt_icon_im{
    height:64px;
    width:72px;
  }
  .email_icon{
    font-size:48px;
  }
  .saddress{
    font-size:30px;
  }
  .pdf_icon{
    width:55px;
    height:65px;
  }
}