@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background:linear-gradient(120deg,#000000 10%,#000000 25%,#000000 65%);
    color:#ffffff;
    font-family: 'Montserrat', sans-serif;
    align-items: center;
    justify-content: center;
    }
    
    .container {
    height:100%;
    width:90%;
    background:#fff;
    margin-left:auto;
    
    margin-right:auto;
    border-radius:10px; 
    background:#000000;
    }
     
    .main {
    height: 97.4vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    }
     
    .format {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    }
     
    .track-art {
    height: 200px;
    width: 200px;
    /*background-image: URL("https://source.unsplash.com/Qrspubmx6kE/640x360");*/
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    margin-bottom:20px;
    margin-top:0%;
    border:4px solid #152238;
    }
     
    .track-name {
    font-size:2rem;
    padding-bottom:10px;
    }
     
    .track-artist {
    font-size: 1.2rem;
    padding-top:5px;
    }
     
    .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    }
     
    .playpause-track, .prev-track, .next-track {
    padding: 20px;
    padding-bottom:0px;
    opacity: 0.8;
    transition: opacity .2s;
    }
     
    .playpause-track:hover,.prev-track:hover,.next-track:hover {
    opacity: 1.0;
    }
     
    .slider_container {
    width: 95%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    }
     
    .seek_slider, .volume_slider {
    -webkit-appearance: none;
    appearance: none;
    height: 7.5px;
    background:#ffffff;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius:7px;
    }
     
    .seek_slider::-webkit-slider-thumb,
    .volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background:#ffffff;
    cursor: pointer;
    border-radius: 50%;
    }
     
    .seek_slider:hover,.volume_slider:hover {
    opacity: 1.0;
    }
     
    .seek_slider {
    width: 100%;
    }
     
    .volume_slider {
    width: 75%;
    }
     
    .current-time,.total-duration {
    padding: 15px;
    }
     
    i.fa-volume-down,i.fa-volume-up {
    padding: 15px;
    }
    
    .icon {
    padding:20px;
    }
    
    span {
    color:#ffffff;
    }
    
    .tools {
    padding:10px;
    }
    
    #clock {
    padding:20px;
    font-size:20px;
    }
    
    #icon5 {
    color:#23395d;
    }
    
    #icon4 {
    color:#ffffff;
    }
    
    #icon6 {
    color:#ffffff;
    }