:root {
  --text:#000000;
  --background:#ffffff;
}

* {
  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;
}

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

h1 a, h2 a, h3 a, h4 a, h5 a {
  color:#000000;
  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:#ffffff;
  padding:20px 20px 20px 80px;
}

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

h4 {
  margin:0;
  width:100%;
  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 solid #000000;
  background-size:auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

.galleryimage {
  float:left;
  width:170px;
  margin:10px;
  height:170px;
  border:1px solid #000000;
  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;
}

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:rgba(0, 0, 0, 0);
}

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

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

li {
  padding-bottom:3px;
}

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

.row:after {
  clear:both;
  content:"";
  display:table;
}


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

tbody {
  margin:3px 10px;
}

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

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 {
    padding:0;
    float:left;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin:10px 0 0 0;
  }
}

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