:root{--white:#fff;--active-color:#00aeb0}*{box-sizing:border-box}html{font-family:Arial,Helvetica,sans-serif;height:100vh;display:flex;align-items:center;text-align:center;justify-content:center;background-image:url(/static/media/background.d55ce34c.png);background-size:cover;transition:background .4s ease}button{background:none;border:none;cursor:pointer}input[type=range]{height:5px;-webkit-appearance:none;width:100%;margin-bottom:10px;border-radius:8px;background:#3b7677;transition:background .2s ease;cursor:pointer}.audio-player{width:350px;padding:24px;border-radius:20px;box-shadow:0 28px 28px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:auto;color:#fff;color:var(--white)}.artwork{border-radius:120px;display:block;margin:auto;height:200px;width:200px}.track-info{text-align:center;z-index:1;position:relative}.title{font-weight:700;margin-bottom:4px}.artist{font-weight:300;margin-top:0}.audio-controls{display:flex;justify-content:space-between;width:75%;margin:0 auto 15px}.audio-controls .next svg,.audio-controls .prev svg{width:35px;height:35px}.audio-controls .pause svg,.audio-controls .play svg{height:40px;width:40px}.audio-controls path{fill:#fff;fill:var(--white)}.color-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.audio-player.playing{-webkit-animation:colorChange 20s infinite alternate;animation:colorChange 20s infinite alternate}@-webkit-keyframes colorChange{0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(1turn);filter:hue-rotate(1turn)}}@keyframes colorChange{0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(1turn);filter:hue-rotate(1turn)}}
/*# sourceMappingURL=main.8e780e2b.chunk.css.map */