<!DOCTYPE html> = html5
<html>
<head>
<style>

img {
max-width:100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 1px 5px;          
    overflow: visible;
    font-size:25px;
    left:200;
    width:auto;
    border-radius:20px;
}

li {
    float: left;
    font-size:35px;   
}

li a, .dropbtn {
    display:block;
      border-radius:20px;
    color: black;
    font-size:30px;   
    text-align: center;
    padding: 1px 5px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: gray;
        font-size:30px;
      border-radius:20px;
      padding: 1px 5px;      
      display:block;        
}

li.dropdown {
    display: inline-block;
        padding: 1px 5px;          

}

.dropdown-content {
    display: none;
    font-size:25px;
    position: absolute;
        padding: 1px 5px;          
    background-color: gray;
    min-width: 160px;
    box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius:20px;
}

.dropdown-content a {
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size:25px;
    padding: 1px 5px;              
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
      padding: 1px 5px;          
  }

.dropdown:hover .dropdown-content {
    display: block;
    font-size:25px;
    display: block;    
    padding: 1px 5px;          
}

.btext {
    font-size: 25px;
    padding-top:0px;     
    color: rgb(0,255,255);
    padding: 2px;    
}

.gtext {
    padding-top:0px;
    font-size: 25px;
    color: rgb(0,255,0);
    padding: 0px;    
}
.ytext {
     font-size: 25px;
    padding-top:0px;
    padding-bottom::0px;     
    color: rgb(255,255,0);
    padding: 0px;    
}

body {
    font-family: "Lato", sans-serif;
    padding-bottom: 100px;
}
.header {
    width:100%;
    overflow:hidden;
    top:1px;
	left:1px;
	margin:auto;
    text-align:center; /*centers horizontally*/
	
   	
}

.footer {
    width:100%;
    overflow:visible;
    left:1px;
	margin:auto;
    text-align:center; /*centers horizontally*/
	display:block;
    height:=10%;
   	
}

table {
    table-layout: fixed;
    }



.sidenav {
    width: 210px;
    position: fixed;
    z-index: 1;
    left: 10px;
    overflow-x: visible;
    font-size:20px;    

    
}
.dropdown-container {
   display: none;
   font-size:20px;
   
 }

.sidenav a, .dropdown-btn {
    padding: 4px 0px 4px 12px;
    background-color:darkgray;    
    text-decoration: none;
    font-size: 20px;
    color: black;
    display: block;
    border:none;
    
    
}

.sidenav a:hover, .dropdown-btn:hover {
    color: black;
    border-radius:20px;
    background-color:gray;
    
}

.main {
   margin-top:0px;
    margin-left: 30px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */


}

 {
  box-sizing: border-box;
}
main, figure { 
  margin: 0; 
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery { 
  width: 100%; overflow: visible; 
}
figure.slider { 
  position: relative; width: 500%;
  top: 0px;
  font-size: 0; animation: 30s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height:auto;}
figure.slider figure figcaption { 
  position: absolute; top: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: auto;
  font-size: 2rem; padding: .6rem; 
}





    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 25px;}

.floated_img {
    float:left ;
    margin-left:2px;
    margin-right:2px;
    margin-top::2px;
margin-bottom:2px;
  }
  
  .h2center {
  text-align:center;
   }
html { min-height: 100%; }
body { height: 100%; }
</style>
</head>
