body{font-family:Arial,sans-serif;margin:0;padding:0}header,footer{text-align:center;padding:1em;background:#f4f4f4}nav.topnav{text-align:center;margin:10px 0}nav.topnav a{margin:0 10px;text-decoration:none;color:#333}.active{font-weight:bold}main{padding:0}.player-songs{max-height:330px;overflow-y:auto;border:1px solid #ddd;padding:1px;background-color:#fff}.player-songs::-webkit-scrollbar-track{background:transparent}.player-songs::-webkit-scrollbar{width:8px;background:transparent}.player-songs::-webkit-scrollbar-thumb{background:#00adff;border-radius:4px}.player-songs article{padding:10px;border-bottom:1px solid #ddd;cursor:pointer;font-size:11px;font-family:Verdana,Arial,sans-serif;line-height:0.25;white-space:nowrap;overflow:hidden}.player-songs article:nth-child(odd){background-color:#E9E9E9}.player-songs article:nth-child(even){background-color:#FFFFFF}.player-songs article.active{background-color:#000;color:#FFF}.player-songs article:hover{background-color:#000;color:#FFF}#player-container{margin:0;text-align:center;max-width:600px;margin-bottom:20px;margin-top:-10px}#player-controls{margin-top:-0;text-align:center;position:relative;background:url('https://3.bp.blogspot.com/-DMJhpXtPqEs/WBgDjL1X_vI/AAAAAAAAHFc/oi-IZ6hff_suyIDw3hqYS4TTdSPja_pbACLcB/s1600/fondo.png');background-size:cover;top:-10px}#player-controls img{margin-left:13px;border:none}.playerbutton{cursor:pointer;border:none;background:transparent;outline:none;display:inline;position:relative}.playerbutton img{width:32px;height:32px}#player-title{font-size:12px;margin:7px;white-space:nowrap;padding:0 10%;box-sizing:border-box;overflow:hidden;text-align:center;max-width:87%}.navigation-buttons{margin-top:10px}.navigation-buttons button{cursor:pointer;border:none;background:transparent;outline:none;margin:0 5px}#volume-slider{width:100px}#progress-bar{width:100%;margin-top:10px}#progress-slider{width:100%;margin:0;cursor:pointer}#time-display{display:flex;align-items:center;font-size:12px;position:relative;padding:0 10px;margin-bottom:-8px}x#current-time,x#total-time{font-weight:bold}#time-container{position:relative;width:100%}#current-time, #total-time {position: absolute;top: -15px;}#current-time{left:0}#total-time{right:0;text-align:right}.playerbutton.active::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);border-radius:50%;z-index:0}#repeat-button::before,#shuffle-button::before{background:rgba(255,255,255,0.5)}#repeat-button.active img,#shuffle-button.active img{opacity:0.5;filter:invert(100%)}#prev-button{width:28px;height:28px;background:url('https://i.imgur.com/HOcSgK3.png') no-repeat 0 -112px}#play-button{width:40px;height:40px;background:url('https://i.imgur.com/HOcSgK3.png') no-repeat -41px 0}#pause-button{display:none;width:40px;height:40px;background:url('https://i.imgur.com/HOcSgK3.png') no-repeat 0 -42px}#next-button{width:28px;height:28px;background:url('https://i.imgur.com/HOcSgK3.png') no-repeat 0 -141px;margin-right:13px}#repeat-button{width:25px;height:18px;background:url('https://i.imgur.com/HOcSgK3.png') no-repeat 0 -290px}#shuffle-button{width:25px;height:18px;background:url('https://i.imgur.com/HOcSgK3.png') no-repeat 0 -270px}#prev-button,#next-button{position:relative;top:-5px}