/* Credit: https://github.com/sayantanm19/js-music-player */

 html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

article,
footer,
header,
main,
nav,
section {
display: block
}

* {
box-sizing: border-box;
}

body {
font-family: Georgia, Serif;
font-size: calc(0.25vw + 1rem);
line-height: 1.6;
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
background-image: linear-gradient( 110.1deg,  rgba(34,126,34,1) 2.9%, rgba(168,251,60,1) 90.3% );
}
 
.player {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
border:1px solid transparent;
border-radius:6px;
padding:1em;
background-color:#fff;
}

.details {
display: flex;
flex-direction: column;
}

.track-art {
display:block;
width: 480px;
height: 144px;
background-image: url(images/ayat-1.jpg);
background-size: contain; 
background-repeat: no-repeat;
background-position: right top;
}

.now-playing {
display:block;
width:100%;
color:#fff;
padding:1.5em 0;
text-align:center;
}

.track-name {
margin:.5em 0;
color:#444;
}

.track-artist {
padding:.5em 0;
color:#444;
}

.judul {
background-color:rgba(34,126,34,1);
color:white;
padding:.125em .5em;		
}

.audio-player {
width:100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
}

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

.playpause-track, .prev-track, .next-track {
padding: 0.25em .725em;
margin-top:.5em;
opacity: 1.0;
border:1px solid rgba(34,126,34,1);
background-color:rgba(168,251,60,1);
font-weight:500;
transition: opacity .2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover {
opacity: 0.8;
}

.slider_container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color:#444;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
background: rgba(168,251,60,1);
}

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

@media screen and (max-width:768px) {
.player {
width: 90%;
padding:1em;
}

.track-art {
width:90%;
height:144px;
}

.track-name {
width:90%;
margin-top:.5em;
}

.track-artist {
width:90%;
}
}

@media screen and (max-width:360px) {
.track-art {
width:100%;
height:96px;
}	
}