/* 9-23-25: Changed "trivia" to "media," just so the link would fit better. Now, if only I could make media2 'nsfw.' Oh well. */

:root {
    --bgcolor: #9E98B5;
    --accentcolor: #C4B8DE;
    --hoveraccentcolor: rgb(78, 0, 0);
    --lightcolor: #9F9AB5; /* Originally c0c0c0*/
    --darkcolor: #000;
    --subcolor: #7E6EB5; /* Originally 555. Name font, and background for icon on left.*/
    --spoilercolor: #8A7DB8; /* Originally 777. This is stuff like Basic, Trvia, etc.*/

    --mainfont: book antiqua, monospace;
    --headerfont: georgia;

    --symbolbgsize: 40pt;
}
/* Infotable */
/*infotable. Changed Flat-right to float-left. Didn't do anything. */
.infotable {
  float:left;
  margin-left:5px;
  background:var(--infoboxbg);
  border-left:2px solid var(--borders);
  border:2px solid var(--borders);
  width:100%;
  font-size: 14px;
  color: var(--infotext);
  
}
.infotable img{
  max-width: 100%;
    padding: 2px;
  margin: auto;
}
/* Changes the category text of the Infotables.. */
.infotable th {
  text-align:left;
  font-size: 18px;
}
/* Added this entirely */
.infotable td{
    padding: 2px;
  color: black;
  font-size: 17px;
}

.infotable th{
    padding: 2px;
  color: black;
}
.infotable ul{
  list-style: none;
  padding: 0px;
  margin: 2px;
}
#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%;
  }
  }  




