:root{
   --yellow-border: #9B862B;
}

/*...........................................

	EASY PASTE	::before / ::after

..........................*/

#musicplayer > .centered::before, #musicplayer > .centered::after{
   --size: 6svh;
   content: "";
   display: block;
   position: absolute;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   filter: 
      drop-shadow(0.11ch 0.12ch 0.1ch hsl(var(--sticker-shadow-yellow) / 0.22))
      drop-shadow(0.08ch 0.099ch 0.03ch hsl(var(--sticker-shadow-yellow) / 0.20))
      drop-shadow(0.05ch 0.05ch 0.02ch hsl(var(--sticker-shadow-yellow) / 0.18));
}

#musicplayer > .centered::before{
	background-image: url("/stickers/yummy/orange/R09.png");
   transform: translate(0.75svw, -1.5svh);
}

#musicplayer > .centered::after{
	background-image: url("/stickers/yummy/orange/W11.png");
   transform: translate(14svw, -3.5svh);
}

/*...........................................................

		music player!!! :+DDDD

..........................*/

#musicplayer{
   background:var(--white2-texture); /* background color of player */
   margin: auto;
}

#musicplayer > div{
   border-radius: var(--border-radius-level-1);
}

#musicplayer table{
   height: fit-content;
   padding: 0.5em 0;
   padding-top: calc(0.5em + 1ch);
   background: var(--yellow-texture);
   border: var(--border-level-1);
      border-style: outset;
      border-color: var(--yellow);
   border-bottom: var(--border-level-2);
      border-bottom-style: solid;
      border-bottom-color: var(--yellow-border);
   border-top-left-radius: var(--border-radius-level-1);
   border-top-right-radius: var(--border-radius-level-1);
}

.controls{
   font-size:0.8em!important; /* size of controls */
   text-align:center;
   width: 100%;
   display: flex;
      justify-content: space-evenly;
      align-items: center;
}

.controls td{
   padding:0.25em 1em; /* padding around controls */
}

.seeking{
   background:var(--white-texture); /* background color of seeking bar */
   display:flex;
   justify-content: space-evenly;
   border: var(--border-level-1);
      border-style: outset;
      border-color: var(--white);
      border-top: 0;
      border-left: 0;
      border-bottom-left-radius: var(--border-radius-level-1);
      border-bottom-right-radius: var(--border-radius-level-1);
   font-size: 0.8em;
   padding: 1ch 3ch 0.5ch 3ch; 
}

.seeking input{
   background-color: transparent;
}

.current-time{
   padding-right:0.15em;
}

.total-duration{
   padding-left:0.15em;
}

i.fas:hover, #musicplayer input:hover{
	cursor: url("/assets/web/cursor_2.ico") 2 5, pointer;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
   color:var(--black); /* color of controls */
}

input[type=range] {
   -webkit-appearance: none;
   width: 100%;
}

input[type=range]:focus {
   outline: none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 0.08em; /* thickness of seeking track */
   cursor: url("/assets/web/cursor_2.ico") 2 5, pointer;
   background: var(--black); /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
   height: 0.5em; /* height of seeking square */
   width: 0.5em; /* width of seeking square */
   border-radius: var(--border-radius-level-2); /* change to 0.15em if you want a circle seeker */
   background: var(--orange); /* color of seeker square */
   cursor: url("/assets/web/cursor_2.ico") 2 5, pointer;
   -webkit-appearance: none;
   margin-top: -0.25em; 
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track {
   width: 100%;
   height: 0.08em; /* thickness of seeking track */
   cursor: url("/assets/web/cursor_2.ico") 2 5, pointer;
   background: var(--black); /* color of seeking track */
}

input[type=range]::-moz-range-thumb {
   height: 0.5em; /* height of seeking square */
   width: 0.5em; /* width of seeking square */
   border-radius: var(--border-radius-level-2); /* change to 0.15em if you want a circle seeker */
   background: var(--orange); /* color of seeker square */
   cursor: url("/assets/web/cursor_2.ico") 2 5, pointer;
   border:none;
}

/*...........................................................

		marquee underneath~~

..........................*/

#musicplayer div.texture{
   height: fit-content;
   padding: 0.75ch;
   margin: var(--gap) 0;
}
#musicplayer div.texture > div{
   padding: 0.25ch 0;
}

.songtitle{
   padding: 0; /* padding around song title */
   display:block;
   width: 100%;
   margin-top: 0.5em;
   font-size: 0.8em;
}