:root{--secondary:#65cea9;--gray:#313131;--primary:#080808}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{background:#313131;background:var(--gray);color:#fff}.App{display:flex;align-items:center;justify-content:center;min-height:100vh}.player{display:block;background-color:#1e1e1e;padding:50px;border-radius:16px;box-shadow:inset -6px -6px 12px rgba(0,0,0,.8),inset 6px 6px 12px hsla(0,0%,100%,.4)}.player .header{display:flex;justify-content:space-between;align-items:center}.player .header h4{text-transform:uppercase;font-size:16px;font-weight:400;color:hsla(0,0%,100%,.561)}.player .header button{cursor:pointer;background:#313131;background:var(--gray);border:none;outline:none;color:#65cea9;color:var(--secondary);font-size:18px;padding:18px;border-radius:50%;box-shadow:5px 5px 10px rgba(30,30,30,.788235294117647),inset -5px -5px 10px rgba(30,30,30,.3764705882352941)}.player .next p{color:hsla(0,0%,100%,.493);font-size:15px;text-align:center;font-weight:400}.player-detail .detail-img{position:relative;width:240px;height:240px;margin:50px auto}.player-detail .detail-img img{display:block;width:100%;height:100%;margin:0 auto;border-radius:50%;box-shadow:6px 6px 12px rgba(0,0,0,.8),-6px -6px 12px hsla(0,0%,100%,.4)}.player-detail .detail-title{color:#65cea9;color:var(--secondary);font-size:28px;text-shadow:2px 2px 4px rgba(0,0,0,.9),-2px -2px 4px #65cea9;text-shadow:2px 2px 4px rgba(0,0,0,.9),-2px -2px 4px var(--secondary,.2);text-align:center}.player-detail .detail-artist{color:#444;font-size:20px;text-shadow:2px 2px 4px rgba(0,0,0,.8),-2px -2px 4px hsla(0,0%,100%,.1);text-align:center;margin:15px 0}.player-controls{margin-bottom:30px;display:flex;align-items:center;justify-content:center}.player-controls .play-btn{font-size:20px;margin:0 30px;color:#fff;background:#65cea9;background:var(--secondary);padding:20px;opacity:.9;box-shadow:5px 5px 10px #1e1e1e,-5px -5px 10px hsla(0,0%,100%,.3);background:linear-gradient(45deg,#65cea9,#65cea9);background:linear-gradient(45deg,var(--secondary,.9),var(--secondary,.1));box-shadow:5px -5px 6px #1a1a1a,5px -5px 6px #232323}.player-controls .play-btn,.player-controls .skip-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;outline:none;border-radius:50%}.player-controls .skip-btn{font-size:16px;color:hsla(0,0%,100%,.582);background:#313131;background:var(--gray);padding:15px;opacity:.8;box-shadow:5px 5px 10px rgba(30,30,30,.788235294117647),inset -5px -5px 10px rgba(30,30,30,.3764705882352941)}.song-list{height:711px;width:364px}.player header{display:flex;align-items:center;margin-bottom:30px}.player header button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;border:none;outline:none;color:hsla(0,0%,100%,.582);background:#313131;background:var(--gray);padding:15px;border-radius:50%;opacity:.8;box-shadow:5px 5px 10px rgba(30,30,30,.788235294117647),inset -5px -5px 10px rgba(30,30,30,.3764705882352941)}.player header h4{margin-left:50px}.card{justify-content:space-between;margin-bottom:20px}.card,.card-top{display:flex;align-items:center}.song-image{height:80px;width:80px;margin-right:15px}.song-image img{height:100%;width:100%;border-radius:10px}.song-details .title{color:#65cea9;color:var(--secondary);font-size:18px;margin-bottom:5px}.song-details .artist{color:rgba(243,243,244,.5490196078431373);font-size:15px;font-weight:600}@media screen and (max-width:600px){.player{width:100%;height:100vh}}
/*# sourceMappingURL=main.66432ccf.chunk.css.map */