/* This thing is largely bashed together from SadGrl's layout template (at https://sadgrl.online/projects/layout-builder/) and https://www.w3schools.com/ and some StackOverflow threads */

* {
  box-sizing:border-box;
}

html, body {
  margin:0
}

body {
  margin:0;
  color:#000000;
  background-color:#000000;
  font-family:'IBM Plex Sans', sans-serif;
}

#container {
  margin:0 auto;
  max-width:1070px;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
  color:#000000;
  text-decoration:none;
}

a {
  color:#0066cc;
  font-weight:normal;
  text-decoration:none;
}

a:hover {
  color:#75b3f1;
}

#header {
  width:100%;
  height:150px;
  background-color:#d4d4d4;
  background-size:auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

main {
  text-align:justify;
  background-color:#fff;
  padding:20px 20px 20px 80px;
}

h1, h2 {
  width:100%;
  text-align:left;
  border-bottom:1px black solid;
}

h4 {
  width:100%;
  margin:0px;
  font-size:19px;
  text-align:left;
}

footer {
  width:100%;
  height:40px;
  padding:10px;
  text-align:center;
  background-color:#E7E9EB;
}

.imagehere {
  width:150px;
  height:150px;
  margin-left:auto;
  margin-right:auto;
  background-size:auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

.charactermain-image {
  width:300px;
  height:350px;
  margin-left:auto;
  border:1px black solid;
  background-size:auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

.galleryimage {
  float:left;
  width:170px;
  margin:10px;
  height:170px;
  border:1px black solid;
  background-size:auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

h1, h2, h3 {
  color:#000000;
}

h1 {
  font-size:40px;
}

h2 {
  font-size:25px;
}

h4 {
  font-weight:100;
}

/* Thanks to LetoLeGaosaure on Pillowfort for pointing this out! */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
  color:inherit;
}

.box {
  padding:10px;
  border:1px solid #000000;
  background-color:#E7E9EB;
}

.gallery {
  padding:10px;
  overflow:hidden;
  background-color:none;
}

#toc {
  float:left;
  width:200px;
  text-align:left;
  margin-right:auto;
  margin:0px 40px 10px 0px;
  background-color:#E7E9EB;
  border:1px solid #000000;
}

ol {
  padding-left:8%;
  list-style-type:circle;
}

li {
  padding-bottom:3px;
}

.characterprofile {
  float:right;
  width:300px;
  margin-left:auto;
  margin:0px 0px 30px 30px;
  background-color:#E7E9EB;
}

/* Clear floats after the columns */
.row:after {
  clear:both;
  content:"";
  display:table;
}

table {
  width:300px;
  border-collapse:collapse;
  background-color:#E7E9EB;
  border-top:1px solid black;
  border-bottom:1px solid black;
}

tbody {
  margin:3px 10px;
}

td, th {
  text-align:left;
  padding:3px 10px;
  border-left:1px solid black;
  border-right:1px solid black;
}

td:nth-child(odd) {
  font-weight:600;
  text-align:right;
}

tr:nth-child(odd) {
  background-color:#e0e2e4;
}

@media only screen and (max-width:1350px) {
  main {
    float:left;
    width:100%;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    margin:10px 0px 0px 00px;
  }
}

@media only screen and (max-width:1100px) {
  table, .characterprofile {
    float:left;
    width:100%;
    margin:10px 0px 0px 00px;
  }
  
  .characterprofile {
    float:left;
    width:100%;
    margin:0px 0px 30px 0px;
  }
  
  main {
    padding:20px;
  }
  
  .charactermain-image {
    width:100%;
    margin:0px 0px 10px 00px;
  }
}