@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); 
}
.flex {
    display:flex;
}

/* 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:19%;
    height:50px;
    border: 3px solid rgb(212, 0, 255);
    border-radius: 10px;
    margin: 1px;
    margin-bottom: 0px;
    outline: none;
    cursor: pointer;
    padding: 3px;
    font-family: 'Dyslexic';
    font-size: 24px;
    transition: 0.3s;
    color:white;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    border: 3px solid rgb(0, 225, 255);
    background-color: rgb(0, 8, 122);
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: rgb(57, 0, 122);
  }
  
  /* Style the tab content */
  .tabcontent {
    font-family: 'Dyslexic';
    margin-bottom: 5px;
    margin-top: 10px;
    height: 775px;
    overflow: scroll;
  } 

.green {
    border:3px rgb(0, 255, 0) inset;
    border-radius: 10px;
  }
  .purple {
    border:3px rgb(119, 0, 255) inset;
    border-radius: 10px;
  }
  .pink {
    border:3px magenta inset;
    border-radius: 10px;
  }
  .yellow {
    border:3px yellow inset;
    border-radius: 10px;
  }
  .blue {
    border:3px aqua inset;
    border-radius: 10px;
  }
  a {
    color: aqua;
    text-decoration: none;
  }