body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.side-bar{background:#00f;width:15%;display:flex;flex-direction:column;height:100vh}.side-bar .avater,.side-bar .name{display:flex;justify-content:center}.side-bar .name{color:#fff;line-height:0}.side-bar .menu-items{color:#fff;cursor:pointer;display:flex column;margin-top:40px}.side-bar .menu-items>*{display:flex;width:60.5%;padding:20px 20px 20px 30%}.side-bar .menu-items>:hover{background:#7e7ef5}.side-bar .menu-items>.fas{margin-right:5px}@media only screen and (max-width:450px){.side-bar{width:20%;display:flex;flex-direction:column;height:100vh}.side-bar .charts,.side-bar .discover,.side-bar .favorite,.side-bar .name,.side-bar .playlistss,.side-bar .search{display:none}}.directory{height:70vh;overflow:scroll;scrollbar-width:thin;scrollbar-color:var(--thumGB) var(--scrollbarBG)}.directory::-webkit-scrollbar{width:11px}.card-section{display:flex;flex-direction:column;margin-left:30px}.card-section .card-part{display:flex;flex-direction:row;overflow-x:scroll;grid-gap:40px;overflow:hidden;margin-left:40px}.card-section .card-title{display:flex;align-items:center}.card-section .card-title hr{height:0;width:80%}@media only screen and (max-width:600px){.card-section .card-part{display:flex;flex-direction:row;overflow-x:scroll;grid-gap:40px;margin-left:40px}}.card-component{width:10%}.card-component .image{width:100%;height:15vh;background-size:contain;background-position:50%;margin-bottom:5px;border-radius:5px;cursor:pointer}.card-component .card-component-footer{display:flex;justify-content:center}@media only screen and (max-width:600px){.card-component{min-width:50%}}.playlist-section{display:flex;flex-direction:column;margin-left:30px}.playlist-section .playlist-part{display:flex;flex-direction:row;overflow-x:scroll;grid-gap:40px;overflow:hidden;margin-left:40px}.playlist-section .playlist-title{display:flex;align-items:center}.playlist-section .playlist-title hr{height:0;width:80%}@media only screen and (max-width:450px){.playlist-section .playlist-part{display:flex;flex-direction:row;overflow-x:scroll;grid-gap:40px;margin-left:40px}}.loading{margin-top:200px;overflow:hidden}.loading .spinner{display:flex;justify-content:center;animation:spin 1s linear infinite;color:#6c63ff}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(369deg)}}.browse-section{display:flex;flex-direction:column;margin-left:30px}.browse-section .browse-part{display:flex;flex-direction:row;overflow-x:scroll;grid-gap:40px;overflow:hidden;margin-left:40px}.browse-section .browse-title{display:flex;align-items:center;margin-left:30px}.browse-section .browse-title hr{height:0;width:80%}@media only screen and (max-width:600px){.browse-section{display:flex;flex-direction:column;margin-left:30px}.browse-section .browse-part{display:flex;flex-direction:row;overflow-x:scroll;grid-gap:40px;margin-left:40px}}.home-page{width:85%;height:100vh}@media only screen and (max-width:600px){.home-page{width:80%;height:50vh}}.header{overflow:hidden;height:25vh;background:#ffb5a7}.header .directory-header{display:flex;flex-direction:row;justify-content:space-between}.header .directory-header .directory-image{overflow:hidden}.header .directory-header .directory-image .dir-image{height:30vh;width:33%;position:absolute;top:0}.header .directory-header .directory-text{display:flex;flex-direction:column;text-align:end;color:#fff;letter-spacing:1px;font-size:30px;padding-right:90px;font-weight:bolder}.header .directory-header .directory-text>*{margin-top:50px;line-height:2px;cursor:pointer}.header .directory-header .text-name{margin-top:80px}@media only screen and (max-width:600px){.header{overflow:hidden}.header .directory-header .directory-image{overflow:hidden;display:none}.header .directory-header .directory-image .dir-image{display:none}.header .directory-header .directory-text{display:flex;color:#fff;letter-spacing:1px;font-size:25px;padding-right:1px;font-weight:bolder;margin-right:auto;margin-left:auto}.header .directory-header .directory-text>*{line-height:2px;cursor:pointer}}.play-box-play{opacity:.9}.play-box-play .play-box{display:flex;align-items:center;width:100%;bottom:0;position:fixed;border-top:1px solid #f5f5f5;background:#fff}.play-box-play .play-box .image{width:6%;height:8vh;background-size:contain;background-position:50%;margin-bottom:5px;border-radius:5px;cursor:pointer;margin-left:18px;margin-top:4px}.play-box-play .play-box .play-name{width:6%;margin-left:16px;display:flex;justify-content:center;color:#000}.play-box-play .play-box .fa-pause-circle,.play-box-play .play-box .fa-play-circle{color:#6c63ff}.play-box-play .play-box .fa-step-backward,.play-box-play .play-box .fa-step-forward{color:#e2dcdc}.play-box-play .play-box .play-logo{width:6%;display:flex;align-items:center;justify-content:center}.play-box-play .play-box .progress-bar{width:50%;background-color:#6c63ff;height:2px}.play-box-play .play-box .options>*{margin-left:15px;color:#e2dcdc}.playlist{display:flex;flex-direction:column;height:70vh;overflow-y:scroll;margin:0 60px;scrollbar-width:thin;scrollbar-color:var(--thumGB) var(--scrollbarBG)}.playlist::-webkit-scrollbar{width:11px}.playlist .playlist-card{display:flex;flex-wrap:wrap;grid-gap:20px}.App{display:flex;flex-direction:row;height:100vh;overflow:hidden}a{text-decoration:none;color:#fff}
/*# sourceMappingURL=main.aebacaf0.chunk.css.map */