/*Structure*/
body {
  padding: 0;
  margin: 0;
  background: var(--background-color);
  /*bg color*/
  background-image: var(--background-image);
  /*bg image texture*/
  color: var(--base-color);
  /*default text color*/
  font-family: var(--body-font);
  /*default text font*/
}

body.splash {
  padding: 0;
  margin: 0;
  background: var(--background-color);
  /*bg color*/
  background-image: var(--splash-image);
  /*bg image texture*/
  color: var(--base-color);
  /*default text color*/
  font-family: var(--body-font);
  /*default text font*/
}

body.fanfount {
  background-color:black;
  background-image: url("https://64.media.tumblr.com/2e82a6375b85df20426c550a84fa4577/c63bf6245ace1559-5a/s250x400/48fcfbfe1b77b70dcb97ba8a7fa954e999c8db36.gifv");
  position: relative;
  /*bg image texture*/
  color: var(--base-color);
  /*default text color*/
  font-family: var(--body-font);
  /*default text font*/
}

.link {
  font-family: var(--body-font);
  /*default link font*/
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--header-font);
  /*default heading font*/
  font-weight: 400;
  /*slightly bolds the text*/
  font-style: normal;
}

.wrapper {
  background: none;
  width: 100%;
}

.wrapper-2 {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.header,
.footer {
  /*background: url("/img/pond.gif");*/
  background-size: cover;
  border-color: var(--border-color);
  /*default header and footer bg color*/
  margin: 0;
}

.footer {
  border: 0;
}

.sidebar-left,
.sidebar-right {
  width: 16%;
  /*sidebar width*/
  font-size: 1.10em;
  /*sidebar font size*/
}

.main {
  width: 64%;
  /*main content width*/
  margin: 0;
  order: 2;
  /*order placement between sidebars*/
  font-size: 1.25em;
  /*main content font size*/
}

.sidebar-right {
  margin: 0% 1% 0% 1%;
  order: 3;
  /*order placement of right sidebar*/
}

.sidebar-left {
  order: 1;
  /*order placement of left sidebar*/
  margin: 0% 1% 0% 1%;
}

.box {
  border-top: 7px solid var(--border-color);
  /*top ribbon for content box*/
  border-bottom: 7px solid var(--border-color);
  /*bottom ribbon for content box*/
  padding: 0em 0em 0em 0em;
  margin: 0.75em 0em 1.25em 0em;
  /*spacing between boxes*/
  border-radius: 5px 5px 0px 0px;
  /*curved corner of the boxes*/
  background: var(--base-color);
  /*bg color of box content*/
  color: var(--text-color);
  /*default text color for box content*/
}

.splashBox {
  padding: 0em 0em 0em 0em;
  margin: 0.75em 0em 1.25em 0em;
  /*spacing between boxes*/
  color: white;
  /*default text color for box content*/
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.inner {
  padding: 0 10px 0 10px;
  /*padding space of inner content from the box border*/
}

.box h1,
.box h2,
.box h3 {
  /*headers for each individual box section*/
  background: var(--ribbon-color);
  /*box heading bg colors*/
  padding: 0.25em 0.6em 0.15em 0.6em;
  /*box heading padding*/
  margin-top: 0px;
  margin-bottom: 0.25em;
  /*spaces the heading away from content below it*/
}

.inner h1,
.inner h2,
.inner h3 {
  /*subheader for main box section*/
  background: var(--border-color);
  /*inner heading bg colors*/
  color: var(--secondary-text);
  padding: 0.25em 0.6em 0.15em 0.6em;
  margin-top: 0px;
  margin-bottom: 0.25em;
  border-radius: 5px;
  font-size: 1.15em;
}

.box h4,
.box h5,
.box h6 {
  /*footer captions for an individual box section*/
  background: var(--header-color);
  padding: 0.25em 0.6em 0.15em 0.6em;
  margin-top: 0px;
  margin-bottom: 0;
}

.inner h4,
.inner h5,
.inner h6 {
  /*subheader for sidebar box sections*/
  background: var(--header-color);
  padding: 0.25em 0.6em 0.15em 0.6em;
  margin-top: 0px;
  margin-bottom: 0.25em;
  border-radius: 5px;
}

/*New! Mobile compatibility. Just turns everything into a standard vertical layout.*/

@media(orientation: portrait) {

  .main,
  .sidebar-left,
  .sidebar-right {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
}

/*Custom Code*/

/*Additional Text*/
strong {
  color: var(--bold-color);
}

p.preamble {
  text-align: center;
  margin: 2em 5em 2em;
}

.redText {
 color: var(--red-color);
}

.blueText {
 color: var(--blue-color);
}

.greenText {
 color: var(--green-color);
}

/*Sections*/
.sectionCentered {
  text-align: center;
}

/*Grids*/
.basicGrid {
  /*2 column layout*/
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: space-evenly;
  justify-items: center;
  align-content: center;
  place-items: center;
}

.threeGrid {
  /*3 column layout*/
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  justify-content: space-evenly;
  justify-items: center;
  align-content: center;
}

.fourGrid {
  /*4 column layout*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  justify-content: space-evenly;
  justify-items: center;
  align-content: center;
}

.gridCenterContent {
  /*2 column layout*/
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: center;
  justify-items: stretch;
  align-content: center;
  align-items: center;
}

/*Flex*/
.flexBox {
  /*basic horizontal flex box*/
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

/*Header Navigation*/

header {
  /*header nav*/
  width: 100%;
  background: var(--header-color);
  /*header bg color*/
  background-size: 100%;
}

.headimage {
  margin: 0 auto;
}

#navbar {
  height: 50px;
  background: var(--header-color);
  /*header bg color*/
  /*navbar color*/
  width: 100%;
  margin: 0 auto;
  padding-top: 0.5em;
}

#navbar ul {
  /*navigation list*/
  display: flex;
  /*horizontal list direction*/
  padding: 0.30em 0em 0em 0em;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  /*even spacing*/
}

#navbar li a {
  font-family: var(--header-font);
  /*header font*/
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  /*slightly larger font size*/
  color: var(--border-color);
  /*inner text color*/
  text-decoration: none;
  /* this removes the underline */
  text-shadow: -1px 0 var(--text-outline-color), 0 1px var(--text-outline-color), 1px 0 var(--text-outline-color), 0 -1px var(--text-outline-color);
  /*text outline*/
}

#navbar li a:hover {
  /*changes styling for hover interaction*/
  font-family: var(--header-font);
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  color: var(--secondary-text);
  text-decoration: none;
  text-shadow: -1px 0 var(--border-color), 0 1px var(--border-color), 1px 0 var(--border-color), 0 -1px var(--border-color);
}

