body { 
	background-color: #97B015;
	cursor:url("data:application/octet-stream;base64,AAACAAEAICAQAAgAAwDoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAHBCeAHWBggBQUFcAhISMALOzswAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAyAAAQAAAAAAAAAAAAAAAAIiABAAAAAAAAAAAAAAAAAFIyAAAAAAAAAAAAAAAAAAVUIiAAAAAAAAAAAAAAAABVQzIyAAAAAAAAAAAAAAAFVEMzIiAAAAAAAAAAAAAAVURDNAIwAAAAAAAAAAAABVREQ0AAAAAAAAAAAAAAAFVEREQAAAAAAAAAAAAAAAVFREVVUAAAAAAAAAAAAABURURURQAAAAAAAAAAAAAFREVFRFAAAAAAAAAAAAAAVERFVEUAAAAAAAAAAAAABURERURQAAAAAAAAAAAAAFRERDRFAAAAAAAAAAAAAAVERENEUAAAAAAAAAAAAAAFREQ0RQAAAAAAAAAAAAAABURDRFAAAAAAAAAAAAAAAAVENEUAAAAAAAAAAAAAAAAFQ0RQAAAAAAAAAAAAAAAABTRFAAAAAAAAAAAAAAAAAAVEUAAAAAAAAAAAAAAAAAAFRQAAAAAAAAAAAAAAAAAABVAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////n////5////9///+e////gf///4H///8B///+Af///AD///gA///wA///4Af//8AP//+AH///AD///gB///wA///4Af//8AP///AH///wD///8B////A////wf///8P////H////z////9/////f////////w=="), auto;
	margin: 0px;
}

.box { 
	max-width: 1000px;
	margin: 1px 5px;
	display: grid; 
	grid-gap: 0px;
	font-family: "Arial", sans-serif;
}

header, h1, h2, nav, main, footer, {	/* Take this out when you're done deving. */
	border: black 1px solid;
}

h1 {
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0;
	grid-row: 1 / 2; 
	grid-column: 1 / 3; 
}

h2 {
	background-color: black;
	color: white;
	padding: 5px;
	margin: 0;
	grid-row: 2 / 3;
	grid-column: 1/3; 
}

nav { 
	position: sticky;
	top: 0;
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	height: max-content;
	display: block;
}

.extras {
	grid-row:4/5;
	grid-column: 1/2;
}

.vertical-nav {
	transition: background-color 0.3s;
    width: 175px;
    background-color: #4B4B4B;
}

.nav-links ul {
	text-decoration: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	 justify-content: center;
}

.nav-links li a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
	transition: background-color 0.3s;
}

.nav-links li a:hover {
    background-color: #4400FF;
	width: 150px;
}


main { 
	padding: 10px;
	grid-row: 3 / 5;
	grid-column: 2 / 3;
	height: max-content;
}

footer {
	grid-row: 5 / 6;
	grid-column: 1 / 3;
	position: fixed; 
	bottom: 0;
	background-color: black;
	color: white;
	padding: 3px;
	margin: 0px;
}

footer a {
	color: yellow;
}

.sub-rules {
	list-style-type: square;
}

.sub-rules ul {
	margin: 10px;
}

.sub-suggestions {
	list-style-type: square;
}

.sub-suggestions ul {
	margin: 10px;
}

::selection {
  color: white;
  background: #F23000;
}

/* Customize the advanced audio player's appearance here */
.audio-player {
    width: 400px;
    margin: 20px;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: #ccc;
    margin-top: 10px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
}

#current-time, #total-time {
    margin-top: 10px;
}