/*wikitable by @limegreen on neocities. a link is appreciated!*/


/*to change the fonts here, go to google fonts, find ones you'd like, and use the @import snippet*/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700');

/*example styles*/


/*global colors. change here to see the effect*/

:root {
  --bg: #0F0909;
  --mainbg: #140c0b;
  --borders: #706c38;
  --underline: #cb7069;
  --dotborders: #d1a6a3;
  --quote:#d1a6a3;
  --bold: #d1a6a3;
  --link: #d1a6a3;
  --linkhover: #cb7069;
  --infotext: #9eaf60;
  --infotitles: #f3e8e7;
  --centerboxes: #706c38;
  --text: #f3e8e7;
  
}
b, strong {
   color: var(--bold);
   }

body {
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  font-family:Atkinson Hyperlegible;
  font-size: 15.5px;
  margin: 0;
}
/*container*/
#themeDiv {
  border-radius: 5px;
  background-color: var(--bg);
  padding-bottom: 1%;
}
.wrapper{ 
 min-height: 100vh;
 margin: auto;
 /*width of the content*/
 width: 85%;
 margin: auto;
 border:2px solid var(--borders);
  border-radius: 5px;
 margin-top: 15px;
 margin-bottom: 15px;
}
/*main content*/
main{
 padding: 15px;
 background: var(--mainbg);
 min-height: 100vh;
   clear: left;
}
/*links*/
a{
 color: var(--link);
}
/*link hover*/
 a:hover{
 text-shadow: 0 0 1px ;
 color: var(--linkhover);
 text-decoration: underline;
}
/*breadcrumbs*/
.breadcrumb{
color: var(--text);  
}
header{
  border-radius: 5px 5px 0px 0px;
  height: 100px;
  border-bottom: var(--bg);
  background: url("");
}
/*prevent image overflow*/
main img{
  max-width: 100%;
}

/*headers*/
h1,h2,h3{
overflow: hidden;
border-bottom: 2px solid var(--dotborders); 
}
h2{
font-size: 19pt; 
}
h3{
font-size: 16pt; 
}
h4{
  overflow: hidden;
  border-bottom: 2px dashed var(--underline);
  font-size: 15pt;
}
h5{
  font-size: 15pt;
}

/*table of contents*/
.showcontent{
  border-radius: 12px;
  padding: 3px;
  font-weight: bold;
}
.contents{
  line-height: 1.5;
   border-radius: 12px;
 background-color:var(--bg);
  width: 15%;
 padding: 7px;
 border: 2px solid var(--borders);
}
/*this changes the dropdown to a hamburger menu for desktop screens*/
.toc summary {
    list-style-type: '☰';
}
.toc ul{
 list-style: none;
  margin-left: -30px;
}

/*quotes*/
.quotebox{
  border-radius: 12px;
  width: 30%;
  background-size: cover;
  font-style: italic; 
  padding: 10px;
 margin-left: 10px;
  border-left: solid;
  background-color:var(--bg);
  color: var(--quote);
}

/*series of*/
.revealsummary{
  width:62%;
  margin: auto;
     border-radius: 12px;
  text-align: center;
 background-color: var(--bg);
  padding: 5px;
 font-weight: bold;
  border: 2px solid var(--bold);
}
.reveal{
  float: none;
  margin: center;
   border-radius: 12px;
  text-align: left;
 background-color: var(--bg);
  padding: 2px;
  width: 60%;
  border: 2px solid var(--borders);
  color: var(--text);

}

/*flair*/

/*flair with image- delete above if using. you will need to play with the width and height to make it fit properly*/

 #flair::before { background-image: url('https://64.media.tumblr.com/6468b593e6404e21322fc8f66bc6b7e0/e0553a4b9a1c5c59-3b/s250x400/bf544302d8e7329785a55df925c0f37e7effa53d.pnj');
  background-size: contain;
  display: inline-block;
  height: 10%;
  margin-left: 4px;
  content:" ";
}

/*infotable*/
.infotable {
  line-height: 1.5;
  border-radius: 6px;
  float:right;
  margin-left:5px;
  background: var(--bg);
  border-left:2px solid var(--borders);
  border:2px solid var(--borders);
  width:26%;
  font-size: 14px;
  padding: 5px;
  color: var(--text);
  
}
.infotable img{
  max-width: 100%;
  margin: auto;
}
.infotable th {
  text-align:left;
 
}
.infotable th{
    padding: 5px;
 color: var(--text);
}
.infotable ul{
  list-style: none;
  padding: 0px;
  margin: 4px;
}
#centertext{
   border-radius: 4px;
  text-align: center;
  height: 120%;
  background:  var(--centerboxes);
}
/*clear float after infobox*/
#clear::after {
  content: "";
  clear: both;
  display: table;
}
/*responsiveness*/

/*narrow*/
@media(max-width: 900px) {
  .infotable{
    width: 30%;
  }
    .wrapper{
    width: 100%;
  }
      .chapters{
    width: 50%;
  }
  .reveal{
    width: 60%;
  }
  }  
/*medium*/
@media(max-width: 1250px) {
  .infotable{
    width: 35%;
  }
   .contents{
    width: 40%;
  }
  }  

/*mobile */
@media(orientation: portrait) {
  .charabox{
    width: 90%;
    margin: auto;
    padding: 15px;
    margin-top: 10px;
  }
  .quotebox{
    width: 90%;
    margin: auto;
    padding: 15px;
    margin-top: 10px;
  }
  body{
    margin-top: 0px;
  }
   .infotable{
    width: 100%;
     margin-bottom: 20px;
  }
 
  .wrapper{
    width: 95%;
  }
    .chapters{
    width: 50%;
  }
  .main{
    padding-top: 20px;
  }
  .contents{
    width: 95%;
  }
   .reveal{
    width: 95%;
  }
  #themeDiv {
    display:block;
    margin:0 auto;
    text-align:center;
    padding-top:0;
  }
}