/* Another shake text. */
/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: shake-little
  v1.6.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */.shake-little{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-little{2%{transform:translate(1px, 0px) rotate(0.5deg)}4%{transform:translate(1px, 1px) rotate(0.5deg)}6%{transform:translate(0px, 0px) rotate(0.5deg)}8%{transform:translate(0px, 1px) rotate(0.5deg)}10%{transform:translate(1px, 0px) rotate(0.5deg)}12%{transform:translate(0px, 0px) rotate(0.5deg)}14%{transform:translate(0px, 0px) rotate(0.5deg)}16%{transform:translate(0px, 1px) rotate(0.5deg)}18%{transform:translate(0px, 0px) rotate(0.5deg)}20%{transform:translate(0px, 1px) rotate(0.5deg)}22%{transform:translate(0px, 0px) rotate(0.5deg)}24%{transform:translate(0px, 1px) rotate(0.5deg)}26%{transform:translate(0px, 1px) rotate(0.5deg)}28%{transform:translate(1px, 0px) rotate(0.5deg)}30%{transform:translate(0px, 0px) rotate(0.5deg)}32%{transform:translate(0px, 0px) rotate(0.5deg)}34%{transform:translate(1px, 0px) rotate(0.5deg)}36%{transform:translate(0px, 1px) rotate(0.5deg)}38%{transform:translate(1px, 0px) rotate(0.5deg)}40%{transform:translate(0px, 0px) rotate(0.5deg)}42%{transform:translate(0px, 0px) rotate(0.5deg)}44%{transform:translate(1px, 1px) rotate(0.5deg)}46%{transform:translate(0px, 1px) rotate(0.5deg)}48%{transform:translate(0px, 0px) rotate(0.5deg)}50%{transform:translate(0px, 0px) rotate(0.5deg)}52%{transform:translate(0px, 0px) rotate(0.5deg)}54%{transform:translate(1px, 1px) rotate(0.5deg)}56%{transform:translate(1px, 0px) rotate(0.5deg)}58%{transform:translate(1px, 1px) rotate(0.5deg)}60%{transform:translate(1px, 1px) rotate(0.5deg)}62%{transform:translate(0px, 1px) rotate(0.5deg)}64%{transform:translate(1px, 0px) rotate(0.5deg)}66%{transform:translate(0px, 0px) rotate(0.5deg)}68%{transform:translate(0px, 0px) rotate(0.5deg)}70%{transform:translate(0px, 0px) rotate(0.5deg)}72%{transform:translate(1px, 1px) rotate(0.5deg)}74%{transform:translate(0px, 0px) rotate(0.5deg)}76%{transform:translate(0px, 0px) rotate(0.5deg)}78%{transform:translate(1px, 1px) rotate(0.5deg)}80%{transform:translate(0px, 1px) rotate(0.5deg)}82%{transform:translate(0px, 1px) rotate(0.5deg)}84%{transform:translate(0px, 0px) rotate(0.5deg)}86%{transform:translate(1px, 1px) rotate(0.5deg)}88%{transform:translate(1px, 0px) rotate(0.5deg)}90%{transform:translate(1px, 1px) rotate(0.5deg)}92%{transform:translate(1px, 0px) rotate(0.5deg)}94%{transform:translate(1px, 0px) rotate(0.5deg)}96%{transform:translate(1px, 0px) rotate(0.5deg)}98%{transform:translate(1px, 0px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-little.shake-freeze,.shake-little.shake-constant{animation-name:shake-little;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-little.css.map */
/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: shake
  v1.6.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */.shake{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake:hover,.shake-trigger:hover .shake,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake{2%{transform:translate(-1.5px, 1.5px) rotate(0.5deg)}4%{transform:translate(1.5px, -0.5px) rotate(1.5deg)}6%{transform:translate(0.5px, 2.5px) rotate(1.5deg)}8%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}10%{transform:translate(2.5px, 2.5px) rotate(0.5deg)}12%{transform:translate(2.5px, 0.5px) rotate(1.5deg)}14%{transform:translate(0.5px, 1.5px) rotate(1.5deg)}16%{transform:translate(1.5px, 2.5px) rotate(0.5deg)}18%{transform:translate(-1.5px, -1.5px) rotate(0.5deg)}20%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}22%{transform:translate(-0.5px, -0.5px) rotate(-0.5deg)}24%{transform:translate(-1.5px, 2.5px) rotate(0.5deg)}26%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}28%{transform:translate(1.5px, 2.5px) rotate(-0.5deg)}30%{transform:translate(0.5px, -0.5px) rotate(1.5deg)}32%{transform:translate(-0.5px, -1.5px) rotate(0.5deg)}34%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}36%{transform:translate(-0.5px, -1.5px) rotate(1.5deg)}38%{transform:translate(2.5px, 2.5px) rotate(-0.5deg)}40%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}42%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}44%{transform:translate(-0.5px, 0.5px) rotate(-0.5deg)}46%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}48%{transform:translate(2.5px, 1.5px) rotate(1.5deg)}50%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}52%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}54%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}56%{transform:translate(1.5px, 1.5px) rotate(1.5deg)}58%{transform:translate(-1.5px, 2.5px) rotate(1.5deg)}60%{transform:translate(2.5px, 2.5px) rotate(-0.5deg)}62%{transform:translate(0.5px, 1.5px) rotate(0.5deg)}64%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}66%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}68%{transform:translate(-0.5px, -0.5px) rotate(-0.5deg)}70%{transform:translate(2.5px, 2.5px) rotate(1.5deg)}72%{transform:translate(-1.5px, 0.5px) rotate(1.5deg)}74%{transform:translate(0.5px, 0.5px) rotate(1.5deg)}76%{transform:translate(-0.5px, -0.5px) rotate(0.5deg)}78%{transform:translate(2.5px, -1.5px) rotate(1.5deg)}80%{transform:translate(-0.5px, 1.5px) rotate(-0.5deg)}82%{transform:translate(-0.5px, 2.5px) rotate(0.5deg)}84%{transform:translate(0.5px, 1.5px) rotate(-0.5deg)}86%{transform:translate(1.5px, -0.5px) rotate(1.5deg)}88%{transform:translate(-1.5px, -0.5px) rotate(0.5deg)}90%{transform:translate(-1.5px, -1.5px) rotate(0.5deg)}92%{transform:translate(-0.5px, 0.5px) rotate(-0.5deg)}94%{transform:translate(1.5px, 0.5px) rotate(-0.5deg)}96%{transform:translate(-1.5px, 1.5px) rotate(0.5deg)}98%{transform:translate(2.5px, -0.5px) rotate(-0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake:hover,.shake-trigger:hover .shake,.shake.shake-freeze,.shake.shake-constant{animation-name:shake;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-default.css.map */


/* Special Text (https://leonarnott.neocities.org/). Not currently using these. Using the above instead. */
/* Transitions */

@keyframes appear
{
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@-webkit-keyframes appear
{
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@keyframes fade-in-out
{
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

@-webkit-keyframes fade-in-out
{
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}
/* Originally just Y, -0.2 */
@keyframes rumble 
{
	0%, 100% {}
	50% { transform: translateY(-0.5em)}
}

@-webkit-keyframes rumble 
{
	0%, 100% {}
	50% { -webkit-transform: translateY(-0.4em) }
}

@keyframes shudder 
{
	0%, 100% {}
	50% { transform: translateX(0.4em) }
}
@-webkit-keyframes shudder 
{
	0%, 100% {}
	50% { -webkit-transform: translateX(0.2em) }
}
/* Added myself for less. */
@keyframes shuddersmall 
{
	0%, 100% {}
	50% { transform: translateX(0.5em) translateY(-0.1em) }
}
@-webkit-keyframes shuddersmall 
{
	0%, 100% {}
	50% { -webkit-transform: translateX(0.1em) translateY(-0.1em)}
}


/* If I remove this and change it to main will it not start with warn? Probably not. Yeah, no. */
* {
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

body {
    background-color: var(--bgcolor);
    font-family: var(--mainfont);
    margin: 0;
    overflow: hidden;
}

a {
    color: var(--lightcolor);
    transition: 0.2s;
    text-decoration: none;
}

a:hover {
    color: var(--hoveraccentcolor);
}

.scrollbox p, details p {
    text-indent: 20px;
}

.quotebox p {
    text-indent: 0;
}

summary {
    cursor: pointer;
}

ul {
    padding-left: 25px;
    list-style-type: square;
}

h1, h2, h3, h4 {
    font-family: var(--headerfont);
}

h1 {
    clear: both;
    margin: 10px 0;
    font-variant: small-caps;
    background-color: var(--subcolor);
    padding: 10px;
    border-radius: 10px;
}


h3 {
    margin: 0;
    font-variant: small-caps;
    letter-spacing: 1px;
}

h4 {
    margin: 15px 5px;
    padding: 3px 0;
    font-size: 12px;
    color: var(--lightcolor);
    font-weight: normal;
    font-variant: small-caps;
    text-align: center;
    border-bottom: 2px solid var(--accentcolor);
}

hr {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--subcolor);
    margin: 0;
}

#container {
    display: flex;
    height: 100vh;
}

.alignvertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

mark
{
	color:rgba(0,0,0,0.6);
	background-color: #ff9;
}

ins
{
	color:rgba(0,0,0,0.6);
	background-color: hsla(45,100%,90%,0.5); /* Yellowed correction fluid */
	border-radius:0.5em;
	box-shadow: 0em 0em 0.2em hsl(45,100%,80%);
	text-decoration:none;
}

del
{
	background-color: #000; /* Censored text */
	text-decoration:none;
}

/* Who am I to tell authors not to use non-standard tags? */

center
{
	text-align:center;
	margin: 0 auto;
	width: 100%;
}

blink
{
	text-decoration: none;
	animation: fade-in-out 1s steps(1,end) infinite alternate;
	-webkit-animation: fade-in-out 1s steps(1,end) infinite alternate;
}

/* Secondary text styles, for general use by Twine authors */

.outline
{
	color: white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.shadow
{
	text-shadow: 0.08em 0.08em 0.08em #000;
}

.condense
{
	letter-spacing: -0.08em;
}

.expand
{
	letter-spacing: 0.1em;
}

.box
{
	border: 1px solid #222;
	border-radius: 0.1em;
}

.blur
{
	color:transparent;
	text-shadow: 0em 0em 0.08em #000;
}

.blurrier
{
	color:transparent;
	text-shadow: 0em 0em 0.2em #000;
}

.blurrier::selection {
	background-color:transparent;
	color:transparent;
}

.blurrier::-moz-selection {
	background-color:transparent;
	color:transparent;
}

.smear
{
	color:transparent;
	text-shadow: 0em 0em 0.02em rgba(0,0,0,0.75), -0.2em 0em 0.5em rgba(0,0,0,0.5), 0.2em 0em 0.5em rgba(0,0,0,0.5);
}

.mirror
{
	display:inline-block;
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}

.upside-down
{
	display:inline-block;
	transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
}

/* Animated effects follow */

.fade-in-out
{
	text-decoration: none;
	animation: fade-in-out 2s ease-in-out infinite alternate;
	-webkit-animation: fade-in-out 2s ease-in-out infinite alternate;
}

.rumble 
{
	-webkit-animation: rumble linear 0.1s 0s infinite;
	animation: rumble linear 0.1s 0s infinite;
      display:inline-block;
}

.shudder 
{
	-webkit-animation: shudder linear 0.1s 0s infinite;
	animation: shudder linear 0.1s 0s infinite;
      display:inline-block;
}

/* Added myself */
.shuddersmall
{
	-webkit-animation: shudder linear 0.1s 0s infinite;
	animation: shudder linear 0.1s 0s infinite;
      display:inline-block;
}

/* Min-width changes size (had it at 175 for a while, then 150 and made icons under dossier div smaller. Sidebar being open initially isn't here. It's on the HTML, surprisingly. Change the -175 to 0, though I think it does stick out just a tad. -10 fixes it, but it goes back after opening/closing.*/

#dossier {
    background-color: var(--darkcolor);
    height: 100vh;
    width: 175px;
    min-width: 175px;
    padding: 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: 0.2s;
    animation-timing-function: ease-in-out;
}
/* Lis here. CHANGES ICONS IN DOSSIER. Originally 150 max-width/height. Margin 10px.*/
#dossier div {
    position: relative;
    background-color: var(--subcolor);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    max-width: 100px;
    width: 100%;
    height: 100px;
    border-radius: 80px;
    transition: 0.4s;
    text-align: center;
    margin: 5px auto;
    overflow: hidden;
}
/* Text for the name on sidebar*/
#dossier h1 {
    background-color: var(--accentcolor);
    margin: 15px 5px;
    padding: 3px;
    font-size: 20px;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
}
/* Text on the sidebar*/
#dossier h2 {
    background-color: var(--spoilercolor);
    color: var(--darkcolor);
    font-family: var(--headerfont);
    font-weight: normal;
    font-variant: small-caps;
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
    background-color: var(--subcolor);
    padding: 5px;
    margin: 0 5px 10px 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

#dossier h2 b {
    color: var(--lightcolor);
    background-color: var(--darkcolor);
}

#dossier h2:hover {
    background-color: var(--spoilercolor);
    color: var(--lightcolor);
}

#dossier details {
    font-family: var(--headerfont);
    font-weight: normal;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 1px;
    background-color: var(--subcolor);
    padding: 5px;
    border-radius: 5px;
    margin: 0 5px 10px 5px;
}

