head { background: #f5f7ff; color: blue; }

body { background-color: #191821; background: #f5f7ff; font-family: Tauri; font-size: 15px; }

.destext {font-family: Tauri; font-size: 20px;width: auto;height: auto;display: block; margin: 5px;text-align: center;color:#292836}

.arttext { font-family: Tauri; font-size: 20px; width: auto; height: auto; text-align: left; color: #292836} 

.boxbutton { background: #fffafa; color: #292836; font-family: Winky Sans; font-size: 55px; width: auto; height: auto; border: 3px solid #292836; display: block; margin: 5px auto; text-decoration: none; text-align: center; font-weight: 600; }

 .backbuttonu { position: relative; right: 290px; background: #fffafa;color: #292836;font-family: Tauri;font-size: 25px;width: 150px;height: auto;border: 3px solid #191821;display: block; margin: 5px auto; text-decoration: none; }
 
 .artbutton:hover {
   background-color: #eeddff;
   text-decoration: none;
}
 .musbutton:hover {
   background-color: #ddebff;
   text-decoration: none;
}
 .conbutton:hover {
   background-color: #fffbcf;
}
 .toggled:hover {
   color: #fcba03;
}
 .backbuttonu:hover {
   background-color: #9399c9;
}
.box {width: 400px;height: 420px;border: 4px solid #191821;padding: 10px;margin: auto; background-color: #fffafa }

.artbox {
  width: 700px;
  height: 2500px;
  border: 3px solid #191821;
  padding: 15px;
  margin: auto;
  background-color: #fffafa
} 
.conbox {
  width: 700px;
  height: 700px;
  border: 3px solid #191821;
  padding: 15px;
  margin: auto;
  background-color: #fffafa
}
.toggleb {
  background: #fffafa;
  font-family: Tauri;
  font-size: 30px;
  width: auto;
  height: auto;
  border: 3px solid #191821;
  display: block; 
  margin: 20px auto;
  text-align: center;
}
.realtext { display: block; }
.mobiletext { display: none; }
@media screen and (max-width: 768px) {
  .realtext { display: none; }
  .mobiletext { 
    display: block; 
  }
}
.thumbnail img {border: 3px solid #9399c9;box-sizing: border-box;width: 300px;height: 150px;object-fit: cover;cursor: pointer;}
  /*border-radius: 5px;*/
  /*transition: transform 0.2s;*/
  
.thumbnail img:hover {
  border-color: #ffbf00;
  /*transform: scale(1.03);*/
}
.willwork {
  margin-left: 0.5px; 
  margin-right: 0.5px
}
.bgoverlay {
  display: none; 
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  
}
.tablebox {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}
#artfocused {
  transform: scale(0.8);
  transform-origin: center center;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 3px solid white;
}
.iconclass {position: absolute;margin: 0;padding: 0;width: 87px;height: 78px}

/* *//* *//* *//* *//* *//* *//* darkmode */ 
.darkmode { background-color: #191821; color: #edeeff;}
.darkmode .box { background-color: #292836; color: #edeeff; border: 4px solid #9399c9;}
.darkmode .artbox { background-color: #292836; color: #edeeff; border: 3px solid #9399c9; }
.darkmode .conbox { background-color: #292836; color: #edeeff; border: 3px solid #9399c9;}
.darkmode .destext {color: #edeeff;}
.darkmode .arttext {color: #edeeff;}
.darkmode .toggleb {background-color: #191821;color: #edeeff;border: 3px solid #cacbe4;}
.darkmode .boxbutton {background: #191821;color: #edeeff;border: 3px solid #cacbe4;}
.darkmode .artbutton:hover {background-color: #87538f; }
.darkmode .musbutton:hover {background-color: #536c8f;}
.darkmode .conbutton:hover {background-color: #bf706d;}
.darkmode .thumbnail img {border: 3px solid #cacbe4}
.darkmode .thumbnail img:hover {border-color: #ffbf00;}
.darkmode .toggled:hover { color: #fcba03; }
.darkmode .backbuttonu {background: #191821;color: #edeeff; border: 3px solid #cacbe4;}
.darkmode .backbuttonu:hover {background: #9399c9;}
.darkmode .playpause-track { color: #edeeff;}
.darkmode .current-time { color: #edeeff;}
.darkmode .total-duration { color: #edeeff;}
.darkmode .playpause-track:hover { color: #9399c9;}
.darkmode .volume_container { color: #edeeff;}
.darkmode .volume_container:hover { color: #9399c9;}
.darkmode .track-name { color: #edeeff;}
.darkmode .track-artist { color: #edeeff;}
.darkmode .seek_slider { color: #edeeff;}
.darkmode .miniplay {background-color: #191821; border: 3px solid #cacbe4;}
/*///////////////////////////////////////*/

	.current-time {
	  color: #666;
		font-family: Tauri;
		font-size: 20px;
		padding: 10px;
	}
	.total-duration {
		color: #666;
		font-family: Tauri;
		font-size: 20px;
		padding: 4px;
	}
	.current-time, 
	.total-duration 
	{ display: inline-block; 
	width: 50px;
	text-align: center;
	color: #191821;
	}
	.seek_slider {
		width: 490px;
		height: 6px;
		background: orange;
  }
.volume_slider {
	height: 3px;
	width: 100%;
	}

	.track-name {
		color: #191821;
		font-size: 30px;
		line-height: 1.1;
		text-align: left;
}
		
	.track-artist {
	  color: #191821;
		font-size: 13.3333px;
		line-height: 1.1;
		text-align: left;
		padding-left: 1px;
	}
	.miniplay {
		/*width: 25em;*/
		margin: 10px auto;
		width: 576px; /* proud of myself 4 finding the exact proportions needed*/
		height: 5.5em;
		font-family: Tauri;
		background: #f5f7ff;
		border: 3px solid #9399c9;
		padding: 12px;
	}
	.overlay1 {background-image: url("anoverlay6.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay2 {background-image: url("anoverlay2.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay3 {background-image: url("anoverlay8.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay4 {background-image: url("anoverlay4.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay5 {background-image: url("anoverlay7.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay6 {background-image: url("anoverlay3.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay7 {background-image: url("anoverlay10.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}
	.overlay8 {background-image: url("anoverlay5.png"); background-size: 604.8px 111.3px; background-repeat: no-repeat;}

	.stats {
		align-items: center;
	}
	.slider_container {
		display: flex;
		align-items: center;
		/*margin-right: auto;*/
	}
	.seek_slider::-webkit-slider-thumb,
	.volume_slider::-webkit-slider-thumb {
		cursor: pointer;
	}
	.now-playing {
		display: none;
	}
body::-webkit-slider-thumb {
  background: orange;       
}

body::-webkit-scrollbar-thumb {
  background-color: blue;     
}
	.bttn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 14px;
	}
	.playpause-track,
	.prev-track,
	.next-track {
		height: 16px;
		opacity: 1;
		color: #191821;
		padding: 2px;
		cursor: pointer;
		left: 89%
	}
	.fa-play,
	.fa-pause {
    cursor: pointer; 
  }
   
.volume_container {
	  height: 16px;
    position: relative;
    display: inline-block;
    text-align: center;
	  cursor: pointer;
	  font-size: 15px;
	  left: 1%;
}
.volume_popup {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 30%;
    transform: translateY(-160%);
    height: 20px;
}
.volume_slider { 
    writing-mode: vertical-lr; 
    direction: rtl; 
    width: 8px;
    height: 65px;
    cursor: pointer;
}
.volume_popup.show {
    display: flex;
    justify-content: center;
    align-items: center;
}