@import url(https://fonts.googleapis.com/css2?family=Kablammo&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap);:root{--main-font:"Mali";--font-2:"Kablammo";--font-3:"Sour Gummy"}*,:after,:before{box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth}html{font-size:62.5%}body{font-family:Mali;font-family:var(--main-font);font-weight:500}.app,body{height:100vh}.app{grid-gap:.5rem 1rem;background-color:#1c1f26;display:grid;gap:.5rem 1rem;grid-template-columns:25rem 1fr;overflow:hidden}button{background-color:initial;border:none;cursor:pointer}.header{align-items:center;background-color:#020c1b;color:#f1f1f1;display:flex;grid-column:1/-1;height:6rem;justify-content:space-between;padding:max(1rem,2vw)}.header .header-actions{display:none}.header .header-actions .favorite{font-size:clamp(1.8rem,4vw,2.4rem)}.logo svg{fill:#f1f1f1;font-size:clamp(2.4rem,6vw,4rem)}.sidebar{background-color:#1a1b1e;border-radius:1rem;height:calc(100vh - 6.5rem);margin-left:.5rem;position:relative}.sidebar form{height:3.6rem}.sidebar ul{max-height:calc(100% - 8.6rem);overflow-y:auto}.sidebar .pagination{background-color:#020c1b;height:5rem}.main{position:relative}.main .details{background:linear-gradient(#1a1b1e80,#1a1b1e80);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:1rem;color:#020c1b;display:grid;height:100%;margin-right:.5rem;padding:max(1rem,1vw)}.main .details .song{border-radius:1rem 1rem 0 0}.main .details .artist,.main .details .song{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:#fff3}.main .details .artist{align-items:center;display:flex;gap:.5rem;padding:max(.5rem,1vw)}.main .details .artist img{border-radius:50%;height:3rem;width:3rem}.main .details .artist .name{font-size:clamp(1.1rem,2vw,1.2rem)}.main .details .lyric{-webkit-backdrop-filter:blur(.3rem);backdrop-filter:blur(.3rem);background-color:#0e0e0e33;border-radius:0 0 1rem 1rem;color:#f1f1f1;font-size:clamp(1.1rem,2vw,1.4rem);height:41rem;line-height:1.8;overflow-x:hidden;overflow-y:auto;padding-block:2rem;text-align:center}.form{display:flex;position:relative;width:100%}.form input{background-color:initial;border:none;border-radius:1rem 1rem 0 0;box-shadow:.2rem 0 1rem #00000080;color:#7d0ecc;margin-right:-2.75rem;outline:none;padding:1rem .75rem;width:100%}.form input::placeholder{color:#666368;font-family:Mali;font-family:var(--main-font);font-size:1.1rem}.form button{align-items:center;align-self:center;background-color:#7d0ecc;border-radius:50%;color:#e7e4e4;display:flex;justify-content:center;padding:.5rem;z-index:10}.list{list-style:none}.list li{align-items:center;background-color:#020c1b;color:#f1f1f1;cursor:pointer;display:flex;padding:1rem max(.5rem,.5vw);position:relative;&:not(:last-child){margin-bottom:.1rem}}.list li>*{z-index:10}.list li:before{background-color:#7d0ecc;clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%);content:"";height:100%;left:0;position:absolute;top:0;transition:width .4s cubic-bezier(.23,1,.32,1);width:0}.list li:hover{filter:invert(5%)}.list li.active{&:before{width:40%}}.list li figure{border-radius:50%;height:3rem;margin-right:.75rem;width:3rem}.list li figure img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.pagination{-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);bottom:0;display:flex;justify-content:space-between;padding:.75rem 1rem;position:fixed;width:24.6rem;z-index:100}.pagination button{background-color:#e74c3c;border-radius:50%;color:#f1f1f1;line-height:0;padding:1rem;transform-origin:bottom left;transition:all .4s}.pagination button:hover{transform:scale(1.5)}.pagination .next{margin-left:auto}.socket{height:200px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:200px}.hex-brick{animation-duration:2s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-name:fade00;-webkit-animation-name:fade00;background:#7d0ecc;height:17px;position:absolute;top:5px;width:30px}.h2{transform:rotate(60deg);-webkit-transform:rotate(60deg)}.h3{transform:rotate(-60deg);-webkit-transform:rotate(-60deg)}.gel{height:30px;left:50%;position:absolute;top:50%;transition:all .3s;-webkit-transition:all .3s;width:30px}.center-gel{animation-duration:2s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-name:pulse00;-webkit-animation-name:pulse00;margin-left:-15px}.c1,.center-gel{margin-top:-15px}.c1{margin-left:-47px}.c2{margin-left:-31px}.c2,.c3{margin-top:-43px}.c3{margin-left:1px}.c4{margin-left:17px;margin-top:-15px}.c5{margin-left:-31px}.c5,.c6{margin-top:13px}.c6{margin-left:1px}.c7{margin-left:-63px}.c7,.c8{margin-top:-43px}.c8{margin-left:33px}.c9{margin-left:-15px;margin-top:41px}.c10{margin-left:-63px}.c10,.c11{margin-top:13px}.c11{margin-left:33px}.c12{margin-left:-15px}.c12,.c13{margin-top:-71px}.c13{margin-left:-47px}.c14{margin-left:17px;margin-top:-71px}.c15{margin-left:-47px}.c15,.c16{margin-top:41px}.c16{margin-left:17px}.c17{margin-left:-79px}.c17,.c18{margin-top:-15px}.c18{margin-left:49px}.c19{margin-left:-63px}.c19,.c20{margin-top:-99px}.c20{margin-left:33px}.c21{margin-left:1px}.c21,.c22{margin-top:-99px}.c22{margin-left:-31px}.c23{margin-left:-63px}.c23,.c24{margin-top:69px}.c24{margin-left:33px}.c25{margin-left:1px}.c25,.c26{margin-top:69px}.c26{margin-left:-31px}.c27{margin-left:-79px;margin-top:-15px}.c28{margin-top:-43px}.c28,.c29{margin-left:-95px}.c29{margin-top:13px}.c30{margin-left:49px;margin-top:41px}.c31{margin-left:-79px;margin-top:-71px}.c32{margin-left:-111px;margin-top:-15px}.c33{margin-top:-43px}.c33,.c34{margin-left:65px}.c34{margin-top:13px}.c35{margin-left:-79px;margin-top:41px}.c36{margin-left:49px;margin-top:-71px}.c37{margin-left:81px;margin-top:-15px}.r1{animation-delay:.2s;-webkit-animation-delay:.2s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-name:pulse00}.r1,.r2{animation-duration:2s;animation-name:pulse00}.r2{animation-delay:.4s;-webkit-animation-delay:.4s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-name:pulse00}.r3{animation-delay:.6s;-webkit-animation-delay:.6s;animation-duration:2s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-name:pulse00;-webkit-animation-name:pulse00}.r1>.hex-brick{animation-delay:.2s;-webkit-animation-delay:.2s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-name:fade00}.r1>.hex-brick,.r2>.hex-brick{animation-duration:2s;animation-name:fade00}.r2>.hex-brick{animation-delay:.4s;-webkit-animation-delay:.4s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-name:fade00}.r3>.hex-brick{animation-delay:.6s;-webkit-animation-delay:.6s;animation-duration:2s;-webkit-animation-duration:2s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-name:fade00;-webkit-animation-name:fade00}@keyframes pulse00{0%{transform:scale(1)}50%{transform:scale(.01)}to{transform:scale(1)}}@keyframes fade00{0%{background:#9533db}50%{background:#7d0ecc}to{background:#9029d9}}.scrollbar{&::-webkit-scrollbar{width:.25rem}&::-webkit-scrollbar-track{background:#020c1b}&::-webkit-scrollbar-thumb{background-color:#7d0ecc;border-radius:10rem}}@media (max-width:600px){.app{gap:0;grid-template-columns:auto}.header .header-actions{display:block}.header h2{text-align:center}.details{border-radius:0!important;height:calc(100vh - 6rem)!important;margin-right:0!important}.sidebar{left:-100%;margin-left:0;opacity:0;position:absolute;top:6rem;transition:all .4s;visibility:hidden;width:min(25rem,100%);z-index:20}.sidebar.active{left:0;opacity:1;visibility:visible}}
/*# sourceMappingURL=main.bbabaa77.css.map*/