/* || GEN STYLES */

html {
      background-image: url("/images/backstars.gif");
      font-family: "Times-New-Roman", serif;
      overflow-x: hidden;
      }    
html, body {
     max-width: 100%;
     max-height: 100%;
     margin: 0 auto;
     box-sizing: border-box;
     }
img {
      max-width: 100%;
      max-height: 100%;
      border: 0 none;
      vertical-align: middle;
      }
p, ul, ol, h1, h2, h3, h4, h5, small {
      color: #000033; 
      word-wrap: break-word; 
      hyphens: auto; 
      text-align: left;
      }
h1 {margin: 10px;
font-size: 48px;
color: #F5F5F5;
text-align: center;
}
h2 {font-size: 24px; margin: 5px 0;}
h3 {font-size: 18.72px; margin: 10px 0;}
h4 {margin: 10px 0;}
p {font-size: 16px; margin: 10px;}
a {color: darkblue;}
a:visited {color: darkblue;}
a:hover, a:focus {font-style: italic; color: #660033;}
a:active {color: #9A46FB;}

/* || SITEWIDE */

header {
     background-color: transparent;
     margin-top: auto;
     margin-bottom: 1em; 
     margin-right: auto;
     margin-left: auto;
}

section, footer {
      background-color: #b241ce;
      border: 1px solid teal;
      padding: .5em;
      box-shadow: 6px 6px darkcyan;
      margin-top: auto;
      margin-bottom: 1em; 
      margin-right: auto;
      margin-left: auto;
      width:1000px
      }    
      

section h3 {border-bottom: 1px solid;}
header, footer {text-align: center;}
footer p {
     border: 1px solid #f80455;
     padding: 8px;
     margin: auto;
     text-align: center;
     }
footer img {
     display:inline;
     border: 0 none;
     }
     
/* NAV */

nav button {
     border: 0 none;
     box-shadow: 2px 2px black;
     background-color: #ccb3b3;
     color: indigo;
     text-decoration: none;
     text-align: center;
     transition-duration: 0.2s;
     cursor: pointer;
     font: 16px serif;
     min-height: 34.4px;
     min-width: 90px;
}

nav button:hover, nav button:focus, nav button:active {
     background-color: #292d0c;
     background-image: url("/images/bgstar02.gif");
     text-decoration: none;
     color: #9A46FB;
}

nav {
     text-align: center;
     background-color: #b241ce;
     border: 1px solid teal;
     padding: .25em; 
     box-shadow: 5px 5px darkcyan;
     }
nav a, nav a:visited {
     color: indigo;
     text-decoration: none;
     padding: 8px 10px;    /* top, right, bottom, left */
     }    
nav a:hover, nav a:focus, nav a:active {
     color: #9A46FB;
     text-decoration: none;
     padding: 8px 10px; 
     }
.top {
     margin: auto;
     padding: 10px 1px;
     max-width: 620px;
}
.top button {
     display: inline-block;
     margin-left: 2px;
     margin-right: 2px;
}
.side {
     max-width: 126px;
     min-width: 6em;
     margin-bottom: 15px;
     
}
.side button {
      display: flex;
      flex-direction: column;
      margin: .5em;
}

/* END NAV */

/* LINKS STUFF */

#space {
      background-color: transparent;
      border: 0 none;
      box-shadow: none;
}
#space h2, #space h3, #space p {color: #cc0066;}
#space a, #trek a {color: #6666b9;}
#space a:visited, #trek a:visited {color: #9366B4;}
#trek {
      background-color: transparent;
      border: 0 none;
      box-shadow: none;
}
#trek h2, #trek p {color: #f37355;}

.persbuttons {
     float: right;
     max-width: 365px;
     background-color: #b241ce;
     padding: 5px;
}

.persbuttons img {
     margin: 2px 0 1px 0;
}

/* END LINKS STUFF */

/* LINKS AND AM DIALECTS STUFF */

.indexed {
     position: sticky;
     top: 40px;
     border: 1px dashed #F5F5F5;
     padding: 15px;
     color: #F5F5F5;
     line-height: 1.1;
     min-width: 135px;
}

.indexed p, .indexed a, .indexed h3 {
     color: #F5F5F5;
}

.indexed a:hover, .indexed a:focus {
     color: #cc0066;
}

/* END LINKS AM DIALECTS STUFF */

/* BUTTON ANIMATION */


.scale-up img:hover, .scale-up img:focus {animation: scale-up 0.7s forwards;}

@keyframes scale-up { 
  from {
    transform:scale(1)
  } 
  to {
    transform:scale(1.3)
  }
}

/* END BUTTON ANIMATION*/