@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";.header-container{width:100%;height:100%;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.header__left{position:relative}@media (max-width: 30em){.header__left{display:none}}.search{display:flex}.search__item{position:absolute;top:50px;z-index:10;max-width:300px;overflow:hidden;border-radius:15px;background:var(--black-300);box-shadow:0 5px 15px #000;color:#fff}.search__item p{border:1px solid transparent;cursor:pointer;font-size:12px;padding:2px 30px}.search__item p:hover{background:#121212;border:1px solid #000}.search__item .search__icon{position:absolute;z-index:20;font-size:2rem;cursor:pointer;top:5px;right:5px;color:var(--white-500)}.search__item .search__icon:hover{scale:1.1;color:var(--white-300)}.searchTerm{width:100%;max-width:300px;padding:15px 40px;border-radius:100vmax;border:none;background:#202020;color:#fff}.searchButton{position:absolute;top:12px;left:10px;z-index:5;border:none;color:var(--white-500);cursor:pointer;font-size:20px}.header__right{cursor:pointer;display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}.header__right img{width:45px;height:45px;object-fit:cover;border-radius:100vmax}.header__right p{font-size:10px}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-overlay .modal{position:relative;top:0;max-width:80%;margin:auto;background-color:#202020;border-radius:5px;padding:20px;box-shadow:0 0 10px #0000001a}.home__container{background:var(--black)}.home__container>h3{padding:10px 20px}.rowItems__container{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.rowItems{margin:10px 0 0 10px;box-shadow:0 1px 10px #050505;background:#181818;text-decoration:none;border-radius:10px;overflow:hidden;transition:background .5s ease-in-out}.rowItems:hover{background:#333}.rowItems:hover svg{display:block}.rowItems__img svg{position:absolute;left:5px;bottom:5px;display:none;font-size:2rem;border-radius:50%;background:#333;color:var(--green);transition:all .5s ease-in-out}.rowItems__img p{position:absolute;z-index:1;font-size:12px;color:#fff;background:#121212;padding:2px 6px;border-radius:10px;font-weight:400;right:5px;bottom:5px}.rowItems__img{position:relative;width:100%}.rowItems__img img{display:block;width:100%;object-fit:cover}.rowItems__detail{line-height:1;padding:10px}.rowItems__detail p{padding:10px 0 5px;font-size:1rem;font-weight:500;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rowItems__detail span{font-size:12px;color:#aaa}.music-player{display:flex;align-items:center;justify-content:space-between}.music-detail{display:flex;gap:10px;align-items:center;width:300px}.music-detail a{color:#fff;font-size:14px;text-transform:capitalize;text-decoration:none}.music-detail .title:hover{text-decoration:underline;color:var(--green)}.music-detail .artists_name:hover{text-decoration:underline}.music-detail img{width:50px;display:block}.music-controls{width:80%}.music-controls .controls,.progress{width:100%;display:flex;gap:20px;align-items:center;justify-content:center}.progress .audio-progress{width:80%;max-width:400px;cursor:pointer}.controls svg{font-size:2rem;cursor:pointer;color:#fff;transition:all .3s ease-out}.controls svg:hover{color:var(--green)}@media (max-width: 30em){.music-player{flex-direction:column;gap:10px}.music-detail{justify-content:center}.music-player .music-detail a{font-size:12px}.controls svg{font-size:1.5rem}.progress{font-size:12px}}:root{--green: rgb(30, 215, 85);--white: #fff;--white-200: #dedede;--white-300: #ccc;--white-500: #a7a7a7;--black-500: #555;--black-300: #282828;--black-bg: #121212;--black: #000}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;font-weight:400;font-style:normal;background-color:var(--black);color:var(--white-200)}body::-webkit-scrollbar{display:none}/*! Global CSS Utils */.line-clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.span{font-size:14px;font-weight:400;color:var(--white-500);cursor:pointer}.span.hover:hover{color:var(--white);text-decoration:underline}.loading__image{filter:blur(2px)}.loaded__image{filter:blur(0px);transition:filter .3s linear}.scrollbar::-webkit-scrollbar{width:6px}.scrollbar::-webkit-scrollbar-thumb{background-color:var(--black-300);border-radius:10px}.player-container{height:100vh;width:100%;overflow:hidden;position:relative}.header{background:#111;position:absolute;z-index:100;top:0;width:100%;height:10vh}.body{position:absolute;top:65px;bottom:65px;width:100%;overflow:hidden;overflow-y:auto;z-index:1;background:#202020}.footer{z-index:100;position:absolute;bottom:0;width:100%;height:10vh;padding:5px;background:#111}@media (min-width: 50em){.body{display:grid;grid-template-columns:minmax(200px,20%) 1fr}.sidebar-main,.body-main{overflow-y:auto}}@media (max-width: 30em){.footer{height:20vh}}.login{display:grid;height:100vh;max-width:500px;margin:auto;align-content:space-evenly;place-items:center}.login__title{color:#fff;font-size:1.5rem;text-transform:uppercase;text-align:center}.login img{height:100px}.login a{padding:.5rem 3rem;border-radius:100px;background-color:var(--green);font-weight:700;color:var(--black-bg);font-size:1rem;text-decoration:none;text-transform:capitalize}.login a:active{opacity:.7}.sidebar__logoImg{object-fit:contain;height:60px;width:100%;padding:10px;transition:scale .2s ease-out}.sidebar__logoImg:hover{scale:.95}.sidebar__container{width:100%;display:grid;background:var(--black);gap:5px;padding:10px 5px}@media (max-width: 30em){.sidebar__container{grid-template-columns:1fr 1fr}}.sidebar__container>.sidebar__item{background:var(--black-bg);border:1px solid transparent;padding:5px 10px;display:flex;align-items:center;gap:15px;color:var(--white-200);font-size:14px;text-decoration:none;border-radius:5px;transition:all .3s ease-in}.sidebar__container .sidebar__item.active,.sidebar__container .sidebar__item:hover{border:1px solid var(--black-500)}.sidebar__container .sidebar__item .sidebar__detail{font-weight:400}.sidebar__container .sidebar__item p{font-size:12px;color:var(--white-500)}/*! Manage Media Query View Screen */@media (max-width: 50em){.sidebar__container{display:flex;flex-wrap:wrap}.sidebar__container>a{flex:1}}.bodyHeaderImage{position:absolute;width:100%;height:200px;background-position:center center;background-attachment:fixed;z-index:-1;filter:blur(80px)}.bodyHeader{z-index:2;color:var(--white);width:100%;display:flex;align-items:center;gap:calc(15px + 1vw);padding:10px 20px}.bodyHeader img{width:calc(50px + 8vw);object-fit:contain}.bodyHeader__detail{display:flex;flex-direction:column;justify-content:flex-end}.bodyHeader__detail h2{font-size:calc(6px + 4vw);padding:0;line-height:1.5}.bodyHeader__detail p{font-size:.8rem;text-transform:capitalize}.bodyHeader__other{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:15px}.bodyHeader__other span{color:var(--white-300);text-transform:capitalize;font-size:.8rem}.bodyHeader__other span:before{content:"• "}.bodyHeader__other img{width:30px;height:30px;object-fit:contain;border-radius:50%}.bodyHeader__other a{font:sans-serif;font-size:1rem;color:var(--white);text-decoration:none;transition:all .2s ease-in-out}.bodyHeader__other a:hover{color:var(--green);text-decoration:underline}.bodyFooter-header{display:flex;align-items:center;border-bottom:1px solid #fff;margin-bottom:10px;padding:5px 20px}.bodyFooter-header>div{text-transform:capitalize;font-weight:400;font-size:14px;color:#fff}/*! bodyFooter_search */.bodyFooter_search{padding:10px;display:flex;gap:20px;position:relative}.bodyFooter_search input,button{padding:.8rem 1rem;background-color:#1111114e;color:#fff;font-weight:500;text-transform:capitalize;border:none;border-radius:10px}.bodyFooter_search button{cursor:pointer}.bodyFooter_search button:active{background:#1111119f}.bodyFooter_search .select-sort{padding:10px;width:200px;text-transform:capitalize}.bodyFooter_search .select-sort .sort{font-size:16px}.bodyFooter_search .select-sort p{font-size:14px;cursor:pointer;padding-bottom:10px;display:flex;justify-content:space-between}.bodyFooter_search .select-sort p:hover{color:var(--green)}.bodyFooter{width:100%;display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:14px;font-weight:400;padding:5px 20px;border-radius:5px;border:1px solid transparent;cursor:pointer;background:var(--black-bg);margin-bottom:5px}.bodyFooter .span_link{font-size:12px;font-weight:300;color:#aaa;display:inline-block;padding-right:5px}.bodyFooter .span_link:hover{color:#fff;text-decoration:underline}.bodyFooter:hover{border:1px solid var(--black-500)}.bodyFooter .col1{display:flex;align-items:center;gap:15px}.bodyFooter .col1 img{width:50px;border-radius:5px;object-fit:contain}.bodyFooter__name{font-size:14px;font-weight:400;color:#fff;text-decoration:none;cursor:pointer}.bodyFooter__name:hover{color:var(--green);text-decoration:underline}@media (max-width: 60em){.bodyFooter>.col3,.bodyFooter-header>div:nth-child(3){display:none}}@media (max-width: 50em){.bodyFooter>.col2,.bodyFooter-header>div:nth-child(2){display:none}}@media (max-width: 25em){.bodyFooter>.col4,.bodyFooter-header>div:nth-child(4){display:none}}