/*Footer*/

footer {
  background-color: var(--header-color);
  /*footer bg color*/
  color: var(--text-color);
  /*footer text color*/
  /* background color for footer */
  width: 100%;
  padding: 10px;
  margin-top: 0px;
  text-align: center;
  /* this centers the footer text */
}

/*Buttons*/

.button-70 {
  /*basic button, used for back to top shortcut*/
  background-color: var(--button-color);
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: .9em;
  margin: 5px;
  padding: 10px 15px;
  text-align: center;
  color: var(--text-color);
  font-weight: bold;
  font-family: var(--body-font);
}

.button-70:hover {
  background-color: var(--border-color);
  color: var(--secondary-text);
  border-style: solid;
  border-width: 2px;
  border-color: var(--border-color3);
}

.button_link {
  text-decoration: none;
  /*removes link underline*/
  color: var(--text-color);
}

button {
  padding: 0.15em;
  margin-bottom: 0.33em;
}

/*Positioning*/

.bottom_fixed {
  /*back to top button positioning*/
  position: fixed;
  bottom: 0;
  right: 0;
}

/*Tables*/

table {
  /*default table alignment*/
  text-align: center;
  /*align text to center of table cell*/
}

table.basic {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

table.basic td,
th {
  border: 1px solid var(--border-color2);
  text-align: left;
  padding: 0.5em;
}

th {
  background-color: var(--header-color);
}

tr:nth-child(even) {
  background-color: var(--tablerow-color1);
}

tr:nth-child(odd) {
  background-color: var(--header-color2);
}

table.links {
  /*links table*/
  text-align: center;
  vertical-align: middle;
  margin: 1.5em auto;
  border: 3px solid var(--border-color2);
  border-radius: 5px;
  color: var(--text-color);
  background-color: var(--tablerow-color1);
}

/* alternate table row colors*/
tr.row1 {
  padding: 10px;
  background-color: var(--tablerow-color1);
}

tr.row2 {
  padding: 10px;
  background-color: var(--tablerow-color1);
}

td.column1 {
  border: 2px solid var(--border-color);
  padding: 8px 10px 10px 10px;
}

td.column2 {
  padding: 8px 10px 10px 10px;
}

td.cell {
  /*single cell styling*/
  padding: 8px 10px 10px 10px;
  width: 10%;
  background-color: var(--tablerow-color1);
  border: 1px solid var(--border-color);
}

td.dependVar {
  /*accent cell styling*/
  padding: 8px 10px 10px 10px;
  width: 10%;
  background-color: var(--tablerow-color1);
  border: 1px solid var(--border-color);
}

table.lastUpdate {
  text-align: center;
  vertical-align: middle;
  margin: 0 auto;
  border: 3px solid var(--border-color2);
  border-radius: 5px;
  color: var(--text-color);
  background-color: var(--tablerow-color1);
}

/*Links*/
a {
  color: var(--bold-color);
  font-weight: bold;
}

a:hover {
  color: var(--hover-text);
  text-shadow: -1px 0 var(--bold-color), 0 1px var(--bold-color), 1px 0 var(--bold-color), 0 -1px var(--bold-color);
}

.clean {
  text-decoration: none;
}

/*Scrollboxes*/

.scrollbox_large {
  /*past updates scroll bar*/
  width: 64%;
  height: 25em;
  overflow: scroll;
  padding: 1em;
  background-size: 40px 40px;
  background-color: var(--tablerow-color1);
  background-position: center;
  border: 3px solid var(--border-color2);
  border-radius: 5px;
  color: var(--text-color);
  vertical-align: middle;
  margin: 1.5em auto;
}

/*Inner Boxes*/

.innerbox_large {
  /*real world sub box*/
  width: 64%;
  padding: 1em;
  background-color: var(--tablerow-color1);
  background-position: center;
  border: 3px solid var(--border-color2);
  border-radius: 5px;
  color: var(--text-color);
  vertical-align: middle;
  margin: 1.5em auto;
}

.innerbox_fanfount {
  /*real world sub box*/
  width: 64%;
  padding: 1em;
  background-color: var(--border-color);
  background-position: center;
  border: 3px solid var(--border-color2);
  border-radius: 5px;
  color: var(--secondary-text);
  vertical-align: middle;
  margin: 1.5em auto;
}

/*Figures*/
.basicFigure {
  width: 90%;
  padding: 1em;
  margin: 1.5em auto;
}

.sketch {
  /*sketchpage*/
  width: 90%;
  padding: 1em;
  margin: 1.5em auto;
  background-color: var(--tablerow-color1);
  background-position: center;
  border: 3px solid var(--border-color2);
  justify-content: center;
}

figcaption {
  /*default figure caption*/
  vertical-align: middle;
  text-align: center;
}

.scrollCaption{
  height: 15em;
  overflow: scroll;
  padding: 0.5em;
  background-size: 40px 40px;
  background-color: var(--tablerow-color1);
  background-position: center;
  border: 3px solid var(--border-color2);
  border-radius: 5px;
  color: var(--text-color);
  vertical-align: middle;
  margin: 0.5em auto;
}

/*Images*/

.basicImg {
  width: 90%;
  margin: 0 auto;
}

.fiftypercentImg {
  width: 50%;
  margin: 0 auto;
}

.navWindow {
  width: 28em;
  margin: 0 auto;
}

.fanfountButtons {
  width: 8em;
  margin: 0 auto;
}

.charProfiles {
  width: 20em;
  margin: 0 auto;
}

img.sketchpage {
  height: 20em;
  margin: 0 auto;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAsklEQVR4AezX0QqAIAwF0Ord//9QP6CeLkiy5ugStN1AFk5Hnvbisf3kqfehrbVzHOwfVUcUir33fRyYZ8nmE4XQPUJsdd5ahzpWzCeKk459+PTurUd+NeYV9QTQg9D21q/m64qyJSFeVxQC7ChRibIF2PXUoxJlC7DrpetRNlC4nkTDZM4GiTpA4bREw2TOhryiuGW+jQ7glM4nitslO050xkQ+UeOgn01LlE0t0bKiFwAAAP//JXtcRgAAAAZJREFUAwCp7LhVEeSV7gAAAABJRU5ErkJggg==') 14 / 14px / 0 round;
  border-width: 14px;
  border-style: solid;
}

.splashImage {
  transition: transform 0.3s ease-in-out;
  margin-top: 3em;
  height: 40em; 
}

.splashImage:hover {
  transition: transform 0.3s ease-in-out;
  transform: scale(1.1); /* Increases size by 10% */
}

.sigBox {
  width: 95%;
  margin: 0 auto;
}

img.banner2 {
  margin: 0 auto;
  max-width: 95%;
}

img.centerImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/*Borders*/
.note {
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAsklEQVR4AezX0QqAIAwF0Ord//9QP6CeLkiy5ugStN1AFk5Hnvbisf3kqfehrbVzHOwfVUcUir33fRyYZ8nmE4XQPUJsdd5ahzpWzCeKk459+PTurUd+NeYV9QTQg9D21q/m64qyJSFeVxQC7ChRibIF2PXUoxJlC7DrpetRNlC4nkTDZM4GiTpA4bREw2TOhryiuGW+jQ7glM4nitslO050xkQ+UeOgn01LlE0t0bKiFwAAAP//JXtcRgAAAAZJREFUAwCp7LhVEeSV7gAAAABJRU5ErkJggg==') 14 / 14px / 0 round;
  border-width: 14px;
  border-style: solid;
}

/*Progress Bar*/
.fullBar {
  /*progress bar bg*/
  height: 20px;
  width: 10em;
  border: 2px solid var(--border-color2);
  border-radius: 2px;
  background-color: var(--background-color);
}

.progressBar {
  /*progress bar interior*/
  height: 100%;
  background-color: var(--header-color);
  text-align: center;
  font-size: 12pt;
  color: var(--secondary-text);
  text-shadow: -1px 0 var(--text-outline-color2), 0 1px var(--text-outline-color2), 1px 0 var(--text-outline-color2), 0 -1px var(--text-outline-color2);
}

/*Sidebar Navigation*/

/*Lists*/
li {
  /*default list styling*/
  line-height: 1.5em;
  padding: 3em auto;
  margin: 0.25em;
}

/*Sidebar Navigation*/
.navList {
  /*sidebar navigation list*/
  border: 2px solid var(--border-color);
  background-color: var(--header-color2);
  text-align: left;
  border-radius: 10px;
  margin: 0 0 0.5em 0;
  list-style-type: none;
}

.navList li {
  border-radius: 5px;
  background-color: var(--secondary-text);
  padding-left: 0.5em;
}

.navList li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 400;
}

