html {
   max-width: 800px;
   margin: auto;
   /*margin-top: 20px; */
   background-color: #d3d3d3;

 }


 body {
margin: auto;
 }

 #header {
   height: 25%;
   width: 90%;

   padding-top: 5%;
   padding-left: 5%;
   padding-right: 5%;

   z-index: 1;
 }

 #headerabout {
   height: 25%;
   width: 90%;
   padding-top: 5%;
   padding-left: 5%;
   padding-right: 5%;
   padding-bottom: 5%;
   z-index: 1;
   border-bottom: 2px solid black;
 }


 #content {
   height: 25%;
   width: 90%;
   padding-top: 5%;
   padding-left: 5%;
   padding-right: 5%;
   z-index: 1
 }

 #title {
   margin-left: 3%;
 }

 #footer {
   height: 50px;
   width: 100%;
   background-color: #ffcccc;
   clear: both;
   position: relative;
 }

 .collapsible {
  background-color:  white;
  color: #000000;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  outline: None;
  text-align: left;
  border: none;
  font-size: 15px;
  font-family: 'Roboto';
  transition: all 0.5s ease;
}
.highlight, .collapsible:hover {
  background-color: #5daa8e;
}
newButton {
  color:red;
}

.collapsecontent {
  padding: 0 18px;
  background-color: white;
  border-style:solid;
  border-top:none;
  border-width: 1px;
  border-color: #000000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;

}
.collapsible:after {
  content: '\2B9F';
  font-size: 13px;
  color:black;
  float: right;
  margin-left: 5px;
}

.highlight:after {
  content: "\2B9D"; 
}

 @media screen and (min-width:901px) {
   .stuff {
     width: 100%;
     border: 4px solid black;
     background-color: white;
     box-shadow: 10px 10px 10px grey;
     margin-left: 10%;
     margin-bottom:20px;
   }

   .sidenav {
     height: 100%;
     /* Full-height: remove this if you want "auto" height */
     width: 15% !important;
     /* Set the width of the sidebar */
     position: fixed;
     /* Fixed Sidebar (stay in place on scroll) */
     z-index: 1;
     /* Stay on top */
     top: 0;
     left: 0;
     background-color: rgb(66, 66, 66);
     overflow-x: hidden;
     /* Disable horizontal scroll */
     padding-top: 20px;
     font-family: 'Roboto';
     box-shadow: 5px 5px 5px 5px grey;
   }

   .sidenav a {
     padding: 6px 8px 6px 16px;
     text-decoration: none;
     font-size: 25px;
     color: #818181;
     display: block;
   }

   .sidenav a:hover {
     color: #f1f1f1;
   }

   .openbtn {
     background: transparent;
     border: none !important;
     font-size: 0;
     visibility: hidden;
     cursor: pointer;
   }

   .sidenav .closebtn {
    background: transparent;
    border: none !important;
    font-size: 0;
    visibility: hidden;
    cursor: pointer;
  }

 }


 @media screen and (max-width:900px) {
   .stuff {
     width: 100%;
     border: 4px solid black;
     background-color: white;
     box-shadow: 10px 10px 10px grey;
   }

   .sidenav {
     height: 100%;
     /* Full-height: remove this if you want "auto" height */
     width: 0%;
     z-index: 1;
     position:fixed;
     top: 0;
     left: 0;
     background-color: rgb(66, 66, 66);
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
     font-family: 'Roboto';

   }

   .sidenav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
     color: #818181;
     display: block;
     transition: 0.3s;
   }

   .sidenav a:hover {
     color: #f1f1f1;
   }

   .sidenav .closebtn {
     position: absolute;
     top: 0;
     right: 25px;
     font-size: 36px;
     margin-left: 50px;
   }

   .openbtn {
     font-size: 20px;
     cursor: pointer;
     background-color: rgb(66, 66, 66);
     color: white;
     padding: 10px 15px;
     border: none;
     /*margin-left: -6.2%;
     /*margin-top: -2.5%;*/
     position:fixed;
     top: 0;
     left: 0;
   }

   .openbtn:hover {
     background-color: #444;
     
   }

   #main {
     transition: margin-left .5s;
     padding: 16px;
   }
 }



 p,
 b,
 li,
 h1 {
   font-family: 'Roboto';
 }

 .head {
   font-size: 20px;

 }

 #name {
   float: right;
   margin-top: 10px;
   margin-right: 4%;
 }


 a {
   color: black;
   text-decoration: none;
 }

 @media only screen and (max-width: 900px) {
   .left {
     display: none;
   }
 }

 .active {
   background-color: #5daa8e;
   color: white;
   font: 'Roboto';
 }


 .highlight {
  background-color: #5daa8e;

  font: 'Roboto';
}


 .roboto-thin {
   font-family: "Roboto", sans-serif;
   font-weight: 100;
   font-style: normal;
 }

 .roboto-light {
   font-family: "Roboto", sans-serif;
   font-weight: 300;
   font-style: normal;
 }

 .roboto-regular {
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
 }

 .roboto-medium {
   font-family: "Roboto", sans-serif;
   font-weight: 500;
   font-style: normal;
 }

 .roboto-bold {
   font-family: "Roboto", sans-serif;
   font-weight: 700;
   font-style: normal;
 }

 .roboto-black {
   font-family: "Roboto", sans-serif;
   font-weight: 900;
   font-style: normal;
 }

 .roboto-thin-italic {
   font-family: "Roboto", sans-serif;
   font-weight: 100;
   font-style: italic;
 }

 .roboto-light-italic {
   font-family: "Roboto", sans-serif;
   font-weight: 300;
   font-style: italic;
 }

 .roboto-regular-italic {
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: italic;
 }

 .roboto-medium-italic {
   font-family: "Roboto", sans-serif;
   font-weight: 500;
   font-style: italic;
 }

 .roboto-bold-italic {
   font-family: "Roboto", sans-serif;
   font-weight: 700;
   font-style: italic;
 }

 .roboto-black-italic {
   font-family: "Roboto", sans-serif;
   font-weight: 900;
   font-style: italic;
 }