body{
    background-color: lightgreen;

    /* smoothly transition the background color */
    transition: background-color .5s;
}

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

.details{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 25px;
    /* background-color: #fff; */
}

.trackArt{
    background-color: rgba(122, 115, 115, 0.5);
    margin: 25px;
    height: 250px;
    width: 250px;
    /* background-image: url("https://source.unsplash.com/Qrspubmx6kE/640x360"); */
    background-size: cover;
    background-position: center;
    border-radius: 15px;
}

/* font size to suitable ones */
.nowPlaying{
    font-size: 1rem;
}

.trackName{
    font-size: 1.5rem;
}

/* using flex with row direction to align items in a
horizontal direction */

.buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.playPauseTrack,
.prevTrack,
.nextTrack{
    padding: 25px;
    opacity: 0.8;

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

/* change the opacity when mouse is hovered */
.playPauseTrack:hover,
.prevTrack:hover,
.nextTrack:hover{
    opacity: 1.0;
}

/* define the slider width so it scales properly */
.slider-container{
    width: 75%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

}

/* opacity when hovered */
.seek_slider:hover, .volume_slider:hover{
    opacity: 1.0;
}

.seek_slider{
    width: 60%;
    
}
.seek_slider::after{
    content: "";
    background: #fff;
}
.volume_slider{
    width: 30%;
}

.currentTime,
.total-duration{
    padding: 10px;
}

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

.musik{
    opacity: .4;
    font-size: 100px;
    /* margin: 0 auto;
    align-items: center;
    display: flex;
    justify-content: center; */
    padding: 59px;
}