/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  
  
  /*wikitable by @limegreen on neocities. credit is appreciated!*/

/*example styles*/

/*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');

body{
  background-color: grey;
  font-family:Atkinson Hyperlegible;
  font-size: 15.5px;
  margin: 0;
  color: #2b2b2b;
}
/*container*/
.wrapper{ 
 min-height: 100vh;
 margin: auto;
 /*width of the content*/
 width: 85%;
 margin: auto;
 border:2px solid #454545;
 margin-top: 15px;
 margin-bottom: 15px;
}
/*main content*/
main{
 padding: 15px;
 background: white;
 min-height: 100vh;
   clear: left;
}
/*links*/
a{
 color: blue; 
}
/*link hover*/
 a:hover{
 text-shadow: 0 0 1px ;
 color: #b9bd4b;
 text-decoration: underline;
}
/*breadcrumbs*/
.breadcrumb{
color: grey;  
}
header{
  height: 100px;
  border-bottom:2px solid #454545;
  background:#969696;
}
/*prevent image overflow*/
main img{
  max-width: 100%;
}
/*footer*/
footer{
  background:#eaecf0;
  padding: 35px;
  border-top:2px solid #454545;
  text-align: center;
}

/*headers*/
h1{
border-bottom: 2px solid grey;  
}
h2{
font-size: 19pt; 
border-bottom: 2px solid grey;  
}
h3{
font-size: 16pt; 
border-bottom: 2px solid grey;  
}
/*table of contents*/
.showcontent{
  padding: 3px;
  font-weight: bold;
}
.contents{
 background-color:#bfbfbf;
  width: 14%;
 padding: 7px;
 border: 2px solid grey;
}
/*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{
  width: 30%;
  background-size: cover;
  font-style: italic; 
  padding: 10px; 
  border-left: 3px;
 padding: 13px;
  border-left: solid;
  background-color:grey;
}

/*series of*/
.revealsummary{
  text-align: center;
 background-color:#bfbfbf;
  padding: 10px;
 font-weight: bold;
  border: 2px solid grey;
}
.reveal{
  text-align: center;
 background-color:#bfbfbf;
  padding: 5px;
  width: 50%;
  border: 2px solid grey;

}

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

/*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;
  /*you'll need a background color, a transparent box will show the header dividers*/
  background:#eaecf0;
  border-left:2px solid #454545;
  border:2px solid #454545;
  width:20%;
  font-size: 14px;
  color: #636363;
}
.infotable img{
  max-width: 100%;
}
.infotable th {
  text-align:left;
 
}
.infotable th{
   border-top: 1px solid grey;
   border-right: 1px solid grey;
  color: black;
}
.infotable td{

}
.infotable ul{
  list-style: none;
  margin-left: -15px;
}
#centertext{
  text-align: center;
}
/*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%;
  }
}
}