.player {
  height: 95%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.details {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 25px;
}

.track-art {
  margin: 10px;
  height: 250px;
  width: 250px;
  background-image: url("");
  background-size: cover;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
  border-radius: 0%;
}

.now-playing {
  margin-top:-18px;
  font-size: 22pt;
  color: #ffffff;
  mix-blend-mode: overlay;
  font-family: 'sbliquid';
  text-align: center;
}

.track-name {
  font-size: 3.2vw;
  color: #ffffff;
  mix-blend-mode: overlay;
  font-family: 'sbliquid';
  text-align: center;
  word-break: break-all; 
  word-wrap: break-word;
  max-width: 29rem;
  max-height: 3.6rem
}
.track-name.small-font {
  font-size: 1.5vw;
}

.track-artist {
  font-size: 1.8rem;
  color: #ffffff;
  mix-blend-mode: overlay;
  font-family: 'sbliquid';
  text-align: center;
}

.buttons {
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #FFF;
}

.playpause-track, .prev-track, .next-track {
  padding: 25px;
  opacity: 0.8;
  color: #FFF;

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

.playpause-track:hover, .prev-track:hover, .next-track:hover {
  opacity: 1.0;
  color: #FFF;
}

.slider_container {
  width: 75%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d7d7d7;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: white;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

.seek_slider:hover, .volume_slider:hover {
  opacity: 1.0;
}

.seek_slider {
  width: 60%;
}

.volume_slider {
  width: 30%;
}

.current-time, .total-duration {
  padding: 10px;
  font-family: Verdana;
}

i.fa-volume-down, i.fa-volume-up {
  padding: 10px;
}

i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
  cursor: pointer;
}
.playershell {
  border: 10px solid #0c1822;
  border-radius:110px;
  background: rgb(201,199,23);
  background: linear-gradient(180deg, rgb(201, 199, 23) 8%, rgb(179, 75, 226) 8%, rgb(89, 28, 131) 63%);
  outline: 45px outset #191525;
  box-shadow: inset 0 -215px 0px rgb(13, 28, 50), 0 4px 6px rgba(0,0,0,0.45);
  display:flex;
  flex-wrap:wrap;
  margin-top:-30px;
  margin-bottom:-30px;
  margin-left:79px;
  max-width:75%;
  max-height:640px;
  min-height:640px;
  scale:75%;
  order: 2;
}
@media only screen and (max-width: 767px) {
  .playershell {
    margin-left:-50px;
    margin-right:-50px;
    max-width:700px;
  }
  .track-name {
    font-size: 10vw;
    max-width: 50rem;
    max-height: 5rem
  }
  .track-name.small-font {
    font-size: 6vw; /* smaller font on mobile */
  }
}