html{
    /*Set some global colors here for quick re-coloring of stuff!*/
    --bg-color:  #5e0052;
    --darker-color: purple;
    --lighter-color:  #eab676;
    --accent-color: black;
  
    --sidebar-width:140px;
    background-color: var(--bg-color);
    background-image: url(); /*add image url for tiled background*/
    width: 100%;
    min-height: 100vh;
    position: relative;
  }
   
  body {
    color: black; /*text color*/
    font-family: impact, sans-serif;
    letter-spacing: 1px;
    font-size: 23px;
    font-weight: 100;
    text-align: left;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 24px;
    overflow-x: hidden;
  }
  
  header {
    width: 100%;
    background-color: var(--darker-color);
  }
  
  header img{
    display: block;
    max-height: 400px;
    margin: auto;
  }
  
  section {
    padding: 30px
  }
  
  hsection {
      display: none;
  }
  
  
  p {padding: 2px 6px 2px;}
  
  a:link{
    color: var(--darker-color);
  }
  
  a:visited{
    color: var(--darker-color);
  }
  
  nav{
    width: var(--sidebar-width);
    position: absolute;
    padding: 10px;
    border-radius: 3px;
    background-color: var(--lighter-color);
  }
  
  .divider{
    height: 5px;
    width: 100%;
    background-color: var(--accent-color);
  }
  
  main{
    background-color: #eab676;
    margin-left: calc( var(--sidebar-width) + 30px);
    margin-right: calc( var(--sidebar-width) /2);
    padding: 25px;
}
  
  main1{
    background-color: #eab676;
    margin-left: calc( var(--sidebar-width) + 30px);
    margin-right: calc( var(--sidebar-width) /2);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  
  box-img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .picture img {
    max-width: 4000px;
    flex-shrink: 0;
    float: left;
    margin: 5px;
  }
  
  .description {
    margin: 10px;
    padding: 5px;
    border-radius: 8px;
    background-color: var(--lighter-color);
    border: 2px solid var(--darker-color);
  }
  
  .gallery img {
    border: 1px solid var(--accent-color); 
    padding: 5px; 
    height: 200px;
  }
  
  
  table {
    table-layout:fixed;
    border: 5px solid;/*table outline*/
    border-spacing:2px;
    margin: auto;
    width: 40%;
    min-width: 300px;
    background-color: var(--lighter-color);
  }
  
  tableicon{
    margin-left:41vw;
  }
  
  th{
    text-align: center;
    border: 1px solid;
    border-spacing:2px;
  }
  
  td{
    text-align: left;
    border: 1px solid;
    border-spacing:2px;
    padding: 2px 6px 2px;
  }
  
  td1{
    text-align: left;
    border: 1px solid;
    border-spacing:2px;
    padding: 2px 6px 2px;
  }
  
  .tdpos {        
    position: relative; 
  }
  
  .tdpos img {
    position: absolute;
    top:0;
    right:0;
  }
  
  footer {
    font-size: 12px;
    width: 100%;
    position: absolute;
    bottom: 10px;
    text-align: center;
    height: 24px;
  }
  
  ol {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
  }
  
  infoboxtable {
    border: 1px solid #505050;
    float: right;
    font-size: 89%;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    width: 300px;
  }