#dossier details h2 {
    text-align: right;
    background-color: var(--spoilercolor);
    color: var(--darkcolor);
    margin: 3px;
}

#dossier details h2:hover {
    background-color: var(--darkcolor);
    color: var(--lightcolor);
}



/* Changed cabinet to dossier */
#dossier div i {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accentcolor);
    font-size: var(--symbolbgsize);
    transition: 0.4s;
}
/* Changed cabinet to dossier */
#dossier span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--headerfont);
    font-variant: small-caps;
    color: var(--lightcolor);
    font-size: 14px;
    text-shadow: 1px 1px 3px var(--darkcolor), -1px -1px 3px var(--darkcolor), 1px -1px 3px var(--darkcolor), -1px 1px 3px var(--darkcolor);
}

/* Changed cabinet to dossier */
#dossier div:hover {
    transform: scale(1.1);
}

/* Changed cabinet to dossier */
#dossier div:hover i {
    color: var(--lightcolor);
}

/* close button, NOT the character buttons. Buttons are the same on dossier and cabinet. */

#buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    margin-right: -25px;
    z-index: 9;
}

#buttons button {
    color: var(--accentcolor);
    background-color: var(--darkcolor);
    width: 100%;
    border: none;
    border-radius: 0 10px 10px 0;
    margin: 5px 0;
    padding: 15px 10px 15px 5px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

