@import url('https://fonts.googleapis.com/css2?family=Science+Gothic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+20&display=swap');





:root {
  --highlights: #EDDF9D; /* yellow */
  --text: #F8F3E6; /* white */
  --borders: #D6B268; /* gold */
  --content-bg: #0F2040; /* lighter blue */
  --site-bg: #07142C; /* darkee blue */
}





.charactericon {
  background-color:var(--content-bg);
  width:100%;
  aspect-ratio: 1/1;
  margin:auto;
  outline-style:double;
  outline-color:var(--highlights);
  outline-width:5px;
}

.sidenav {
  
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 150px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  padding:10px;
  background-color: var(--content-bg); /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  z-index: 1;
  outline-style:double;
  outline-color:var(--borders);
  outline-width:5px;
}

.sidenav p {
  font-family: "Science Gothic", sans-serif;
  font-weight: 400;
  
  text-decoration: none;
  font-size: 15px;
  text-align:left;
  color: var(--text);
  display: block;
}

.sidenav hr {
  color: var(--highlights);
}

.sidenav a {
  font-family: "Science Gothic", sans-serif;
  font-weight: 400;
  padding:5px;
  text-decoration: none;
  font-size: 15px;
  color: var(--highlights);
  display: inline;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: var(--text);;
}





/* Style page content */
.main {
  display: flex; 
  flex-direction: column;
  margin-left: 185px; /* Same as the width of the sidebar */
  gap:15px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 650px) {
  .sidenav {padding: 10px; width: 90px;}
  .sidenav a {font-size: 10px;}
  .main {margin-left: 125px;}
}



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

.navbar {
  font-family: "Science Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}





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

a {
  color:var(--highlights);
}

hr {
  color:var(--highlights);
}





h1 {
  font-family: "Science Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:25px;
  text-align: center;
}

h2 {
  font-family: "Science Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:20px;
  margin-top:5px;
  text-align: center;
}

h3 {
  font-family: "Science Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
  margin-top:5px;
  text-align: center;
}

td:nth-child(1) {
  font-weight:bold;
  text-align:left;
}

td:nth-child(2) {
  text-align:right;
}





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

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

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

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

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





.statbar {
  width:100%; 
  height: 25px;
  text-align:center;
  outline-style:double;
  outline-color:var(--borders);
  outline-width:5px;
}





.music-player { 
  background: var(--content-bg); 
  width: 100%; 
  font-family: sans-serif; 
  display: inline-block; 
  color: var(--text); 
}

.music-list { 
  height: 175px; 
  overflow-y: scroll; 
  border-top: 2px inset var(--borders); 
  border-bottom: 2px inset var(--borders); 
  background: var(--content-bg); 
  padding: 2px; 
  font-size: 11px; 
  font-family: monospace; }

.music-track { 
  padding: 4px; 
  cursor: pointer; 
  border-bottom: 1px dashed var(--borders); 
  transition: background 0.1s; 
}

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

.music-track.active { 
  color: var(--highlights); 
  background: var(--borders); 
  font-weight: bold; 
}

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

.music-btn { 
  background: var(--site-bg); 
  border: 2px outset var(--borders); 
  color: var(--highlights); 
  cursor: pointer; 
  flex: 1; 
  margin: 0 2px; 
  font-weight: bold; 
  font-size: 11px; 
  padding: 4px 0; 
}

.music-btn:active { 
  border: 2px inset var(--borders);
}




































/* blehhhh */