.player-wrapper{padding:40px}.circle,.player-wrapper{display:flex;justify-content:center;align-items:center}.circle{position:relative;background:#121212;box-shadow:0 0 20px #f43f5e;cursor:pointer;transition:box-shadow .3s ease}.circle,.player-wrapper .bgImg{width:180px;height:180px;border-radius:50%}.player-wrapper .bgImg{position:absolute;opacity:.4;filter:blur(2px)}.player-wrapper .rotating{animation:spin 5s linear infinite}.circle.playing{box-shadow:0 0 30px #f43f5e}.play-button{z-index:2}.equalizer{position:absolute;display:flex;gap:4px;bottom:10px}.equalizer span{width:4px;height:10px;background:#f43f5e;animation:equalize 1s infinite;opacity:.8}.circle:not(.playing) .equalizer span{animation:none;opacity:.3}.equalizer span:first-child{animation-delay:0s}.equalizer span:nth-child(2){animation-delay:.2s}.equalizer span:nth-child(3){animation-delay:.4s}.equalizer span:nth-child(4){animation-delay:.6s}@keyframes equalize{0%,to{height:10px}50%{height:30px}}.circle-volume{display:flex;flex-direction:column;align-items:center}.volume-slider{width:100px;height:12px;background:transparent;cursor:pointer;-webkit-appearance:none;margin:40px 0 0;width:200px}.volume-slider::-webkit-slider-runnable-track{height:12px;background:#3f3f46;border-radius:6px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:#f43f5e;margin-top:-4px}.volume-slider::-moz-range-track{height:12px;background:#444;border-radius:6px}.volume-slider::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:limegreen;border:none}.loader{width:35px;height:35px;border:3px solid #fff;border-top-color:#f43f5e;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}