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

/*note: use 2612 (ballot box with x) unicode for undisplayed unicode characters, like in the toc. changing it to an 'expected' value makes it not display correctly. all similar situations should be handled like this for ease of reference.*/

/*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 {
  --backgroundcolor: grey;
  --textcolor: #2b2b2b;
  --header:#969696;
  --main: white;
  --footer: #eaecf0;
  --borders: #454545;

  /*links*/
  --link: blue;
  --linkhover: purple;
  
  /*headings*/
  --breadcrumb: grey;
  --h1: #2b2b2b;
  --h2: #2b2b2b;
  --h3: #2b2b2b;
  --headerunderline: grey;
  
  /*boxes*/
  --quotebackground:grey;
  --quotetext: #2b2b2b;
  --boxbg: #bfbfbf;
  --showcontentborder:grey;
  
  --seriesofbg:#bfbfbf;
  --seriesoftext:#2b2b2b;
  
  /*infotable*/
  --infoboxbg:#eaecf0;
  --centertext:#bdbdbd;
  --boldtext:#2b2b2b;
  --infotext:#2b2b2b;
}



body{
  background-color: var(--backgroundcolor);
  font-family:Atkinson Hyperlegible;
  font-size: 15.5px;
  margin: 0;
  color: var(--textcolor);
}
/*container*/
.wrapper{ 
 min-height: 100vh;
 margin: auto;
 /*width of the content*/
 width: 85%;
 margin: auto;
 border:2px solid var(--borders);
 margin-top: 15px;
 margin-bottom: 15px;
}
/*main content*/
main{
 padding: 15px;
 background: var(--main);
 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(--breadcrumb);  
}
header{
  height: 100px;
  border-bottom:2px solid var(--borders);
  background:var(--header);
}
/*prevent image overflow*/
main img{
  max-width: 100%;
}
/*footer*/
footer{
  background:var(--footer);
  padding: 35px;
  border-top:2px solid var(--borders);
  text-align: center;
}

/*headers*/
h1,h2,h3{
overflow: hidden;
border-bottom: 2px solid var(--headerunderline); 
}
h2{
font-size: 19pt; 
}
h3{
font-size: 16pt; 
}

/*table of contents*/
.showcontent{
  padding: 3px;
  font-weight: bold;
}
.contents{
 background-color:var(--boxbg);
  width: 14%;
 padding: 7px;
 border: 2px solid var(--showcontentborder);
}
/*this changes the dropdown to a hamburger menu for desktop screens*/
.toc summary {
    list-style-type: 2612 ;
}
.toc ul{
 list-style: none;
  margin-left: -30px;
}




/*quotes*/
.quotebox{
  width: 30%;
  background-size: cover;
  font-style: italic; 
  padding: 10px; 
 
 padding: 13px;
  border-left: solid;
  background-color:var(--quotebackground);
  color: var(--quotetext);
}

/*series of*/
.revealsummary{
  text-align: center;
 background-color:var(--seriesofbg);
  padding: 10px;
 font-weight: bold;
  border: 2px solid var(--showcontentborder);
}
.reveal{
  text-align: center;
 background-color:var(--seriesofbg);
  padding: 5px;
  width: 50%;
  border: 2px solid var(--showcontentborder);
  color: var(--seriesoftext);

}

/*flair*/
 #flair::before {
  background-size: cover;
  background-size: 25px 25px;
  display: inline-block;
  width: 30px; 
  height: 20px;
  margin-left: 4px;
  content:"\272A";
}

/*angel flair, this flair should be used for all angelic characters*/
 #angel::before {
  background-size: cover;
  background-size: 25px 25px;
  display: inline-block;
  width: 30px; 
  height: 20px;
  margin-left: 4px;
  content:"\2720";
}

/*divine flair, this flair should be used for all god characters*/
 #divine::before {
  background-size: cover;
  background-size: 25px 25px;
  display: inline-block;
  width: 30px; 
  height: 20px;
  margin-left: 4px;
  content:"\271D";
}

/*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://i.ibb.co/SwkXQjP/itsalime.png');
  background-size: cover;
  background-size: 20px 25px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  margin-left: 4px;
  content:" ";
}*/

/*infotable*/
.infotable {
  float:right;
  margin-left:5px;
  background:var(--infoboxbg);
  border-left:2px solid var(--borders);
  border:2px solid var(--borders);
  width:21%;
  font-size: 14px;
  color: var(--infotext);
  
}
.infotable img{
  max-width: 100%;
  margin: auto;
}
.infotable th {
  text-align:left;
 
}
.infotable th{
    padding: 5px;
  color: black;
}
.infotable ul{
  list-style: none;
  padding: 0px;
  margin: 4px;
}
#centertext{
  text-align: center;
  background: var(--centertext);
}
/*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) {
  .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%;
  }
}