/* colors and whole body styles */
:root {
	--orange: #a654cf;
	--green: #52d273;
	--red: #e84f64;
	--yellow: #e5c453;
	--blue: #46bddf;
	--white: #b3b8bc;
	--grey: #656565;
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--white);
  }

  #sidebar {
    background-color: rgb(10,10,10);
  }

  #footer {
    background-color: rgb(35,35,35);
  }

  #content {
    background-color: rgb(20,20,20);
  }

  #play_control_bar div.background {
    border-top: 7px solid var(--white);
  }
  
  div.playlist_item div.title {
    color: white;
  }

  div.playlist_item {
    background-color: rgba(255, 255, 255, 0.075);
  }

  div.playlist_item.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
}

@media only screen and (max-device-width: 480px) {
  #content, body {
    max-height: unset !important;
  }

  #main {
    overflow-y: unset !important;
  }
}

body {
	color: #444;
	font-family: "Verdana", "Arial";
  font-size: 110%;
  display: flex;
  min-height: 100vh;
  margin: 0;
  flex-wrap: wrap;
  max-height: 100vh;
}



/* main page elements */
#sidebar {
	flex-basis: 15em;
  flex-grow: 1;
	background-color: #ccc;
  text-align: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

#footer {
	min-height: 6em;
	background-color: #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 2;
  flex-basis: 6em;
}

#footer > div {

}

#content {
	flex-basis: 1000px;
  flex-grow: 7;
	background-color: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 100vh;
}

#main {
  padding: 1.5em;
  flex-grow: 8;
  flex-basis: 50em;
  overflow-y: scroll;
}




/* sidebar elements */
#logo {
  max-width: 100%;
}

#logo > img {
  max-width: 80%;
  max-height: 20em;
}

#sidebar div.naventry {
	cursor: pointer;
	padding: 0.5em;
	font-size: 115%;
}

#sidebar div.naventry:hover {
	background-color: rgba(255,255,255,0.1);
}

#sidebar div.naventry.active {
	background-color: rgba(255,255,255,0.15);
}

#sidebar div.naventry span {		
	color: var(--red);
}

#play_target {
	border-bottom: 1px solid var(--white);
	border-top: 1px solid var(--white);
	background-color: rgba(0,0,0,0.05);
	padding: 0.25em;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

#play_target #headline {
	font-weight: bold;
}

#play_target div.entry {
	display: flex;
	justify-content: space-between;
}

#play_target div.entry div:first-child i {
	color: var(--green);
}

#play_target div.entry > div {
	
}

#main_description {
  max-width: 75em;
}

#link {
  margin-bottom: 1em;
  display: inline-block;
}

#play_target div.entry > div:last-child {
	color: var(--grey);
	cursor: pointer;
}

#play_target div.entry > div:last-child i:hover {
	color: var(--white);
}

.inactive {
  color: #666;
}



/* bottom bar elements */
#play_control_panel {
  flex-basis: 30em;
  flex-grow: 3;
  padding-left: 1em;
  padding-right: 1em;
}

#play_info_panel {
  flex-basis: 15em;
  flex-grow: 1;
  font-size: 150%;
  padding: 0.5em;
  min-height: 3em;
}

#play_audio_panel {
  flex-basis: 10em;
  flex-grow: 1;
  padding-top: 1.5em;
  padding-right: 1.5em;
  text-align: right;
  text-align: center;
  padding-bottom: 2em;
}

#play_audio_panel > * {
  vertical-align: top;
}

#play_controls {
  display: flex;
	justify-content: space-between;
	width: 6em;
	margin: auto;
	font-size: 160%;
	font-weight: bold;
	margin-top: 0.5em;
}

#play_control_bar {
	margin: auto;
	margin-top: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.3em;
}

#play_control_bar div.spread {
  width: 100%;
  padding-top: 0.3em;
}

#play_control_bar div.background {
	width: 99%;
	border-top: 7px solid var(--grey);
}

#play_control_bar div.progress {
	width: 0%;
  min-width: 0.5%;
	border-top: 7px solid var(--orange);
  transform: translateY(-7px);
}




/* main content area elements */
#content div.playlist_item:hover {
  cursor: pointer;
	background-color: rgba(255,255,255,0.1);
}

div.headline {
	color: var(--orange);
	font-weight: bold;
	font-size: 200%;
  padding-bottom: 0.3em;
}

div.subheader {
  font-size: 130%;
  padding-bottom: 1em;
}

#content div.card div.song_list {
	
}

div.playlist_item {
	width: 100%;
  box-sizing: border-box;
  max-width: 50em;
	min-height: 2.5em;
	background-color: rgba(0, 0, 0, 0.075);
	margin: 0.1em;
	position: relative;
  padding: 0.5em;
}

div.playlist_item.active {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

div.playlist_item > div.header {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  gap: .3em;
}

div.playlist_item > div, i {
  display: inline-block;
  padding: 0.2em;
}

div.playlist_item div.title {
  color: black;
  font-weight: bold;
  font-size: 110%;
}

div.playlist_item > div.description {
  display: block;
}

div.playlist_item:hover {
	background-color: rgba(255,255,255,0.125);
  cursor: pointer;
}

.icon::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.icon-solid::before {
	font-family: "Font Awesome 5 Free";		
}

.icon-history::before {
	content: "\f1da";
}

.icon-background::before {
	position: relative;
	font-size: calc(4em);
	margin: auto;
	display: block;
	width: min-content;
	height: min-content;
	transform: translate(0%, 25%);
	top: 50%;
	transform: translateY(-50%);
	color: var(--grey);
}