/* DELETE THESE IF YOU DONT WANT TO USE THE DYSLEXIC FONT */
@font-face { font-family: Dyslexic; src: url('https://neorxnawang.neocities.org/OpenDyslexic-Regular.otf'); }
@font-face { font-family: Dyslexic; font-weight: bold; src: url('https://neorxnawang.neocities.org/OpenDyslexic-Bold.otf');}
@font-face { font-family: Dyslexic; font-style: italic; src: url('https://neorxnawang.neocities.org/OpenDyslexic-Italic.otf');}
@font-face { font-family: Dyslexic; font-weight: bold; font-style: italic; src: url('https://neorxnawang.neocities.org/OpenDyslexic-BoldItalic.otf');}
/* This changes the scrollbar color for other browsers */
html {
    scrollbar-color: lavender black;
}
/* Scrollbar width */
::-webkit-scrollbar {
    width: 5px;
}
  
 /* Scrollbar BG Color */
::-webkit-scrollbar-track {
    background: #000000; 
}
   
/* Scrollbar Handle Color */
::-webkit-scrollbar-thumb {
    background: lavender; 
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: lavender; 
}
/* THIS IS THE FONT THAT WILL BE USED FOR THE PAGE.*/
body {
    font-family: 'Dyslexic';
}
/* Don't touch this */
.flex {
    display:flex;
    align-items:center;
}
/* Don't touch anything here unless you want to change the width of the navigation tab buttons */
.tab {
    float: left;
    border-bottom: none;
    width: 32%;
    height: 300px;
  }
  
  /* Don't touch except to change the colors and border type */
  .tab button {
    display: block;
    background-color: #000000;
    color:white;
    font-family: 'Dyslexic';
    font-size: 20px;
    padding:3px;
    margin:5px;
    text-align: center;
    width: 100%;
    border: black 3px ridge;
    border-radius: 10px;
    outline: none;
    transition: 0.3s;
  }
  
  /* Button color on hover */
  .tab button:hover {
    background-color: rgb(82, 0, 175);
  }
  
  /* Button color for active tab */
  .tab button.active {
    background-color: rgb(27, 0, 82);
  }
  
  /* Don't touch except to change text color */
  .tabcontent {
    text-align: center;
    width: 245px;
    height: 343px;
    overflow: scroll;
    margin-top: 5px;
    color:white;
  }
  /* Don't Touch */
.tabcontent a {
    text-decoration: none;
}
/* Don't touch */
.oclist {
    margin: 0;
    line-height: 2.5;
    padding-left:7px;
    padding-right:5px;
    overflow: scroll;
}
/* Only change if you want to change the font size or color of the group text */
.grouptitle {
    font-size:20px;
    font-weight: bold;
    margin: 0;
    margin-bottom: 5px;
}
/* Changing the colors on this will change the colors for the character buttons */
.oclink {
    border:2px solid #967bb6;
    border-radius: 10px;
    padding: 2px;
    padding-top: 1px;
    color:white;
    background-color: black;
}
/* This changes the color of the character buttons when you hover over them */
.oclink:hover {
    background-color: rgb(27, 0, 82);
    border: 2px solid white;
}
/* This is a special class meant for making the sona buttons bigger than the other character buttons. If you don't want your sonas listed separately, you can ignore or remove these */
.sonalink {
    border:3px solid #967bb6;
    border-radius: 10px;
    width:50%;
    margin-left: 60px;
    padding: 2px;
    padding-top: 0px;
    color:rgb(255, 255, 255);
    background-color: black;
}
/* Colors for hovering over Sona buttons */
.sonalink:hover {
    background-color: rgb(27, 0, 82);
    border: 3px solid white;
}