#buttons button:hover {
    color: var(--darkcolor);
    background-color: var(--accentcolor);
}

#close i {
    transition: 0.3s;
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
}

/* main display window */

main {
    overflow-y: auto;
    flex-grow: 1;
    -ms-overflow-style: auto !important;
    scrollbar-width: thin !important;
}

main::-webkit-scrollbar {
    display: auto !important;
}

/* THESE ARE THE TAGS (what I use for male, doctor, height, etc.). Was originally center. 0.8em originally. Does'nt seem to change. */
main h2 {
    font-size: 0.8px;
    margin: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* article tabs and their coding. ORIGINALLY CENTER. CHANGE TO START. Max-width originally 800. Changed to Auto. Martgin was 0 auto before.*/

main article {
    margin: 0 start;
    max-width: auto;
    padding: 30px;
    display: none;
}

main p {
    margin: 15px 0;
}

main img {
    max-width: 100%;
}

/* Added Font Size in.This if for Details box. Changed it from Spoilercolor to subcolor*/
main details {
    background-color: var(--subcolor);
    border-radius: 10px;
      font-size: 30px;
    padding: 15px;
    transition: 0.3s;
    margin-bottom: 10px;
}

main summary {
    font-family: var(--headerfont);
    font-weight: bold;
    cursor: pointer;
}

/* Tag Font size*/
.taglist b, .taglist i {
    font-family: var(--mainfont);
    font-size: 15px;
    padding: 3px 10px;
    margin: 5px 2px;
    border-radius: 5px;
}

.taglist i {
    color: var(--darkcolor);
    background-color: var(--spoilercolor);
    font-style: normal;
    font-weight: normal;
}

.taglist b {
    color: var(--accentcolor);
    background-color: var(--darkcolor);
}

/* INFO TEXT. 250x400, 210 Infobox size. Gap 10.Changed to 50 to give more breathing room between Infotable and Basics/Trivia/etc. */
.infobox {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(210px, auto);
    gap: 50px;
    font-size: 18px;
}

.autobox, .evenbox {
    display: grid;
    gap: 10px;
}
/* Added. Surely won't work. IT WORKED? Wow... */
.boxbox {
    display: grid;
    gap: 10px;
     font-size: 18px;
}

.evenbox {
    grid-template-columns: 1fr 1fr;
}

.autobox {
    grid-template-columns: auto auto;
}

.flexbox div {
    flex: 1 1 0;
}
/*Text for 'lIKES" AND "DISLIKES." Size was 1em. This only changes the literal "LIKES" and "DISLIKES" text */
.flexbox h1, .autobox h1, .evenbox h1 {
    margin: 0;
    font-size: 1.3em;
    padding: 5px 10px;
    background-color: transparent;
}
/* Text for "Basics", "History", etc. HEADERS. Originally 16. ORIGINALLY SPOILERCOLOR*/
.infobox h1, .prefbox h1 {
    background-color: var(--spoilercolor);
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
    padding: 5px;
    margin: 0 0 5px 0;
}

details h1 {
    background-color: var(--bgcolor);
    font-size: 6px;
    padding: 5px 10px;
}

/* Main Image. Originally 100%, 250 px height. I'd like to make the image take up less space, but I must change that container (or something) elsewhere. "Cover" stretches the image to fill the full amount. */
/* Background-size originally cover. Changing */
.mainimg {
    width: 100%;
    min-height: 550px; 
    vertical-align: top;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    
}

.sideimg {
    background-position: center center;
    background-size: cover;
    height: 100%;
    min-height: 300px;
    min-width: 10px;
    border-radius: 10px;
}

.scrollbox {
    background-color: var(--spoilercolor);
    font-size: 16px;
    border-radius: 10px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: auto;
    scrollbar-width: thin;
}

.scrollbox::-webkit-scrollbar {
    display: none;
}

.scrollbox p {
    margin: 0 0 15px 0;
}

.scrollbox p:last-child {
    margin: 0;
}

.media {
    background-color: var(--spoilercolor);
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.media p {
    margin: 0 0 10px 0;
}

.media:last-child, .media p:last-child {
    margin: 0;
}
/* Sixe originally 0.8em. Width originally 100%.*/
.quotebox {
    position: relative;
    flex-direction: row;
    display: flex;
    font-size: 1.5em;
    text-align: center;
    margin: 10px 0;
    width: fit-content;
}

.textbox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--darkcolor);
    color: var(--lightcolor);
    letter-spacing: 1px;
    border-radius: 10px;
    padding: 15px;
    margin-left: 20px;
    flex-grow: 1;
    min-height: 67px;
    width: 100%;
}

