/*body {*/


/*Smoothly transition the background color */

/*}*/
/*added by merge*/
#main {
  width: 300px;
  height: 300px;
  
  position: absolute;
  bottom: 4px;
  left: 10;
  display: flex;
}
#main div {
  flex: 1;  
  flex: 1;
}
/*end- added by merge*/
/* Using flex with the column direction to
align items in a vertical direction */
.player {
/*height: 95vh;*/
height: 300px;
width: 300px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background-image: linear-gradient(to right, rgba(75,50,150,0), rgba(75,50,150,1)); /*used to be in body*/
transition: background-color .5s;
border-radius: 20px;
z-index: 2;
}

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

.track-art {
margin: 5px;
/*height: 250px;
width: 250px;*/
height: 70px;
width: 70px;
background-image: URL("blind_logo.png") /*URL(
	"https://source.unsplash.com/Qrspubmx6kE/640x360")*/;
background-size: cover;
background-position: center;
border-radius: 10%;
}

/* Changing the font sizes to suitable ones */
.now-playing {
font-size: .5rem;
}

.track-name {
font-size: 1rem;
}

.track-artist {
font-size: .75rem;
}

/* 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: 10px;
opacity: 0.8;

/* 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: 75%;
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: 5px;
background: black;
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%;
}

/* 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: 10px;
}

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

/* 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;
}