* {
    box-sizing: border-box;
  }

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color: rgb(236, 235, 235);
    color:#1e1e1e;
    margin: 10;}
  
.dark-mode {
    background-color: #2f2f2f;
    color: #eee;
    }

 /* nav menu */
 ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  ul.topnav li a:hover:not(.active) {background-color: #111;}
  
  ul.topnav li a.active {background-color: #04AA6D;}
  
  ul.topnav li.right {float: right;}
  
  /* pic bio */
div.col1-of2 {
    float: left;
    width: 30%;
    padding: 16px;  
}
div.col2-of2 {
    float: left;
    width: 70%;
    padding: 16px;
    text-align: center;
}


  @media screen and (max-width: 800px) {
    ul.topnav li.right, 
    ul.topnav li {
        float: none;
    }

    div.col1-of2, 
    div.col2-of2 {
        width: 100%;
      }
      .left, .main, .right {
        width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
      }  
  }


  .pub-list li {
    padding: 10px;
    margin: 10px;
    max-width: 1200px; /* The width is 20%, by default */
  }
  .edu-list div {
    background-color: #81b3dc31;
    padding: 10px;
    margin: 10px;
    max-width: 1200px; /* The width is 20%, by default */
  }

  .bio-list div{
    text-align: center;
    background-color: #9bd9bb30;
    padding: 10px;
    margin: 10px;
    max-width: 1200px; /* The width is 20%, by default */
  }
  
  video {
    width: auto;
    height: 600px;
  }
  
  /*
    @media only screen and (max-width: 620px) {
    /* For mobile phones: * /
    .menu, .main, .right, 
}

 .res-mul-col {    overflow:auto}

  .menu {    float: left;    width: 20%;    text-align: center;  }
  
  .main {   float: left;    width: 60%;    padding: 0 20px;  }
  
  .right .col2-of2{
    background-color: #e5e5e5;
    float: left;
    height: 200px;
    width: 20%;    max-width:100%;
    padding: 15px;
    margin-top: 7px;
    text-align: center;
  }
    .right {
    background-color: #04AA6D;
    padding: 20px;
    float: left;
    width: 20%; 
}
   .main {
    background-color: #f1f1f1;
    padding: 20px;
    float: left;
    width: 60%; 
  }


  */
  #contacts-form textarea {width:237px;height:114px;padding:1px 0 1px 3px;border:1px solid;margin-bottom:10px;}


/* footer */
footer {width:100%; height:200px; margin-top: 20px;text-align:center;padding:20px;line-height:1.429em}
footer .inside {padding:48px 0 0 0}
footer a {color:rgb(103, 103, 103)}