.textbox::after {
    content: "";
    position: absolute;
    top: 19px;
    left: -25px;
    margin-left: -3px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent var(--darkcolor) transparent transparent;
}

.quotebox p {
    margin: 0 0 10px 0;
}

.quotebox p:last-child {
    margin-bottom: 0;
}
/* The width/height are for the quote icon, not the one on the dossier. Also not for Relationships. Changed height/width to 100. Not sure what min-height/width does.*/
.charicon {
    background-repeat: no-repeat;
    background-color: var(--darkcolor);
    background-position: center center;
    background-size: cover;
    border: 2px solid var(--darkcolor);
    border-radius: 50px;
    min-height: 50px;
    min-width: 50px;
    height: 50px;
    width: 50px;
    margin-top: 10px;
}

h3 img, main summary img {
    vertical-align: middle;
}
/*STUPID WARNING*/
.warning {
    background-color: var(--darkcolor);
    border-radius: 10px;
    color: var(--lightcolor);
    padding: 20px;
    margin: 10px 0;
}

.warning h1 {
    margin: 0 0 10px 0;
    padding: 0;
    background-color: transparent;
    color: var(--lightcolor);
}



/* relationship cards */

.relationship {
    font-family: courier;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 14px;
    line-height: 1.2em;
    margin: 50px auto;
}

