/* start dark mode styling */
@media (prefers-color-scheme: dark) {
  :root {
    --text: white;
		--border: #14140c;
		--accent: #850000;
		--bg: #14140c;
		--gradientBottom: #2b2b24;
		--gradientTop: black;
		a:link {
		  color: white; 
		}
  }
  
  
* {cursor: url(https://cur.cursors-4u.net/nature/nat-4/nat322.ani), url(https://cur.cursors-4u.net/nature/nat-4/nat322.png), auto !important;}


header {
  background: url('images/banner2.jpg');
}


* { 
	box-sizing: border-box;
}

body {
	padding: 7px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);
	background-color: black;
	background-image: url(images/bg.jpg);
}


.container {
  height: 100%;
	max-width: 55rem;
	margin: 1vw auto 12px auto;
	outline: 1px dashed #850000;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	gap: 5px;
	/*background: linear-gradient(var(--gradientTop),var(--gradientBottom));*/
	background: black;
}
/* these control the column widths */
.small { 
  flex: 1 1 9%; 
  }
.large { 
  flex: 1 1 82%; 
  }
.full { 
  flex: 1 1 100%; 
  }
.half { 
  flex: 1 1 49%; 
  }


header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 200px; /* change banner height here*/
	border: 1px dashed #2b2b24;
	position: relative;
}

header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: black;
}


nav {
	border: 1px dashed #2b2b24;
	padding: 5px;
	margin-bottom: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
  text-decoration: underline !important;
	display: block;
	margin: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {

}


section {
	border: 1px dashed #2b2b24;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
}


.interests{
  height: 628px !important;
  overflow: auto;
}

.changelog{
  height: 232px !important;
  overflow: auto;
  margin-bottom: 5px;
}


table {
  width: 100%;
	border: solid 1px white;
}

table tr, th, td, tc {
	border-bottom: solid 1px white;
	border-collapse: collapse;
	padding: 5px;
}

/*table tr:nth-child(even) {
	background-color: #3c3121;
}

table tr:nth-child(odd) {
	background-color: #55462f;
}*/

audio {
  max-width: 100%; 
  filter: sepia(40%) saturate(70%) grayscale(1) contrast(99%) invert(80%);
}


#playlist .current-song a{
  color: green;
}  


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
	background: #850000;
}
h2 { 
	font-size: 1.1rem;
	text-align: center;
	background: #850000;
	box-shadow: inset 0 0 5px black;
}
h3 { 
  font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
	text-align: center;
}

b {
  color: var(--accent);
}

th {
  color: var(--accent);
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}


hr.linebreak {
  border-top: 3px dashed #bbb;
}

textarea {
  background: black;
  color: white;
}


::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #850000;
  box-shadow: inset 0 0 5px black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #6e0000;
  box-shadow: inset 0 0 5px black;
}


#musicplayer{
  font-family: 'MS PGothic', sans-serif; /* default font */
  /*background:black; /* background color of player */
  width:100%; /* width of the player - make it 100% if you want it to fill your container */
  padding:10px;
  text-align:center; 
  display:flex;
  flex-direction:column;
  gap:10px;
}

.songtitle, .track-info, .now-playing{
  padding:5px;
}

.controls{
  display:flex; 
  flex-direction:column; 
  gap:10px;
}

.buttons{
  display:flex;
  justify-content:center;
  font-size:17px !important; /* size of controls */
}

.buttons div{
  width:33.3%;
}

.playpause-track, .prev-track, .next-track{
  color: #850000; /* color of buttons */
  font-size:35px !important; /* size of buttons */
  background-color: var(--gradientBottom);
  box-shadow: inset 0 0 5px black;
}

.volume-icon{
  font-size:22px !important; /* size of volume icon */
}

.seeking, .volume{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
}

.now-playing, .track-info{
  border-radius: 0px;
  background-color: var(--gradientBottom); /* background color of top two boxes */
  box-shadow: inset 0 0 5px black;
}

.now-playing{
  font-weight:bold;
}

input[type=range]{
  -webkit-appearance:none; /* removes default appearance of the tracks */
  width:100%;
}

input[type=range]:focus{
  outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
  width:100%;
  height:4px; /* thickness of seeking track */
  background: white; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
  height:10px; /* height of seeking square */
  width:10px; /* width of seeking square */
  border-radius:0px; /* change to 5px if you want a circle seeker */
  background: #850000; /* color of seeker square */
  -webkit-appearance:none;
  margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
  box-shadow: inset 0 0 5px black;
}

input[type=range]::-moz-range-track{
  width:100%;
  height:4px; /* thickness of seeking track */
  background: white; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
  height:10px; /* height of seeking square */
  width:10px; /* width of seeking square */
  border-radius:0px; /* change to 5px if you want a circle seeker */
  background: #850000; /* color of seeker square */
  border:none; /* removes weird border around seeker square in firefox */
  box-shadow: inset 0 0 5px black;
}