body
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #f0eeee;
  color: #121212;
  font-family: "Avenir Next", "Avenir", sans-serif;
}
html, body {width: auto!important; overflow-x: hidden!important} 

nav{background-color: #f9f4f4;}
input{visibility: hidden;}
#menu{
  display: flex;
  justify-content: space-around;
  padding-bottom: 5%;
}
#menu, li,ul{
  color: rgb(15, 15, 16);
   text-decoration: none;
   list-style-type: none;}

.mainpic{width: 30%;height: inherit; border-radius: 50%;padding-left: 2rem;}
img{width: 10%;}
h3{font-size: 1rem;}
.headerpic{
  width:100vw; height:20%;  
}
.headerpic img{width: 100%;height: inherit; padding-bottom: 5rem;}
.left{padding-left: 5%; text-align: justify;}

.twiter{padding-left: 25px; padding-right: 25px;}


.about-me{ 
  
  padding-left: 5%;
   padding-right: 5%;
   text-align: justify;
   padding-bottom: 5rem;}

.publications{height: auto; padding-left: 5%; padding-right: 5%; padding-bottom: 5rem;}
.funding{padding-left: 5%; padding-right: 5%; padding-bottom: 5rem;}
.getInTouch{padding-left: 5%; padding-right: 5%;padding-bottom: 5rem;}


/*----------------------600---------------------------------------*/

@media only screen and (max-width: 600px) {

input{visibility: visible;}
.mainpic{
  width: 150px; 
  border-radius: 50%;
  padding-left: 5%;
  padding-top: 9%;
}

.about-me, h3{font-size: .8rem;}
.about-me, p{font-size: .7rem;line-height: 20px;}
.heading{ text-align: center;}
.left{ text-align: center}
.right{text-align: justify; padding-left: 8%;padding-right: 8%;}
/* .links-out,img{width: 50px;height: 50px;padding: 0%;} */
nav{ background-color:#232323 ; height: 0px;}

/*--------------------------------------------*/


#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}


#menu
{
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 180px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{ 
  padding: 10px 0;
  font-size: 18px;
  color: black; 
}


#menuToggle input:checked ~ ul
{
  transform: none;
}


}