@import url(https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;1,500&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap);*,:after,:before{padding:0;margin:0;box-sizing:border-box}html{font-family:"Ubuntu",sans-serif;font-weight:400}.app{color:#222831;height:100vh;transition:all .5s ease-in-out}.app.dark-theme{color:#eee}.library-open{margin-left:30%}.music-player{width:100%}.navbar{padding:2rem;justify-content:space-around}.navbar,.navbar .button-group{display:flex;align-items:center}.navbar .button-group svg{margin-right:1rem;cursor:pointer;transition:all .3s ease-in-out}.navbar .button-group button svg{margin-right:0}.navbar .button-group svg:hover{transform:scale(1.3)}.navbar button{outline:none;padding:1rem 2rem;font-size:1rem;font-weight:500;letter-spacing:.1rem;background:#ffac41;border:none;transition:all .3 ease-in-out}.navbar button svg{width:1.5rem;height:1.5rem}.navbar button:hover{background-color:#ffc274}.navbar .hot-key{position:absolute;right:12%}.navModal{border-radius:10px}.navModal table{border-spacing:0 15px}.navModal table td,.navModal table th{width:15rem}.navModal table th{font-size:1.5rem}.navModal table .action-td{display:flex;align-items:center}.navModal table .action-td span{margin-left:1rem}.navModal table tr{font-size:1.2rem}.navModal table tr:nth-child(2n){background:#f5f5f5}.navModal table .keyboard{font-family:"Roboto Mono",monospace}@media screen and (max-width:786px){.navbar button{z-index:10}}@media screen and (max-width:576px){.navbar .hot-key,.navbar button span{display:none}}.player-container{height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.time-control{width:50%;display:flex;align-items:center}.time-control p{padding:1rem}.play-control{display:flex;justify-content:space-between;align-items:center;width:30%;padding:1rem 0}.play-control svg{cursor:pointer}.play-control .volume-control{display:flex;align-items:center}.play-control .volume-control svg{margin-right:.7rem}.repeate-color{color:#21bf73}@media screen and (max-width:786px){.time-control{width:90%}.play-control{width:60%}}@media screen and (max-width:576px){.play-control .volume-control{display:none}}.song-container{height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.song-container img{width:20rem;height:20rem;border-radius:50%}.song-container h2{padding:3rem 1rem 1rem}.song-container h3{font-size:1rem}.rotate-cover{animation-name:rotate-animation;animation-iteration-count:infinite;animation-timing-function:linear;animation-direction:normal;animation-duration:10s}@keyframes rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media screen and (max-width:786px){.song-container img{width:15rem;height:15rem}}@media screen and (max-width:576px){.song-container img{width:10rem;height:10rem}}.library{height:100vh;position:fixed;top:0;left:0;width:20%;overflow:auto;box-shadow:0 1px 1px 0 rgba(0,0,0,.14);transform:translateX(-100%);opacity:0;background-color:#eee;transition:all .3s ease-in-out}.library.is-dark{background:#222831}.library.active{transform:translateX(0);opacity:1}.library h2{padding:1rem 0 3rem 2rem}.library-item{display:flex;align-self:center;align-items:center;padding:1rem 2rem;transition:all .2s ease-in-out;position:relative}.library-item img{width:40%;border-radius:.5rem;height:7.5rem}.library-item .wave{height:93px;position:absolute;top:40%;left:84%;fill:#222831}.library-item .wave.isDark{fill:#eee}#Line_1{animation:pulse 1s infinite;animation-delay:.15s}#Line_2{animation:pulse 1s infinite;animation-delay:.3s}#Line_3{animation:pulse 1s infinite;animation-delay:.45s}#Line_4{animation:pulse 1s infinite;animation-delay:.6s}#Line_5{animation:pulse 1s infinite;animation-delay:.75s}#Line_6{animation:pulse 1s infinite;animation-delay:.9s}#Line_7{animation:pulse 1s infinite;animation-delay:1.05s}#Line_8{animation:pulse 1s infinite;animation-delay:1.2s}#Line_9{animation:pulse 1s infinite;animation-delay:1.35s}@keyframes pulse{0%{transform:scaleY(1);transform-origin:50% 50%}50%{transform:scaleY(.7);transform-origin:50% 50%}to{transform:scaleY(1);transform-origin:50% 50%}}.library-item.isDark{background-color:#222831;color:#eee;transition:all .2s ease-in-out}.library-item.isDark:hover,.library-item:hover{color:#222831;background-color:#ffcd8e}.song-description{padding-left:1rem}.song-description h3{font-size:1.2rem;margin-bottom:.5rem}.song-description h4{font-weight:300;font-size:1rem}*{scrollbar-width:thin;scrollbar-color:#ffcd8e transparent}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{height:1rem;background-color:#ffcd8e}@media screen and (max-width:786px){.library{z-index:5;width:100%}}.customModal{height:25rem;overflow:hidden;background:transparent;box-shadow:none}.customOverlay{background:hsla(0,0%,100%,.8)}.cards{justify-content:center;height:100%}.cards,.cards .card{display:flex;align-items:center}.cards .card{flex-direction:column;margin-right:1rem}.cards .card .card-body{padding:4rem;border-radius:1rem;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);cursor:pointer;transition:all .2s ease-in-out}.cards .card .card-body:hover{transform:scale(1.2)}.cards .card .card-body-1{background:url(/static/media/system.a1c949fd.jpg);background-position:50%;background-size:cover}.cards .card .card-body-2{background:url(/static/media/dark.0030abd1.jpg);background-position:50%;background-size:cover}.cards .card .card-body-3{background:url(/static/media/white.d3ff20ea.jpg);background-position:50%;background-size:cover}.cards .card span{padding-bottom:1rem;font-size:1.2rem;font-weight:700}@media screen and (max-width:576px){.cards{flex-direction:column}.customModal{height:100%}}
/*# sourceMappingURL=main.87d2e364.chunk.css.map */