@import url('https://fonts.googleapis.com/css2?family=Science+Gothic:wght@100..900&display=swap'); /* important font */

   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /* body font */





   :root {
   --site-background: #18194D; /* dark purple */
   --content-background: #222F5E; /* pale purple */
   --muted-background: #3A4A78; /* light purple */
   --content-borders: #E7C882; /* pale gold */
   --body-text: #F7F6F2; /* off-white */
   --important-text: #51AEC8; /* cyan */
   }





   body
   
   {
   
   font-family: "Noto Sans", sans-serif;
   
   background-color: var(--site-background);
   color: var(--body-text);
   
   display: flex; 
   flex-direction: column;
   gap:15px;
   
   font-size:15px;
   
   }


.content {
  background-color:var(--content-background);
  width:100%;
  height:auto;
  outline-style:double;
  outline-color:var(--content-borders);
  outline-width:5px;
  padding: 10px;
  box-sizing: border-box;
  overflow:hidden;
}




   a
   
   {
   
   color: var(--important-text);
   
   }





   h1
   
   {
   
   margin-top:0px;
   
   font-family: "Science Gothic", sans-serif;
   
   color: var(--important-text);
   
   font-size:30px;
   
   }


   h2
   
   {
   
      margin-top:5px;
   
   font-family: "Science Gothic", sans-serif;
   
   color: var(--important-text);
   
   font-size:25px;
   
   }


   h3
   
   {
   
      margin-top:5px;
      
   margin-bottom:5px;
   
   font-family: "Science Gothic", sans-serif;
   
   color: var(--important-text);
   
   font-size:20px;
   
   }





   .header 
   
   {
   
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   
   width:100%;
   height:350px;
   
   background-color:var(--muted-background);
   background-image: url(banner.png);
   
   outline-style:double;
   outline-color:var(--content-borders);
   outline-width:5px;
   
   }






   .tab-content
   
   {
   background-color:var(--content-background);
   padding: 10px;
   outline-style:double;
   outline-color:var(--content-borders);
   outline-width:5px;
   height:600px;
   overflow-x: hidden;
   display: none; 
   flex-direction: column;
   }


   .tab-content.active
   
   {
   
   display: block;
   
   }


   .tab-menu
   
   {
   
   display: flex;
   flex-direction: row;
   gap: 15px;
   
   }


   .tab-btn 
   
   {
   
   background-color: var(--content-background); 
   
   font-weight: bold;
   
   outline-style:double;
   outline-color:var(--content-borders);
   outline-width:5px;
   height:80px;
   border:none;
   
   }

   .tab-btn h2
   
   {
   
   margin-top:20px;
   color:var(--content-borders);
   
   }


   .tab-btn.active 
   
   {
   
   background-color: var(--muted-background); 
   
   }

   .tab-btn.active h2 {
     color:var(--body-text);
   }


.split-content {
  display: flex;
  gap: 15px;
}

.split-content-T2 {
  display: flex;
  flex-direction: column; 
  gap: 15px;            
}

.statbar {
  width:100%; 
  height: 25px;
}

.music-player { 
  background: var(--content-background); 
  height: 100%; 
  width: 100%; 
  font-family: "Noto Sans", sans-serif; 
  display: inline-block; 
  color: var(--body-text); 
}

.music-list { 
  height: 100%; 
  overflow-y: scroll; 
  background: var(--content-background); 
  padding: 2px; 
  font-size: 13px; 
  font-family: "Noto Sans", sans-serif; }

.music-track { 
  padding: 4px; 
  cursor: pointer; 
  transition: background 0.1s; 
}

.music-track:hover { 
  background: var(--muted-background); 
}

.music-track.active { 
  color: var(--important-text); 
  background: var(--muted-background); 
  font-weight: bold; 
}

.music-controls { 
  display: flex; 
  background: var(--muted-background); 
  padding: 6px; 
}

.music-btn { 
  background: var(--muted-background); 
  border: none; 
  color: var(--important-text); 
  cursor: pointer; 
  flex: 1; 
  margin: 0 2px; 
  font-weight: bold; 
  font-size: 11px; 
  padding: 4px 0; 
}