@font-face{font-family:Heading;src:url(/Music-Player-UI/assets/heading-font-BCvNh4Ds.woff) format("woff")}.nav-sec{display:flex;justify-content:space-between;align-items:center;color:#c864ff;background-color:#121212;padding:.7rem}.nav-sec .nav-middle{width:40%}.nav-sec .nav-left,.nav-sec .nav-right{width:30%}.nav-left{display:flex;align-items:center;gap:.4rem}.nav-left>div{display:flex;align-items:center;flex-direction:column;font-family:Heading}.nav-middle{display:flex;align-items:center;position:relative}.nav-middle input{width:100%;background-color:#282832;border:none;padding:.5rem 2.5rem .5rem 1.5rem;border-radius:1rem;outline:none;color:#fff}.nav-middle input::placeholder{color:#fff}.nav-middle .search-icon{position:absolute;font-size:1.2rem;right:.6rem}.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:2rem;font-size:1.5rem}.nav-right .avatar{width:2.5rem;height:2.5rem;background-color:gray;border-radius:50%;border:1px solid gray;overflow:hidden}@media only screen and (max-width: 600px){.nav-sec{padding:.7rem 1rem}.nav-sec .nav-left,.nav-sec .nav-right{width:auto}.nav-middle{display:none}.nav-right>svg{display:none}}@font-face{font-family:Lato;src:url(/Music-Player-UI/assets/lato-CXHd7l6Y.woff) format("woff")}.aside-sec{height:100dvh;padding-top:5rem;background-color:#121212;border-right:1px solid rgb(200,100,255);font-family:Lato;font-weight:700}.aside-sec>div{display:flex;flex-direction:column;gap:1rem;padding:2rem 3rem 3rem}.aside-sec1{border-bottom:2px solid gray}.aside-sec1>div{display:flex;align-items:center;gap:.4rem;transition:color .2s ease;cursor:pointer}.aside-sec1>div:hover{color:gray}.aside-sec2>div{transition:color .2s ease;cursor:pointer}.aside-sec2>div:hover{color:gray}@media only screen and (max-width: 900px){.aside-sec{display:none}}.list-container .artist{border-radius:50%;overflow:hidden}.category-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.category-container .card{aspect-ratio:16/9;position:relative}.category-container .card>.image{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-size:100%;background-position:center;transition:background-size .3s,opacity .3s;background-color:gray;opacity:1}.category-container .card p{position:absolute;top:45%;left:50%;transform:translate(-50%);z-index:3}.category-container .card:hover>.image{background-size:150%;opacity:.5}.category-container .card:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.main-sec{padding:90px 160px 50px 270px;background-color:#1d1d27}.main-sec h1{margin-bottom:1rem}.main-sec>section{margin-bottom:3rem}.list-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:2rem}.list-container img{display:block}.list-container .card>div{aspect-ratio:1/1;background-color:gray}.list-container .card p{margin:.7rem;text-align:center}@media only screen and (max-width: 900px){.main-sec{padding:90px 160px 50px 40px}}@media only screen and (max-width: 768px){.list-container{gap:1rem}.main-sec{padding:90px 1rem 50px}}.carousel-sec{padding:0 12%;width:100%;justify-content:center;align-items:center;display:flex}#slider{float:left;position:static;max-width:1000px;min-width:357px;width:100%;height:35vh;margin:0 150px;font-family:Helvetica Neue,sans-serif;perspective:1400px;transform-style:preserve-3d;display:flex}#slider label,#slider label img{position:absolute;width:100%;height:100%;left:0;top:0;color:#fff;font-size:70px;font-weight:700;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .4s ease}input[type=radio]{position:relative;top:108%;left:50%;width:18px;height:18px;margin:0 15px 0 0;opacity:.4;transform:translate(-83px);cursor:pointer;display:none}input[type=radio]:nth-child(5){margin-right:0}input[type=radio]:checked{opacity:1}#s1:checked~#slide1,#s2:checked~#slide2,#s3:checked~#slide3,#s4:checked~#slide4,#s5:checked~#slide5{box-shadow:0 13px 26px #0000004d,0 12px 6px #0003;transform:translateZ(0)}#s1:checked~#slide2,#s2:checked~#slide3,#s3:checked~#slide4,#s4:checked~#slide5,#s5:checked~#slide1{box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;transform:translate3d(20%,0,-50px)}#s1:checked~#slide3,#s2:checked~#slide4,#s3:checked~#slide5,#s4:checked~#slide1,#s5:checked~#slide2{box-shadow:0 1px 4px #0006;transform:translate3d(40%,0,-250px)}#s1:checked~#slide5,#s2:checked~#slide1,#s3:checked~#slide2,#s4:checked~#slide3,#s5:checked~#slide4{box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;transform:translate3d(-42%,0,-250px)}#s1:checked~#slide4,#s2:checked~#slide5,#s3:checked~#slide1,#s4:checked~#slide2,#s5:checked~#slide3{box-shadow:0 1px 4px #fff6;transform:translate3d(-25%,0,-100px)}@media only screen and (max-width: 600px){.carousel-sec{display:none}}.queue-sec{position:fixed;right:-300px;z-index:80;top:100px;height:70dvh;background:#121212;width:400px;padding:10px 60px 10px 20px;box-shadow:0 0 20px #f5f5f5;transition:right .4s ease .3s;border-radius:1rem;overflow:hidden}.queue-sec h2{margin:10px 10px 20px}.queue-sec:hover{right:-50px}.queue-sec:hover .s-no{transform:none;margin-right:.8rem}.queue-list{display:flex;flex-direction:column;gap:1.3rem;font-size:1.2rem;overflow:auto;scrollbar-width:none;height:83%}.queue-list .song{display:flex;align-items:center}.queue-list .s-no{padding-right:0;transition:.3s .6s;transform:scale(0)}.queue-list .track{flex-grow:1;font-weight:400;font-size:.85rem}.queue-list small{color:gray}.queue-list img{width:40px;margin-right:1.2rem}.queue-list .like{margin:0 .8rem}@media only screen and (max-width: 768px){.queue-sec{display:none}}.player-sec{position:fixed;z-index:100;bottom:0;width:100%;background-color:#28282a;display:flex;align-items:center}.player-sec .player-middle-sec{flex:1}.player-sec .player-right-sec,.player-sec .player-left-sec{width:200px}.player-left-sec{padding:1rem 0 1rem 2rem;display:flex;align-items:center;gap:1rem}.player-left-sec img{width:60px;height:60px;aspect-ratio:1/1}.player-left-sec small{color:#b1b1b1;font-size:x-small}.player-middle-sec{display:flex;flex-direction:column;gap:.8rem;padding:0 2rem}.player-middle-sec>div{display:flex;justify-content:center}.player-btns{gap:1.5rem}.player-slider{width:100%;background-color:#fff;height:8px;max-width:800px;border-radius:1rem;overflow:hidden}.player-slider>div{width:45%;height:100%;background-color:#126df5}.player-right-sec{display:flex;justify-content:center;align-items:center;gap:2rem}@media only screen and (max-width: 600px){.player-right-sec{display:none}.player-left-sec,.player-right-sec{padding:1rem;gap:.5rem}.player-btns{gap:1rem}}*{margin:0;padding:0;box-sizing:border-box}body{color:#fff;font-family:Arial,Helvetica,sans-serif}img{width:100%;height:100%;object-fit:cover;object-position:center}.nav-sec{position:fixed;top:0;z-index:100;width:100%}.aside-sec{position:fixed;top:0;left:0;width:200px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#575757;border-radius:5px}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}:where(section,article,aside,nav) h1{font-size:2em}