.relationship div {
    padding: 0 15px;
}
/* Added font size myself. */
.chardialogue {
    width: 45%;
    display: flex;
       font-size: 18px;
    flex-direction: column;
    justify-content: center;
}

.relationship p {
    background-color: var(--spoilercolor);
    text-indent: 0;
    border-radius: 10px;
    padding: 10px;
    margin: 5px 0;
}
/* This changes the relationship charicons */
.relationship button {
    position: relative;
    background-color: var(--subcolor);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100px;
    width: 100px;
    border: 3px solid var(--darkcolor);
    cursor: pointer;
    padding: 0;
    border-radius: 75px;
    shape-outside: circle();
    transition: 0.3s;
}

.relationship div:first-child button::after {
    content: "";
    position: absolute;
    top: 60%;
    left: 90%;
    transform: rotate(30deg) ;
    margin-left: -3px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent transparent var(--darkcolor);
    z-index: -1;
}

.relationship div:last-child button::after {
    content: "";
    position: absolute;
    top: 60%;
    right: 90%;
    transform: rotate(330deg) ;
    margin-right: -3px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent var(--darkcolor) transparent transparent;
    z-index: -1;
}

.relationship div:first-child button {
    float: left;
    margin: -25px 50px 0 0;
}

.relationship div:last-child button {
    float: right;
    margin: -25px 0 0 50px;
}
/* Relationship font size for NAMES, not their dialogue. Boo. */
.relationship h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    clear: none;
    margin: 5px 0;
    padding: 0;
    font-size: 20px;
    letter-spacing: 1px;
}

