.theme.light{--text-dark:#373737;--text-light:#646464;--bg-grad-main:#e0e0e0;--box-shadow-color:#bebebe;--box-shine-color:#fff;--neu-grad-bg-raised:linear-gradient(145deg,#f0f0f0,#cacaca);--neu-grad-bg-inverted:linear-gradient(145deg,#cacaca,#f0f0f0)}.theme.dark{--text-dark:#c8c8c8;--text-light:#9b9b9b;--bg-grad-main:#2d2d2d;--box-shadow-color:#262626;--box-shine-color:#343434;--neu-grad-bg-raised:linear-gradient(145deg,#303030,#292929);--neu-grad-bg-inverted:linear-gradient(145deg,#292929,#303030)}*{margin:0;padding:0;box-sizing:border-box;font-family:"Arial",sans-serif}h1,h2{color:var(--text-dark)}h3,h4{font-weight:400;color:var(--text-light)}.App{background:var(--bg-grad-main);transition:all .5s;width:100vw;min-height:100vh;height:100%}button{padding:1rem;display:flex;justify-content:center;align-items:center;outline:none;font-weight:700;font-size:1rem;color:var(--text-dark);border-radius:8px;cursor:pointer;background:var(--neu-grad-bg-raised);border:1px solid var(--box-shadow-color)}button,button.active{box-shadow:10px 10px 20px var(--box-shadow-color),-10px -10px 20px var(--box-shine-color)}button.active{background:var(--neu-grad-bg-inverted)}button:active{background:var(--bg-grad-main)!important;box-shadow:inset 10px 10px 20px var(--box-shadow-color),inset -10px -10px 20px var(--box-shine-color)!important}.song-container{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.song-container img{width:20%;border-radius:50%;background:var(--neu-grad-bg-raised);box-shadow:35px 35px 50px var(--box-shadow-color),-35px -35px 50px var(--box-shadow-color);border:1px solid var(--box-shadow-color)}.song-container h2{padding:3rem 1rem 1rem}.song-container h3{font-size:1rem}@media screen and (max-width:768px){.song-container img{width:60%}}.player{min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.time-control{width:50%;display:flex}p{padding:1rem}.play-control{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem;width:40%}.play-control .control-btn{width:3rem;height:3rem;border-radius:50%;text-align:center;transition:all .5s}.play-control .control-btn:focus{outline:none}.play-control .control-btn.play{width:5rem;height:5rem}.player-time{white-space:nowrap;color:var(--text-dark);min-width:5rem;text-align:center}.track{width:100%;padding:2px;position:relative;display:flex;align-items:center;margin-top:auto;margin-bottom:auto;border-radius:10px;background:var(--bg-grad-main);box-shadow:inset 10px 10px 20px var(--box-shadow-color),inset -10px -10px 20px var(--box-shine-color);overflow:hidden}.track>input{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;position:absolute;cursor:pointer}.track>input:focus{outline:none}.track>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:16px;width:16px;opacity:0}.track>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:16px;width:16px;opacity:0}.animate-track{height:16px;border-radius:8px;transition:width .1s;box-shadow:inset 1px 1px 2px var(--box-shine-color),inset -1px -1px 2px var(--box-shadow-color)}.track.volume-slider{width:8rem}@media screen and (max-width:768px){.time-control{width:90%}.play-control{width:80%}}.library{position:fixed;top:0;left:0;width:20rem;height:100%;background:var(--neu-grad-bg-raised);box-shadow:10px 10px 20px var(--box-shadow-color),-10px -10px 20px var(--box-shine-color);border:1px solid var(--box-shadow-color);border-top:none;border-bottom:none;overflow-y:auto;transform:translateX(-100%);transition:all .5s ease;opacity:0}.library h2{padding:2rem}.library.active{transform:translateX(0);opacity:1}.library h2{background:var(--neu-grad-bg-raised);box-shadow:10px 10px 20px var(--box-shadow-color),-10px -10px 20px var(--box-shine-color);border:1px solid var(--box-shadow-color);border-top:none;border-left:none;border-right:none}.library-song{display:flex;align-items:center;padding:1rem 2rem;cursor:pointer;transition:box-shadow .1s ease-in,all .2s ease-in;overflow:hidden}.library-song img{width:30%;transition:box-shadow .1s ease-in}.library-song:hover{background:#add8e6}.library-song.active{background:violet;box-shadow:inset 10px 10px 20px #b563b5,inset -10px -10px 20px #ffa1ff;text-shadow:10px 10px 20px #b563b5,-10px -10px 20px #ffa1ff}.library-song.active img{background:violet;box-shadow:10px 10px 20px #b563b5,-10px -10px 20px #ffa1ff}.library-song.active>.song-description h3,.library-song:hover>.song-description h3{color:#e0e0e0}.library-song.active>.song-description h4,.library-song:hover>.song-description h4{color:#fff}.song-description{padding-left:1rem}.song-description h3{font-size:1rem}.song-description h4{font-size:.75rem}*{scrollbar-width:thin;scrollbar-color:hsla(0,0%,60.8%,.5) transparent}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:hsla(0,0%,60.8%,.5);border-radius:20px;border:transparent}@media screen and (max-width:768px){.library{width:100%}}nav{min-height:10vh;display:flex;justify-content:space-between;align-items:center;padding:2rem 4rem;width:80vw;margin:auto}nav .logo{color:#9400d3}nav .controls{display:flex}nav .controls button:not(:first-child){margin-left:1rem}nav .controls .library-control{transition:width .2s ease-in}nav .controls .library-control svg{pointer-events:none}@media screen and (max-width:768px){nav{padding:1rem 2rem;width:90vw}nav .controls .library-control{z-index:10}}.drop-up{position:absolute;bottom:6rem;flex-direction:column;border-radius:8px;visibility:hidden;opacity:0;transition:visibility 0s,opacity .5s linear;background:var(--neu-grad-bg-raised);box-shadow:10px 10px 20px var(--box-shadow-color),-10px -10px 20px var(--box-shine-color);border:1px solid var(--box-shadow-color)}.drop-up button{box-shadow:none;border:none;background:transparent;text-transform:capitalize;justify-content:left!important}.drop-up button.active{background:var(--bg-grad-main)!important;box-shadow:inset 10px 10px 20px var(--box-shadow-color),inset -10px -10px 20px var(--box-shine-color)!important}.drop-up>:first-child{border-top-left-radius:8px!important;border-top-right-radius:8px!important}.drop-up>:last-child{border-bottom-left-radius:8px!important;border-bottom-right-radius:8px!important}.drop-up.active{display:flex;visibility:visible;opacity:1}.drop-up.volume-slider-dropdown{transform:rotate(270deg) translateX(40%) translateY(-180%)}.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:hsla(0,0%,87.8%,.2);display:flex;align-items:center;justify-content:center}.modal .modal-content{width:500px}.modal .modal-content,.modal .modal-content .modal-footer,.modal .modal-content .modal-header{background:var(--neu-grad-bg-raised);box-shadow:10px 10px 20px var(--box-shadow-color),-10px -10px 20px var(--box-shine-color);border:1px solid var(--box-shadow-color)}.modal .modal-content .modal-footer,.modal .modal-content .modal-header{padding:1rem}.modal .modal-content .modal-body{padding:10rem}
/*# sourceMappingURL=main.b015bb41.chunk.css.map */