/* || GEN STYLES */
html {
      background-color: #ffffff;
    /*  background-image: url("/images/overgrownfinal.png"); */
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      font-family: "Times-New-Roman", serif;
      overflow-x: hidden;
      }    
html, body {
     max-width: 100%;
     max-height: 100%;
     margin: auto;
     box-sizing: border-box;
     }
div {margin: auto;}
img {
      max-width: 100%;
      max-height: 100%;
      border: 0 none;
      }
p, ul, ol, h1, h2, h3, h4, h5, small {
      color: #000000; 
      word-wrap: break-word; 
      hyphens: auto; 
      text-align: left;
      }
h1 {
     margin: 10px 0;
     font-size: 48px;
     color: #000000;
}
h2 {font-size: 24px; margin: 10px 5px;}
h3 {font-size: 18.72px; margin: 10px 0;}
h4 {margin: 10px 0;}
a {color: darkblue;}
a:visited {color: #9A46FB;}
a:hover, a:focus, a:active {text-decoration: underline; color: #C391FD;}
kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid #F5F5F5;
}

/* || SITEWIDE */

/* BIG STRUCTURAL STUFF */
header, main, footer {
     background-color: transparent;
     max-width: 100%;
     width: 100%;
     padding: .5em;
}
footer {position: absolute;}
footer p {
     color: #000000;
     padding: 8px;
     margin: auto;
     text-align: center;
     }
nav {
     display: flex;
     flex-direction: row;
     max-width: 300px;
     min-width: 6em;
     text-align: center;
     background-color: transparent;
     padding: .25em; 
     margin-bottom: 15px;
     }
nav a, nav a:visited {
     display: flex;
     border: 2px dotted #F5F5F5;
     background-color: rgba(5,10,5,0.55);
     padding: .5em 1em;
     margin: .5em;
     color: #F5F5F5;
     text-decoration: none;
     text-align: center;
     transition-duration: 0.2s;
     cursor: pointer;
     }    
nav a:hover {
     background-color: #292d0c;
     background-image: url("/images/bgstar02.gif");
     text-decoration: none;
     color: #9A46FB;
     }   
.flex {display: flex; flex-direction: row;}
.flex div {
      border: 2px dotted;
      padding: 0 10px 0 10px;
      flex: 1 1 0;
      margin: 10px 5px 1px 5px;
}
.abt {
     border: 2px dotted;
     padding: 0 10px 0 10px; /* top, right, bottom, left */
     margin: 0 5px 0 5px;
}
/* TOOLTIP STUFF  */
.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #ccb3b3;
  color: #292d0c;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
  opacity: 0;
  transition: opacity .5s linear .5s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #ccb3b3 transparent transparent;
}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1;}
/* END TOOLTIP STUFF  */