style.css

*{margin:0;padding:0}html{overflow-x:hidden}body{overflow-x:hidden;background:#272722;color:#ddd;font-size:14px;font-family:'Source Code Pro', Helvetica, Arial, sans-serif}h1{text-align:center;letter-spacing:-0.1em;font-weight:normal;font-size:96px;line-height:250px}a{color:#ddd;text-decoration:none}.controls{position:absolute;top:435px;padding:0px 6px;border-radius:5px;line-height:200%;-webkit-transition:background 0.35s ease;-moz-transition:background 0.35s ease;-ms-transition:background 0.35s ease;-o-transition:background 0.35s ease;transition:background 0.35s ease}.controls:hover{background:rgba(0,0,0,0.2)}.controls span{text-decoration:underline}.controls.disabled{color:#333;cursor:default}.controls.disabled:hover{background:none}.controls.disabled span{color:#333;text-decoration:none}#prev-album{left:50%;margin-left:-350px}#next-album{right:50%;margin-right:-350px}.purple{color:#BF97D4}.red{color:#F07973}.blue{color:#6697D0}.ciano{color:#4CD2FF}.green{color:#96CD8A}.green::before,.green::after{content:"'"}.green.double::before,.green.double::after{content:'"'}#cover{position:relative;overflow:hidden;margin:auto;width:400px;height:400px;border-radius:10px;background-color:#222;background-position:center;background-size:100%;background-repeat:no-repeat;box-shadow:0px 2px 6px 1px rgba(0,0,0,0.5)}.w1{background-image:url(images/wiredin01.jpg)}.button{position:absolute;overflow:hidden;border-radius:50%;background:rgba(0,0,0,0.5);box-shadow:1px 2px 4px rgba(0,0,0,0.4);cursor:pointer;-webkit-transition:background 0.5s ease, box-shadow 0.5s ease;-moz-transition:background 0.5s ease, box-shadow 0.5s ease;-ms-transition:background 0.5s ease, box-shadow 0.5s ease;-o-transition:background 0.5s ease, box-shadow 0.5s ease;transition:background 0.5s ease, box-shadow 0.5s ease}.button:hover{background:rgba(0,0,0,0.7);box-shadow:1px 2px 6px 2px rgba(0,0,0,0.6)}.button.prev,.button.next{top:164px;width:69px;height:69px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}.button.prev{left:22px}.button.prev.hidden{left:-75px;opacity:0}.button.prev::before{position:absolute;top:20px;left:20px;display:block;width:6px;height:30px;background:#ccc;content:'';opacity:0.7}.button.prev::after{position:absolute;top:20px;left:25px;width:0;height:0;border-top:15px solid transparent;border-right:20px solid #ccc;border-bottom:15px solid transparent;content:'';opacity:0.7}.button.next{right:22px}.button.next.hidden{right:-75px}.button.next::before{position:absolute;top:20px;left:23px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:20px solid #ccc;content:'';opacity:0.7}.button.next::after{position:absolute;top:20px;left:42px;display:block;width:6px;height:30px;background:#ccc;content:'';opacity:0.7}.button.play,.button.pause{top:110px;left:110px;width:180px;height:180px}.button.play::before{position:absolute;top:50px;left:60px;width:0;height:0;border-top:40px solid transparent;border-bottom:40px solid transparent;border-left:70px solid #ccc;content:'';opacity:0.7}.button.pause::before{position:absolute;top:50px;left:52px;display:block;width:30px;height:80px;background:#ccc;content:'';opacity:0.7}.button.pause::after{position:absolute;top:50px;left:95px;display:block;width:30px;height:80px;background:#ccc;content:'';opacity:0.7}#tracklist{position:relative;left:50%;margin-top:80px;margin-left:-200px;width:-webkit-calc(50% + 200px);width:-moz-calc(50% + 200px);width:-ms-calc(50% + 200px);width:-o-calc(50% + 200px);width:calc(50% + 200px);line-height:200%}#tracklist a{position:relative;display:block;display:inline-block;margin-left:10px;padding:0px 25px 0px 7px;border-radius:5px;-webkit-transition:background 0.25s ease;-moz-transition:background 0.25s ease;-ms-transition:background 0.25s ease;-o-transition:background 0.25s ease;transition:background 0.25s ease}#tracklist a:hover,#tracklist a.playing,#tracklist a.paused{background:rgba(0,0,0,0.2)}#tracklist a:hover::after,#tracklist a.paused::after{position:absolute;top:8px;right:7px;display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #999;content:''}#tracklist a.playing::before{position:absolute;top:8px;right:15px;display:block;width:4px;height:12px;background:#999;content:''}#tracklist a.playing::after{position:absolute;top:8px;right:8px;display:block;width:4px;height:12px;background:#999;content:''}#tracklist a.playing:hover::after{border:none}footer{margin:auto;margin-top:70px;padding:10px 0 50px 0;width:400px;border-top:1px dashed #666;text-align:right;font-size:12px;opacity:0.4}footer a:hover{text-decoration:underline}