:root {
  --tracktitlefont: celluloid1;
  --tracktitlesize: 15px;
  --tracktitlecolor: #030b28;
  --textoutlines: #ffffff;
  --artistfont: celluloid1;
  --artistsize: 14px;

  --controlscolor: #000;
  --trackcolor: #000;
}
  #cont {
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:225px;
  height:251px;
  background-color: #DDDEC8;
  background-attachment: fixed;
  position: relative;
  filter: drop-shadow(2px 2px #818472);
  }
  .currentlistening{
    position: absolute;
    padding: 4px;
    background-color: #f9f9f9;
    top: 0px;
    left: 6%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-family: celluloid1;
  }

  /* Using flex with the column direction to
     align items in a vertical direction */
  .player {
    border-radius: 5%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }

  .details {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top:0px;
    /* color */
    color:black;
    text-shadow:1px 0px white, -1px 0px white, 0px 1px white, 0px -1px white;
  }

  .text {
    color: black;
    font-size: 1.7em;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    font-family: surfism2;
  }

  .track-art {
    opacity: 1;
    display: block;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }

  .track-art {
    margin: .3em;
    margin-top:10px;
    height: 100px;
    width: 100px;
    background-image: URL(
       "/featuredsong.jpg");
    background-size: cover;
    background-position: center;
    border:1px solid black;
  }
  .playerright{
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    justify-content: center;
  }

  .buttons {
    margin: 0 auto;
  transition:all .5s ease;
  }

  /* Changing the font sizes to suitable ones */
  .titleholder{
    width: 200px;
    background-color: white;
    border-radius: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: 3px;

  }
  .now-playing {
    font-size: 1rem;
    display: none;
  }

  .track-name {
    font-size: var(--tracktitlesize);
    font-family: var(--tracktitlefont);
    font-weight: bold;
  }

  .track-artist {
    font-family: var(--artistfont);
    font-size: var(--artistsize);
  }

  /* Using flex with the row direction to
     align items in a horizontal direction */
  .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .playpause-track,
  .prev-track,
  .next-track {
    padding: 3px;
    color: var(--controlscolor);

    /* Smoothly transition the opacity */
    transition: opacity .2s;
  }

  /* Change the opacity when mouse is hovered */
  .playpause-track:hover,
  .prev-track:hover,
  .next-track:hover {
    opacity: 1.0;
  }

  /* Define the slider width so that it scales properly */
  .slider_container {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Modify the appearance of the slider */
  .seek_slider, .volume_slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 2px;
    background: var(--trackcolor);
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }

  /* Modify the appearance of the slider thumb */
  .seek_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: transparent;
    cursor: pointer;
    background-image: url("/bullets/star4.gif")
  }

  .volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: transparent;
    cursor: pointer;
    background-image: url("/musicroom/player/heart.gif")
  }

  /* Change the opacity when mouse is hovered */
  .seek_slider:hover,
  .volume_slider:hover {
    opacity: 1.0;
  }

  .seek_slider {
    width: 60%;
  }

  .volume_slider {
    width: 30%;
  }

  .current-time,
  .total-duration {
    padding: 8px;
    font-family:celluloid1;
  }
  .sliderholder{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  i.fa-volume-down,
  i.fa-volume-up {
    padding: 10px;
    color:white;
    text-shadow:1px 0px #000, -1px 0px #000, 0px -1px #000, 0px 1px #000;
    transition:all .4s ease;
  }

  i.fa-volume-down:hover,
  i.fa-volume-up:hover {
    padding: 10px;
    color:#000;
    text-shadow:none;
    transition:all .4s ease;
  }

  /* Change the mouse cursor to a pointer
     when hovered over */
  i.fa-play-circle,
  i.fa-pause-circle,
  i.fa-step-forward,
  i.fa-step-backward {
    cursor: pointer;
  }