@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');}
html {
    scrollbar-color: rgb(255, 0, 149) black;
    color:white;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
}
  
 /* Track */
::-webkit-scrollbar-track {
    background: #000000; 
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 149); 
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(195, 0, 255); 
}
.refpic {
    height:400px;
    border: 5px groove aqua;
    background-color: rgba(255, 128, 223, 0.212);
    border-radius: 20px;
    margin: 0;
}
.flex {
    display:flex;
    align-items:center;
}
.infobox {
    margin-top:-1px;
    height:420px;
}
.sideinfo {
    width:30%;
    margin:0;
    height: 410px;
    border: 3px ridge rgb(255, 238, 0);
    border-radius: 10px;
}
.maininfo {
    width:70%;
    margin-left: 10px !important;
    margin:0;
    height: 410px;
    border: 3px ridge rgb(255, 0, 179);
    border-radius: 10px;
}
.infotable {
    margin-top: 10px;
    width: 90%;
    font-family: 'Courier New';
}
.infotable td {
 padding-bottom: 3px;
}
.infotexth {
    text-align: left;
    padding-right: 3px;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
}
.infotexta {
    text-align: right;
    font-size: 16px;
}
 /* Style the tab */
 .tab {
    overflow: hidden;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: rgb(21, 0, 41);
    width:30%;
    border: 3px solid rgb(212, 0, 255);
    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: rgb(57, 0, 122);
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: rgb(57, 0, 122);
  }
  
  /* Style the tab content */
  .tabcontent {
    text-align: justify;
    font-family: 'Dyslexic';
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    height: 340px;
    overflow: scroll;
  } 
  .relationlink {
    text-decoration: underline;
    color:#ffffff;
  }
  .relationlink:hover {
    color:rgb(219, 74, 255)
  }