/* blue theme */

                    #musicplayer{
                      font-family: 'basiic';
                      font-weight:bold;
                      height:30px;
                      width:1100px;
                      position:absolute;
                      margin-bottom: 0;
                      display:flex;
                      background: linear-gradient(180deg,#77BBFF 0%,  #f0f5ff  45%, #3885d2 47%, #59a3ec 60%, #77BBFF 100%);
                     border:ridge 2px #77BBFF;/* border around player */
                      outline: solid 2px black;
                     box-shadow: inset 10px 0px 6px -10px #3885d2, inset -13px 0px 6px -10px #3885d2, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #3885d2;
                        }

                        .songtitle{
                            width: 150px;
                            height: 20px;
                        display:block;
                        padding:2px; /* padding around song title */
                        font-family: 'Onli';
                        font-weight: lighter;
                        margin-top:4px;
                        margin-right: 5px;
                        font-size:15px;
                        color:black;
                        letter-spacing: 1px;

                        background: white;/* background of song title */
                        border: gray inset 1px;
                           border-radius:6px;
                           box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
                        }

                        .controls{
                          font-size:12px; /* size of controls */
                          text-align:center;
                          width:100px;
                          height:20px;
                          text-decoration:none;
                          filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
                        }

                        .controls td{
                           padding-top:5px; /* padding around controls */
                        }

                        .seeking{
                          width:75%;
                          background: transparent;/* background color of seeking bar */
                          display:flex;
                          justify-content: space-evenly;
                          padding:7px; /* padding around seeking bar */

                        }

                        .current-time{
                          padding-right:5px;
                          margin-right: 3px;
                         filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);

                        }

                        .total-duration{
                          padding-left:5px;
                          filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
                        }

                       .ctrlimg {
                            height:16px;
                            width:16px;
                        }
                        input[type=range] {
                            -webkit-appearance: none;
                            width: 100%;
                          background: transparent;
                        }

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

                        input[type=range]::-webkit-slider-runnable-track {
                            width: 100%;
                            height: 6px; /* thickness of seeking track */
                            cursor: help;
                            border-radius: 6px;
                            background: black; /* color of seeking track */
                            border: 1px white solid;
                        }

                        input[type=range]::-webkit-slider-thumb {

                            height: 30px; /* height of seeking square */
                            width: 20px; /* width of seeking square */
                            background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
                            background-size: 25px;
                            -webkit-appearance: none;
                            margin-top: -10px;

                        }

                    input[type=range].volume_slider::-webkit-slider-runnable-track {
                        background: white; /* color of volume seeking track */
                         filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */
                        }

                     input[type=range].volume_slider::-webkit-slider-thumb {
                        background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
                        background-size: 20px;
                        height: 20px; /* height of volume seeking square */
                        width: 20px;
                        margin-top: -8px;
                       }


                    .slider_container {
                      width: 15%;       /* width of volume seeker */
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    }


                text-shadow: -4px 0 #77BBFF, 0 4px #77BBFF, 4px 0 #77BBFF, 0 -4px #77BBFF;
            }