*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:sans-serif}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background-color:#212121;color:#fff}main{width:100%;max-width:768px;margin:0 auto;padding:25px}.song-title{color:#53565a;font-size:32px;font-weight:700;text-transform:uppercase;text-align:center}.song-title span{font-weight:400;font-style:italic}.controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:30px 15px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;cursor:pointer}button:hover{opacity:.8}.pause,.play{font-size:20px;padding:15px 25px;border-radius:8px;background-color:#cc2e5d}.next,.pause,.play,.prev{font-weight:700;margin:0 15px;color:#fff}.next,.prev{font-size:16px;padding:10px 20px;border-radius:6px;background-color:#ff5858}.playlist{padding:0 30px}.playlist h3{color:#212121;font-size:28px;font-weight:400;margin-bottom:30px;text-align:center}.playlist .song{display:block;width:100%;padding:15px;font-size:20px;font-weight:700;cursor:pointer}.playlist .song:hover{color:#ff5858}.playlist .song.playing{color:#fff;background-image:-webkit-gradient(linear,left top,right top,from(#cc2e5d),to(#ff5858));background-image:linear-gradient(90deg,#cc2e5d,#ff5858)}footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background-color:#212121;color:#fff}