.relationship div:first-child h1 {
    text-align: right;
}

.relationship button:hover {
    box-shadow: 0 0 10px var(--lightcolor);
}

.statdiv {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 10%;
    padding: 0 !important;
}

.statdiv b {
    font-family: var(--headerfont);
    display: block;
    text-align: center;
    font-size: 12px;
    font-variant: small-caps;
    margin: 5px 0;
}

.stat {
	background-color: var(--accentcolor);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    max-width: 20px;
    padding: 0 !important;
    margin: 0 auto;
    height: 150px;
    border: 1px solid var(--darkcolor);
    overflow: hidden;
    
}

.stat div {
    min-width: 100%;
    background-color: var(--darkcolor);
    display: inline;
    padding: 0;
}

.stat i {
    margin: 5px;
    font-size: 10px;
    color: var(--darkcolor);
}

/* Added Characters from Cabinet. Not currently using, but might use later, for character ties or something. */

/* character icons */

.characters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.characters button {
    background-color: var(--subcolor);
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 5px;
    transition: 0.3s;
}

.characters button i {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--lightcolor);
    background-color: #000;
    padding: 5px;
    width: 25px;
    height: 25px;
}

.characters button span {
    visibility: hidden;
    width: 100px;
    background-color: var(--darkcolor);
    color: #fff;
    font-family: var(--headerfont);
    font-variant: small-caps;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.characters button span hr {
    margin: 0 0 5px 0;
    border: none;
}

.characters button span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--darkcolor) transparent transparent transparent;
}

.characters button:hover span {
    visibility: visible;
    opacity: 1;
}

.characters button:hover {
    box-shadow: 0 0 10px var(--lightcolor);
}




/* credit button coding */

#cred {
    z-index: 10;
    font-size: 10px;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--lightcolor);
    border: none;
    border-radius: 50px 0 0 0;
    padding: 10px 5px 5px 10px;
    transition: 0.3s;
    cursor: pointer;
}

#cred:hover {
    background-color: var(--darkcolor);
    color: var(--accentcolor);
}

@media all and (max-width: 710px) {
  
    main article {
      padding-bottom: 100px;
    }

    #dossier {
        padding: 10px 10px 100px 10px;
    }

    .relationship {
        flex-direction: column;
    }

    .chardialogue, .statdiv {
    width: 100%;
    }

    .statdiv {
        max-width: unset;
        height: 75px;
        padding: 5px;
    }

    .stat {
        flex-direction: row-reverse;
        height: 20px;
        min-width: 150px;
        max-width: 150px;
    }

    .stat div {
        min-height: 100%;
        min-width: unset;
    }

    .autobox, .infobox {
        grid-template-columns: auto;
    }

    .infobox {
        text-align: center;
    }

    .autobox ul, .infobox ul {
        list-style: none;
        padding: 0;
        margin: 5px 0;
    }

    .flexbox, main section {
        flex-direction: column;
    }

    .flexbox div {
        padding: 5px 0;
    }

    .sideimg {
        min-height: 150px;
    }

    .scrollbox {
        min-width: unset;
        max-height: unset;
        overflow: none;
    }

    main section div {
        padding: 0;
    }

  }