* {
  box-sizing:border-box;
}

@font-face {
  font-family:"Ari-W9500";
  src:url('https://foggybear42.net/fonts/ari-w9500.woff') format('woff');
}

html, body {
  margin:0;
  color:#ffffff;
  background-color:#1a1a1a;
  font-family:"Ari-W9500", sans-serif;
}

#container {
  margin:0 auto;
  float:right;
  max-width:90%;
}

main {
  float:left;
  text-align:justify;
  background-color:#1a1a1a;
  padding:10px 20px 20px 70px;
}

footer {
  width:100%;
  float:right;
  padding:5px 0;
  text-align:center;
  border-top:2px #ffffff solid;
}

h1 {
  width:100%;
  margin:5px 0;
  color:#85574a;
  font-size:40px;
  text-align:left;
  border-bottom:2px #85574a solid;
}

h2 {
  width:100%;
  margin:5px 0;
  color:#85574a;
  font-size:25px;
  text-align:left;
  margin-bottom:15px;
  border-bottom:2px #85574a solid;
}

h3 {
  color:#85574a;
  font-size:20px;
  text-align:left;
  margin-bottom:3px;
}

h4 {
  width:100%;
  margin:0px;
  color:#85574a;
  font-size:18px;
  text-align:left;
  margin-bottom:-12px;
}

a:link, a:visited {
  color:#85574a;
  transition:.2s ease;
  text-decoration:underline;
}

a:hover, a:active {
  color:#6d4137;
  transition:.2s ease;
  text-decoration:dotted underline;
}

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

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

.gallery {
  overflow:hidden;
}

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

#toc {
  float:right;
  max-width:200px;
  text-align:left;
  margin:12px 0px 5px 15px;
  border:2px solid #ffffff;
  background-color:#1a1a1a;
}

ul {
  list-style-type:square;
}

#toc ol {
  padding:1px 12px 1px 20px;
  list-style-type:lower-roman;
}

li {
  padding:2px 0;
}

#1 a, #one a {
  text-decoration:none;
}

.charaProfile {
  float:right;
  width:300px;
  margin-left:auto;
  background-color:#1a1a1a;
  margin:15px 0px 30px 30px;
}

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

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

tbody {
  margin:3px 10px;
}

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

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

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

.outlink:after {
  content:"⤤";
  padding-left:1px;
}

::selection {
  color:#ffffff;
  background-color:#85574a;
}

@media only screen and (max-width:1350px) {
  #container {
    float:none;
    max-width:95%;
  }
  
  main {
    float:left;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:50px 0 0 0;
  }
  
  footer {
    float:left;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
}

@media only screen and (max-width:1100px) {
  #container {
    max-width:95%;
  }
  
  table, .charaProfile {
    float:left;
    width:100%;
    margin:10px 0 0 0;
  }
  
  .charaProfile {
    float:left;
    width:100%;
    margin:0 0 30px 0;
  }
  
  main {
    padding:50px 0 0 0;
  }
  
  .charaImg {
    width:100%;
    margin:0px 0px 10px 00px;
  }
}