.card{width:100%;height:85dvh;overflow-y:auto;padding:25px;box-sizing:border-box}.card .nav{display:flex;width:100%;justify-content:center}.card .nav span{margin-left:5%;margin-right:10%;text-align:center;font-size:calc(.4em + 1vw)}.card .portrait{display:flex;justify-content:center;width:100%;height:100px;align-items:center;position:relative;margin-top:3%}.card .portrait img{width:calc(5.5em + 1vw);height:calc(5.5em + 1vw);object-fit:cover;justify-content:center;align-content:center;border-radius:50%}.card .details{width:100%;text-align:center}.card .details .title{color:#d3d3d3;font-size:calc(.5em + 1vw);font-weight:700;white-space:normal;max-height:2.5rem}.card .details .artist{color:#d3d3d3;font-size:calc(.37em + 1vw);font-weight:700;font-style:italic}.card .progressbar{margin-top:15px;--thumb-size: 12px;--thumb-color: rgb(14, 76, 146)}.card .progressbar input{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.card .progressbar input::-webkit-slider-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background:var(--thumb-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.card .progressbar input::-webkit-slider-thumb:hover{background:#0d1b4d}.card .progressbar input::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background:var(--thumb-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.card .progressbar input::-moz-range-thumb:hover{background:#0d1b4d}.card .progressbar input::-ms-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background:var(--thumb-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.card .progressbar input::-ms-thumb{background:#0d1b4d}.card .timer{display:flex;justify-content:space-between;width:100%;font-size:calc(.15em + 1vw);color:#d3d3d3}.card .controls{display:flex;justify-content:space-between;width:100%;align-items:center;margin-top:20px;margin-bottom:30px;position:relative}.card .controls #prev,.card .controls #next{font-size:calc(2em + 1vw)}.card .controls .play{display:flex;width:3.2rem;height:calc(2.7em + 1vw);background:linear-gradient(rgb(255,255,255) 0%,rgb(211,211,211),100%);border-radius:50%;justify-content:center;align-items:center;position:relative}.card .controls .play:before{content:"";position:absolute;height:calc(1.9em + 1vw);width:calc(1.9em + 1vw);border-radius:inherit;background:linear-gradient(#0e4c92,#1e6fba)}.card .controls .play i{background:#fff;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:absolute}@media (orientation: landscape){.centered{transform:translate(80%);transition:transform .5s ease}.shift-left{transform:translate(0)}.card{width:35%;height:auto;margin:auto}}@media (orientation: portrait){.card .nav span{font-size:calc(1.15em + 1vw)}.card .portrait{margin-top:25%}.card .portrait img{width:calc(7.2em + 1vw);height:calc(7.2em + 1vw)}.card .details .title{font-size:calc(1.35em + 1vw)}.card .details .artist{font-size:calc(1.05em + 1vw)}.card .timer{font-size:calc(.75em + 1vw)}.card .controls{margin-top:25%}.card .controls #prev,.card .controls #next{font-size:calc(2.7em + 1vw)}.card .controls .play{height:calc(3.4em + 1vw)}.card .controls .play:before{height:calc(2.6em + 1vw);width:calc(2.6em + 1vw)}}.list{width:100%;overflow-y:scroll;position:absolute;bottom:0;left:0;background:#00416a;color:wheat;box-shadow:0 -5px 10px #000;transform:translate(260%);transition:transform .5s ease;border-radius:10px;z-index:10}.list.show{transform:translate(0)}.loading-div{display:flex;flex-direction:column;height:100%;width:auto;margin-right:2%;margin-left:2%;justify-content:center;text-align:center;z-index:20,}@keyframes goldPulse{0%{background-position:-200% 0}50%{background-position:0 0}to{background-position:200% 0}}.loading{background:linear-gradient(90deg,gold,#fff 25%,gold,#fff 75%,gold);background-clip:text;-webkit-background-clip:text;color:transparent;background-size:400% 100%;animation:goldPulse 1s linear infinite;text-align:center}.list .header{display:flex;width:100%;padding:15px 20px;justify-content:space-between;align-items:center;position:relative;z-index:10}.list .header>div{display:flex;align-items:center}.list .header>div span{font-size:calc(.8em + 1vw);font-weight:700;text-transform:capitalize;color:wheat;margin-left:25px}.genre-selector-div{display:flex;justify-content:center}.genre-selector{background:#00008b;font-size:calc(.7em + 1vw);box-shadow:5px 5px 3px 3px #02025f;color:wheat;text-align:center;border-radius:50px;padding:5px;overflow-y:scroll}.genre-selector::-webkit-scrollbar{width:0px}.genre-selector option{cursor:pointer;font-size:calc(.2em + 1vw)}.list ul{width:100%;height:35dvh;overflow-y:scroll;box-sizing:border-box;overflow-x:hidden}.list ul::-webkit-scrollbar{width:0px}.list ul li{display:flex;justify-content:space-between;width:100%;padding:10px 30px;align-items:center;cursor:pointer;border-bottom:1mm ridge rgba(255,255,255,.6);box-sizing:border-box}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.list ul li:hover{border:1mm ridge rgba(255,255,255,.6);animation:pulse 2s infinite}.list ul li .row span{color:wheat;font-size:calc(.3em + 1vw)}.list ul li .row p{color:wheat;font-size:calc(.1em + 1vw);font-style:italic}.list .duration{font-size:calc(.3em + 1vw);color:wheat}.list ul li.playing{background:#00008b}@media (orientation: landscape){.list{width:55%;height:100dvh;position:relative;top:0;left:0;background:transparent;border-radius:0;border-left:1.5mm ridge rgb(245,245,245);box-shadow:-5px 0 15px 2px #96969666;margin-right:0}.genre-selector{margin-top:1%}.list ul{height:55dvh}}@media (orientation: portrait){.list .header>div span{font-size:calc(1.5em + 1vw)}.genre-selector{font-size:calc(1.4em + 1vw)}.genre-selector option{font-size:calc(1.5em + 1vw)}.list{width:100%;background:transparent;z-index:20}.loading-div{position:absolute}.blurred{-webkit-filter:blur(5px);filter:blur(5px);background:#000c;transition:filter .3s ease}.blurred .portrait,.blurred .details,.blurred .progressbar,.blurred .timer,.blurred .controls{pointer-events:none;opacity:.1;transition:opacity .3s ease-in-out}.portrait:not(.blurred),.details:not(.blurred),.progressbar:not(.blurred),.timer:not(.blurred),.controls:not(.blurred){pointer-events:auto;opacity:1;transition:opacity .3s ease-in-out}.list ul{height:50dvh}.list ul li .row span{font-size:calc(.8em + 1vw)}.list ul li .row p{font-size:calc(.6em + 1vw)}.list .duration{font-size:calc(.7em + 1vw)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.disclaimer{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background-color:#00000080;display:flex;justify-content:center;align-items:center;animation:fadeIn .5s ease-in-out;z-index:30}.disclaimer-content{width:65dvw;background-color:#191919;padding:20px;border-radius:10px;text-align:center;color:#fff;box-shadow:12px 12px 15px #fff3}.disclaimer-content p{font-style:oblique;margin-bottom:30px;font-size:calc(.9em + 1vw)}.disclaimer-content button{padding:10px 20px;background:linear-gradient(to right,#1e90ff,#0b437e);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:calc(.7em + 1vw)}.disclaimer-content button:hover{background:linear-gradient(to right,#ab17b0,#660b6a)}@media (orientation: portrait){.disclaimer-content p{font-size:calc(1.4em + 1vw)}.disclaimer-content button{font-size:calc(1.2em + 1vw)}}body{width:100dvw;min-height:100dvh;background:#000;color:#fff;display:flex;justify-content:center;align-items:center;background-image:url(/assets/bg-img-BQ2ybRQo.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:0;margin:0;font-family:Roboto,sans-serif;scroll-behavior:smooth}.container{width:360px;border-radius:15px;margin:0;padding:0}.header{width:100%;padding-left:0;text-align:center;font-style:italic}.footer{width:100%;display:flex;justify-content:space-between;align-items:center;background:#0006;color:#fff}.footer-text{flex:1;text-align:center;font-weight:700}.contact-icons{display:flex;gap:25%;margin-right:2.5%}.icon{width:20px;height:auto}main{display:flex;flex-direction:column;margin:0;padding:0;border-radius:15px;border:1px solid darkslategrey;box-shadow:0 0 20px #000;overflow:hidden;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}i{cursor:pointer;-webkit-user-select:none;user-select:none}ul{list-style:none}.icon-container{position:relative;display:inline-block}@media (orientation: landscape){.container{width:80dvw}main{flex-direction:row;justify-content:space-between;height:75dvh;align-items:flex-start;align-self:center;align-content:center;overflow-y:auto}}