/* DELETE THESE IF YOU DONT WANT TO USE THE DYSLEXIC FONT */
@font-face { font-family: Dyslexic; src: url('OpenDyslexic-Regular.otf'); }
@font-face { font-family: Dyslexic; font-weight: bold; src: url('OpenDyslexic-Bold.otf');}
@font-face { font-family: Dyslexic; font-style: italic; src: url('OpenDyslexic-Italic.otf');}
@font-face { font-family: Dyslexic; font-weight: bold; font-style: italic; src: url('OpenDyslexic-BoldItalic.otf');}
/* This changes the scrollbar color for other browsers, as well as the font color for all text on the OC page by default */
html {
    scrollbar-color: #7b4ba6 black;
    color:white;
}
/* Scrollbar width */
::-webkit-scrollbar {
    width: 5px;
}
  
 /* Scrollbar BG Color */
::-webkit-scrollbar-track {
    background: #000000; 
}
   
/* Scrollbar Handle Color */
::-webkit-scrollbar-thumb {
    background: #7b4ba6; 
}
  
/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(195, 0, 255); 
}
/* Dont touch */
.flex {
    display:flex;
    align-items:center;
}
.occontainer {
    position: relative;
}
/* This is for the icon, only change the border color/type */
.iconpic {
    width:286px;
    height: 286px;
    border: LIGHTBLUE 5px ridge;
    border-radius: 20px;
    position: absolute;
    left: 0;
}
/* This is for the sidebar, only change the border color/type */
.sideinfo {
    width:290px;
    margin-top: 8px;
    height: 530px;
    border: 3px ridge LIGHTBLUE;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 300px;
}
/* Don't touch other than changing font */
.infotable {
    margin-top: 5px;
    width: 90%;
    font-family: 'Courier New';
}
.infotable td {
 padding-bottom: 5px;
}
.infotexth {
    text-align: left;
    padding-right: 3px;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
}
.infotexta {
    text-align: right;
    font-size: 16px;
}
/* Only change the border color/type */
.maininfo {
    width:68.3%;
    position: absolute;
    top:2px;
    right:0px;
    height: 836px;
    border: 3px ridge LIGHTBLUE;
    border-radius: 10px;
}
/* Don't Touch */
.tab {
    overflow: hidden;
  }
  
  /* Don't touch other than to change the colors and border type */
  .tab button {
    background-color: #685c82;
    width:14%;
    height:50px;
    border: 3px solid #34225e;
    border-radius: 10px;
    margin: 5px;
    margin-bottom: 0px;
    outline: none;
    cursor: pointer;
    padding: 3px;
    font-family: 'Dyslexic';
    font-size: 16px;
    transition: 0.3s;
    color:white;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #9387ad;
  }
  
  /* Change the color of the active tab */
  .tab button.active {
    background-color: #5d5275;
  }
  
  /* Don't touch */
  .tabcontent {
    text-align: justify;
    font-family: 'Dyslexic';
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    margin-top: 10px;
    height: 771px;
    overflow: hidden;
  } 
  /* These are the border colors used throughout the tab contents, change them to be whatever pallette you'd like */
  .green {
    border:3px lightblue inset;
    border-radius: 10px;
  }
  .purple {
    border:3px lightblue inset;
    border-radius: 10px;
  }
  .pink {
    border:3px lavender inset;
    border-radius: 10px;
  }
  .yellow {
    border:3px lavender inset;
    border-radius: 10px;
  }
  .blue {
    border:3px lavender inset;
    border-radius: 10px;
  }
  /* Don't touch */
  .box {
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: 10px;
  }
  .about {
    height: 315px;
    text-align: justify;
  }
  h2, h3 {
    margin: 0;
    text-align: center;
  }
  /* This is for the reference picture, i wouldn't reccomend touching anything besides the background color, which is what will show when the image has transparency */
  .refpic {
    height: 305px;
    margin-bottom: 5px;
    background-color: rgba(57, 59, 153, 0.63);
    border-radius: 10px;
  }
  /* Don't Touch */
  .designbox {
    height: 370px;
    overflow: scroll;
  }
  .dcell1, .dcell3 {
    text-align: right;
    font-weight: bold;
    font-size: 17px;
  }
  /* Only change the colors here, these are the dividers between the two sides of the design details */
  .dcell2 {
    padding-right: 25px;
    border-right: 2px dotted lavender;
  }
  .dcell3 {
    padding-left: 25px;
    border-left: 2px dotted lavender;
  }
  /* You can change the color/type of the border for the design notes box here */
  .designnotes {
    text-align: left;
    border: dashed #7b4ba6 2px;
    margin:10px;
    overflow: scroll;
    height: 275px;
    font-size: 15px;
  }
  /* Don't touch */
  .pbl, .pbm, .pbr {
    height:50px;
  }
  .pbl {
    border-radius: 20px 0px 0px 20px;
  }
  .pbr {
    border-radius: 0px 20px 20px 0px;
  }
  .persontop {
    height:350px;
    overflow: scroll;
  }
  /* Only touch if you want to change the font */
  .personthird {
    border-radius:10px;
    width:33%;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom:10px;
    padding-top: 5px;
    height: 140px;
    font-family: 'Courier New';
  }
  /* Don't touch */
  .personbottom {
    height:215px;
    overflow: scroll;
  }
  .storytldr {
    height:270px;
    margin-bottom:10px;
  }
  .storylong {
    height:455px;
  }
  /* These are the colors for the stars in the stats section. "color:" will be the basic color of the star, "text-shadow" are the glowing effects for the special ones. */
  .fill {
    color:white;
  }
  .fillspe {
    color:rgb(255, 253, 219);
    text-shadow: 1px 1px 3px #7b4ba6, -1px -1px 3px rgb(255, 174, 0), -1px 1px 3px rgb(255, 174, 0), 1px -1px 3px #7b4ba6 ;
  }
  .empty {
    color:rgb(87, 77, 184);
  }
  .emptyspe {
    color:rgb(13, 10, 49);
    text-shadow: 1px 1px 2px rgb(156, 0, 26), -1px -1px 1px rgb(230, 0, 38), -1px 1px 1px rgb(230, 0, 38), 1px -1px 2px rgb(156, 0, 26) ;
  }
  /* Don't touch */
  .skills {
    font-size: 13px;
  }
  .skillsl {
    text-align: left;
    font-weight: bold;
  }
  .skillsr {
    text-align: right;
  }
  .notebody {
    width:25%;
  }
  .notebody td {
    padding: 0px;
  }
  .noteskills {
    width:70%;
    margin-left: 5px;
    position: relative;
  }
  .noteskills td {
    padding: 0px;
  }
  .notemind {
    width:64.6%;
    margin-right: 5px;
    margin-top: -3px;
    padding-bottom: 10px;
    padding-top: 3px;
  }
  .notemind td {
    padding: 0px;
  }
  .notemind span {
    margin: 0;
    margin-top:6px;
    padding: 0;
  }
  .notebelief {
    width:35.4%;
  }
  .notebelief table{
    padding-bottom: 4px;
    padding-top:4px;
  }
  .notebelief .skillsl {
    padding-right: 4px;
  }
  .notebelief td {
    padding: 0px;
  }
  /* This changes the color of the credit link in the stats section */
  .notelink {
    color:lavender;
    position:absolute;
    font-size: 13px;
    top:0px;
    right:7px;
  }
  .notelink:hover {
    color:rgb(87, 77, 184);
  }
  /* This changes colors for links across the entire OC page */
  a {
    color:#685C82;
    text-decoration: none;
  }
  a:hover {
    color:white;
  }
  /* This is for the paragraph section of the relationships page. Only change the colors and border type */
  .relationpara {
    margin: 0;
    margin-top: 3px;
    margin-bottom: 5px;
    height:125px;
    overflow: scroll;
    padding-right: 12px;
    padding-left: 10px;
    font-size: 14px;
    background-color: rgb(32, 27, 51);
    outline: rgb(47, 54, 114) 3px inset;
    border-radius: 10px;
  }
  /* This changes the colors for the links to other OCs on the relationship page. the first one is for the left-side icons, the second is for the right-side icons. */
  .relationlink1 {
    text-decoration: underline;
    color:#dcc2ff
  }
  .relationlink2 {
    text-decoration: underline;
    color:rgb(87, 77, 184);
  }
  .relationlink1:hover, .relationlink2:hover {
    color:lavender
  }

  /* Trigger warning lists */

  /* This is the blank version of the trigger warning spoilers. You will need a new one for each trigger. you can name them however you want, but i find that using the "twTrigger" format is easy to remember. All you need to do is change 'test' to a shorthand for the trigger, and 'example' to the full trigger's name. Otherwise you shouldn't be touching anything besides that and the colors. Make sure that you copy all three for each trigger. I would also suggest adding a comment like this one to label what each one is for easier sorting. */
  .twTest{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twTest::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: EXAMPLE)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twTest:hover::before {
    opacity: 0;
  }

  /* TW Sexual assault */
  .twSA{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twSA::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Sexual Assault)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twSA:hover::before {
    opacity: 0;
  }
  /* TW Attempted Sexual assault */
  .twASA{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twASA::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Attempted Sexual Assault)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twASA:hover::before {
    opacity: 0;
  }
  /* TW Drug Abuse */
  .twDrugs{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twDrugs::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Drug Usage/Abuse)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twDrugs:hover::before {
    opacity: 0;
  }
  /* TW Religious Abuse */
  .twReligion{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twReligion::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Religious Abuse)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twReligion:hover::before {
    opacity: 0;
  }
  /* TW Homophobia */
  .twHomophobia{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twHomophobia::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Homophobia)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twHomophobia:hover::before {
    opacity: 0;
  }
  /* TW Transphobia */
  .twTransphobia{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twTransphobia::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Transphobia)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twTransphobia:hover::before {
    opacity: 0;
  }
  /* TW Ableism */
  .twAbleism{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twAbleism::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Ableism)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twAbleism:hover::before {
    opacity: 0;
  }
  /* TW Child Abuse */
  .twChildabuse{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twChildabuse::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Child Abuse/Neglect)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twChildabuse:hover::before {
    opacity: 0;
  }
  /* TW Suicide/Self Harm */
  .twSuiSH{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twSuiSH::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Suicide/Self Harm)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twSuiSH:hover::before {
    opacity: 0;
  }
  /* TW Abuse */
  .twAbuse{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twAbuse::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Abuse)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twAbuse:hover::before {
    opacity: 0;
  }
  /* TW Graphic Description of Wounds */
  .twWounds{
    color:white;
    position: relative;
    width:fit-content;
  }
  .twWounds::before {
    background-color: rgb(50, 0, 90);
    color:#ffee00;
    position:absolute;
    content: "(TW: Graphic Description of Wounds)";
    height: 100%;
    width:100%;
    text-align: center;
    opacity: 1;
  }
  .twWounds:hover::before {
    opacity: 0;
  }
  
.goback {
  position: absolute;
  bottom: -60px;
  left: 150px;
  border: white 4px outset;
  border-radius:10px;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-top: 2px;
}

.imgbitch {
    object-fit: contain;
}