.navList li a:hover {
  text-decoration: none;
  color: var(--hover-text);
  text-shadow: -1px 0 var(--text-border), 0 1px var(--text-border), 1px 0 var(--text-border), 0 -1px var(--text-border);
  font-weight: 500;
}

.navList li::before {
  content: var(--bullet-symbol);
  /*New bullet symbol*/
  color: var(--text-border);
  padding-right: 0.5em;
}

/*Sitemap Lists*/
.sitemapList {
  border: 2px solid var(--border-color);
  background-color: var(--header-color2);
  text-align: left;
  border-radius: 10px;
  margin: 0 0 0.5em 0;
  list-style-type: none;
}

.sitemapList li {
  border-radius: 5px;
  background-color: var(--secondary-text);
  padding-left: 0.5em;
}

.sitemapList li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 400;
}

.sitemapList li a:hover {
  text-decoration: none;
  color: var(--hover-text);
  text-shadow: -1px 0 var(--text-border), 0 1px var(--text-border), 1px 0 var(--text-border), 0 -1px var(--text-border);
  font-weight: 500;
}

/*Dividers and Borders*/
.bottomDivider {
  border-bottom: 2px solid var(--border-color);
}

/*Summaries*/
.basicSummary {
  margin: 0em 0em 1em 0em;
  padding: 0.5em 1em 0.5em 1em;
  background: var(--border-color);
  /*inner heading bg colors*/
  color: var(--secondary-text);
  border-radius: 5px;
  font-size: 1.15em;
  font-family: var(--header-font);
  /*default heading font*/
  font-weight: 400;
  /*slightly bolds the text*/
  font-style: normal;
}