/* 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: rgb(255, 0, 149) black;
    color:white;
}
/* Scrollbar width */
::-webkit-scrollbar {
    width: 5px;
}
  
 /* Scrollbar BG Color */
::-webkit-scrollbar-track {
    background: #000000; 
}
   
/* Scrollbar Handle Cover */
::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 149); 
}
  
/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(195, 0, 255); 
}
/* I don't reccomend messing with the height unless you know what you're doing, but you can change the border type/color and background color for the main reference picture here. The background color won't be visible unless the reference picture has a transparent background */
.refpic {
    height:400px;
    border: 5px groove LIGHTBLUE;
    background-color: rgba(255, 128, 223, 0.212);
    border-radius: 20px;
    margin: 0;
}
/* Don't Touch */
.flex {
    display:flex;
    align-items:center;
}
.ocinfobox {
    height:420px;
}
/* Don't touch except for the border type/color */
.sideinfo {
    width:30%;
    margin:0;
    height: 410px;
    border: 3px ridge LIGHTBLUE;
    border-radius: 10px;
}
/* Don't touch except for the border type/color */
.maininfo {
    width:70%;
    margin-left: 10px !important;
    margin:0;
    height: 410px;
    border: 3px ridge LIGHTBLUE;
    border-radius: 10px;
}
/* Don't touch except for changing the font */
.infotable {
    margin-top: 10px;
    width: 90%;
    font-family: 'Courier New';
}
/* Don't touch */
.infotable td {
 padding-bottom: 3px;
}
/* Don't touch */
.infotexth {
    text-align: left;
    padding-right: 3px;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
}
/* Don't Touch */
.infotexta {
    text-align: right;
    font-size: 16px;
}
 /* Don't Touch */
 .tab {
    overflow: hidden;
  }
  
  /* Don't Touch except to change colors/border type */
  .tab button {
    background-color: #685c82;
    width:30%;
    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;
  }
  
  /* Tab hover color */
  .tab button:hover {
    background-color: #9387ad;
  }
  
  /* Active button color */
  .tab button.active {
    background-color: #5d5275;
  }
  
  /* Don't touch */
  .tabcontent {
    text-align: justify;
    font-family: 'Dyslexic';
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    height: 340px;
    overflow: scroll;
  } 
  /* Relationship link color */
  .relationlink {
    text-decoration: underline;
    color:#ffffff;
  }
  /* Relationship link color on hover */
  .relationlink:hover {
    color:rgb(219, 74, 255)
  }
  
.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;
}