.gray {background: var(--bg);}

.logo {
	width: 500px;
	margin: 0 auto;
}
.theme-color {
	fill: var(--theme);
	transition: all .5s ease;
}

.face-svg {
	fill: var(--theme);
	width: 160px;
	transition: all .5s ease;
}

.face-svg:hover {filter: drop-shadow(0 0 15px #fff);}

.left {
	left: 1%;
	width: 25%;
	height: auto;
	top:35px;
}

.right {
	right: 1%;
	width: 25%;
	height: auto;
	top:46px;
}

.name {
	text-align: left;
	float: left;
}

.time {text-align: right;}

.about, .legal, .about-back {cursor: pointer;}

.bigscreen {display: block;}
.mobile {display: none;}

.about-popup, .legal-popup {
	width: 100%;
	height: 100%;
	position: absolute;
	left: -100%;
	background: var(--bg);
	color: var(--theme);
	z-index: 10;
	transition: all .5s ease;
}

.about-open, .legal-open {left: 0 !important;}

.audio-player {
    width: 300px;
    padding: 20px;
    border: none;
    background-color: transparent;
    margin: 0 auto;
}

.controls {
    display: block;
    align-items: center;
    gap: 10px;
	text-align: center;
}

#playPauseBtn {
    background-color: var(--bg);
  	color: var(--theme);
  	border: 1px solid var(--theme);
  	padding: 10px 15px;
  	cursor: pointer;
  	margin: 20px auto;
}

.prevTrack, .nextTrack {
	margin: 20px auto;
	padding: 10px;
	color: var(--theme);
	background: var(--bg);
	border: 1px solid var(--theme);
}

#playPauseBtn:hover, .prevTrack:hover, .nextTrack:hover {box-shadow: 0 0 20px -10px #fff, inset 0 0 20px -10px #fff;}

.progress-bar-container {
    flex-grow: 1;
    height: 10px;
    background-color: var(--bg);
    border: 1px solid var(--theme);
    overflow: hidden;
    cursor: pointer;
}

.progress-bar-container:hover {box-shadow: 0 0 20px -3px #fff;}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--theme);
}

#currentTime, #currentVolume {
    font-size: 12px;
    color: var(--theme);
}

#volumeSlider {
    width: 100%;
}

.chosen {
	border:1px solid var(--theme);
}

.playlist-item, .prevTrack, .nextTrack {cursor:pointer;}


/************************
 * VOLUME SLIDER STYLES
 * *********************/

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid var(--theme);
  height: var(--volumeSize);
  width: var(--volumeSize);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  transition: box-shadow .5s ease;
	
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  border: 1px solid var(--theme);
  height: var(--volumeSize);
  width: var(--volumeSize);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: box-shadow .5s ease;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  border: 1px solid var(--theme);
  height: var(--volumeSize);
  width: var(--volumeSize);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: box-shadow .5s ease;
}

input[type=range]::-moz-range-thumb:hover {box-shadow: 0 0 20px -10px #fff, inset 0 0 20px -10px #fff;}
input[type=range]::-webkit-slider-thumb:hover {box-shadow: 0 0 20px -10px #fff, inset 0 0 20px -10px #fff;}
input[type=range]::-ms-thumb:hover {box-shadow: 0 0 20px -10px #fff, inset 0 0 20px -10px #fff;}

/************************
 * END VOLUME STYLES
 * *********************/

@media screen and (max-width: 767px) {
	
	.bigscreen {display: none;}
	.mobile {display: block;}
	.left, .right {display: none;}
	
}

@media screen and (max-width: 499px) {
	.logo {width: 90%;}
}