*,::after,::before{margin:0;padding:0;box-sizing:border-box}:root{--color-title-200:#ff3964;--color-text-100:#fff;--color-text-200:#f2f2f2;--color-text-400:#e4e4e4;--color-text-600:#dbdbdb;--color-text-800:#bdbdbd;--color-bg-400:#160b28;--color-bg-600:rgba(0, 0, 0, 0.15);--color-bg-800:rgba(0, 0, 0, 0.3);--color-active-200:hsla(246, 100%, 61%, 0.8);--color-active-400:hsl(246, 100%, 61%);--color-new:#3988ff;--nav-gradient:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));--font-primary:"Poppins",sans-serif;--font-secondary:"Righteous",Arial,sans-serif;--nav-bar-height:8vh}:root[data-theme=light]{--color-title-200:#ff3964;--color-text-100:#000;--color-text-200:#333;--color-text-400:#2b2b2b;--color-text-600:#252525;--color-text-800:#161616;--color-bg-400:#ddf1f7;--color-bg-600:#c7e1e9;--color-bg-800:#b5d5df;--color-active-200:#2ad4ff;--color-active-400:#39c7ff;--color-new:#3988ff;--nav-gradient:linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3))}body{font-family:var(--font-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg-400);color:var(--color-text-100);font-size:12px;min-height:100vh}.container{width:90%;margin:0 auto}.nav-bar{height:var(--nav-bar-height);background:var(--nav-gradient);display:flex;align-items:center}.nav-bar .container{display:grid;grid-template-columns:40% auto;align-items:center}.nav-bar .logo__wrapper{display:flex;flex-wrap:wrap;align-items:flex-end}.nav-bar .logo__wrapper .logo{font-family:var(--font-secondary);text-transform:uppercase;color:var(--color-title-200);background:linear-gradient(to right,var(--color-title-200),var(--color-new));-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent}.nav-bar .logo__wrapper p{font-size:.65rem;color:var(--color-text-600)}.nav-bar .logo__wrapper p span{color:var(--color-new)}.nav-bar .social-icon__wrapper{justify-self:right}.nav-bar .social-icon__wrapper a{color:var(--color-text-100);text-decoration:none}.nav-bar .social-icon__wrapper a:not(:first-of-type){margin-left:1rem}.nav-bar .social-icon__wrapper a:active,.nav-bar .social-icon__wrapper a:hover{color:var(--color-title-200)}.hero-area{padding:2em 0;padding-bottom:3.5rem}.hero-area i{font-weight:200;color:var(--color-text-600);opacity:.1;z-index:-1;position:absolute;top:0;right:0}.hero-area .title_player__wrapper{display:flex;flex-wrap:wrap;align-items:center}.hero-area .title_player__wrapper>*{width:100%}.hero-area .title{line-height:2;padding:1.5em 0}.hero-area .title .main-title{line-height:1;font-family:var(--font-secondary);font-weight:400;letter-spacing:1px}.hero-area .title .main-title h1{display:inline-block;text-transform:uppercase;font-size:3.15rem;color:var(--color-title-200);background:linear-gradient(132deg,var(--color-title-200),var(--color-new));-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent}.hero-area .title .main-title h2{font-size:2rem;color:var(--color-text-600)}.hero-area .title h3{opacity:.5;font-weight:500}.hero-area .title h3:not(:first-of-type){margin-top:.4rem}.search-bar__container{margin:0 auto;height:32pt;width:90%;max-width:400px;border-radius:8px;display:flex;justify-content:center;flex-direction:column;position:relative}.search-bar__container span{position:absolute;padding:.5em 1rem;pointer-events:none;opacity:0;transition:transform .2s ease-in-out,opacity .2s ease-in-out}.search-bar__container span:active,.search-bar__container span:focus{outline:0}.search-bar__container input[type=input]{height:32pt;width:100%;background-color:transparent;border:none;border:.1rem solid var(--color-active-400);border-radius:8vh;padding:0 3.65rem 0 3.65rem;color:var(--color-text-200)}.search-bar__container input[type=input]:active,.search-bar__container input[type=input]:focus{outline:0;box-shadow:0 0 8px var(--color-active-200)}.search-bar__container input[type=input]:active+span,.search-bar__container input[type=input]:focus+span{outline:0;transform:translateY(-130%);opacity:1}.search-bar__container input[type=input]:active~.search-btn,.search-bar__container input[type=input]:focus~.search-btn{opacity:1}.search-bar__container input[type=input]:active~.cancel-btn,.search-bar__container input[type=input]:focus~.cancel-btn{opacity:1;color:#919191}.search-bar__container input[type=input]:active~.cancel-btn:hover,.search-bar__container input[type=input]:focus~.cancel-btn:hover{color:#ff2a3c}.search-bar__container input[type=input]:focus::placeholder{opacity:0;transition:opacity .1s ease-in-out}.search-bar__container button{position:absolute;top:50%;cursor:pointer;background-color:transparent;border:none;height:32pt;width:32pt;color:var(--color-text-100);opacity:.5;font-size:1rem}.search-bar__container button:active,.search-bar__container button:focus,.search-bar__container button:hover{outline:0}.search-bar__container .search-btn{left:0;transform:translate(10%,-48%)}.search-bar__container .cancel-btn{right:0;transform:translate(-10%,-50%);opacity:0;transition:.2s ease}.results__container{min-height:48vh;width:90%;margin:0 auto;margin-top:2rem;padding:1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:1rem;row-gap:1rem;background-color:var(--color-bg-600);border-radius:8px}.song__container{display:grid;grid-template-columns:65px auto;grid-template-rows:1fr auto;column-gap:1rem;row-gap:10px;padding:.65rem;border-radius:4px;background-color:var(--color-bg-800)}.song__container .song-image{width:100%;border-radius:2px}.song__container .song-info__wrapper{position:relative}.song__container .song-info__wrapper .song-album,.song__container .song-info__wrapper .song-artist,.song__container .song-info__wrapper .song-title{overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.song__container .song-info__wrapper .song-title{font-weight:600;width:18ch}.song__container .song-info__wrapper .song-album{font-size:.85rem;opacity:.85;width:20ch}.song__container .song-info__wrapper .song-album .song-year{font-size:.65rem;opacity:.65}.song__container .song-info__wrapper .song-artist{font-size:.65rem;width:25ch;opacity:.65}.song__container .song-info__wrapper button{background-color:transparent;border:none;color:var(--color-active-400);font-size:1rem;position:absolute;top:0;right:0;opacity:.5}.song__container .song-info__wrapper button:active,.song__container .song-info__wrapper button:focus,.song__container .song-info__wrapper button:hover{opacity:1}.song__container .song-info__wrapper :active,.song__container .song-info__wrapper :focus,.song__container .song-info__wrapper :hover{outline:0}.song__container .song-btn__container{width:100%;grid-column:1/3;display:flex;align-items:center;justify-content:flex-end}.song__container .toggle-btn{border:none;background-color:#4169e1;height:25pt;width:25pt;color:#fff;border-radius:50%}.song__container .toggle-btn:focus{outline:0;box-shadow:0 0 8px #4169e1}.song__container .toggle-btn:active,.song__container .toggle-btn:hover{background-color:hsla(225,73%,57%,.8)}.song__container .toggle-btn:not(:last-of-type){margin-right:1rem}.song__container .play__btn{padding-left:.2rem}.song__container :active,.song__container :focus,.song__container :hover,.song__container:active,.song__container:focus,.song__container:hover{outline:0}.song__container:active,.song__container:focus{box-shadow:0 0 8px #2787a4}.song__container.active .song-title{color:var(--color-active-200)}.player{height:11vh;padding:.5rem 1rem;margin-bottom:3rem;border-radius:8px;background-color:var(--color-bg-800);box-shadow:-6px -6px 15px rgba(255,255,255,.1),6px 6px 15px rgba(0,0,0,.5);display:grid;grid-template-columns:auto 1fr auto;column-gap:1rem;align-items:center;position:relative;overflow:hidden}.player::before{content:"";height:2px;width:0%;border-radius:1rem;background-color:var(--color-text-100);opacity:.5;position:absolute;top:0;left:0;transform:translateY(100%);animation:progress 225s linear infinite}.player .other-btn__wrapper{display:flex;align-items:center}.player .other-btn__wrapper button:not(:first-of-type){margin-left:1rem}.player button{height:28pt;width:28pt;border-radius:50%;border:none;font-size:1.5rem;background-color:transparent;color:var(--color-active-400);box-shadow:-2px -2px 5px rgba(255,255,255,.1),2px 2px 5px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.player .play-btn{height:42pt;width:42pt;padding-left:5px;font-size:2rem}.player .stop-btn{font-size:1.25rem}.player button:focus{outline:0;box-shadow:0 0 10px var(--color-title-200)}.player button:active{outline:0;background:linear-gradient(132deg,var(--color-title-200),var(--color-new));color:var(--color-bg-400)}.player .visualizer__wrapper{display:grid;grid-template-rows:auto 1fr;row-gap:5px}.player .visualizer__wrapper .song-time{letter-spacing:2px;font-size:.5rem;opacity:.8}.player .visualizer__wrapper .visualizer{opacity:.85;height:35px;width:100%;border-bottom:2px solid var(--color-text-100);display:flex;justify-content:space-evenly;align-items:flex-end}.player .visualizer__wrapper .visualizer>*{height:0;width:10px;background-color:var(--color-text-100);border-radius:1em 1em 0 0}.player .visualizer__wrapper .visualizer .line1{animation:updown-small .5s ease-in-out infinite;animation-delay:.3s}.player .visualizer__wrapper .visualizer .line2{animation:updown .5s ease-in-out infinite;animation-delay:.2s}.player .visualizer__wrapper .visualizer .line3{animation:updown .5s ease-in-out infinite;animation-delay:.1s}.player .visualizer__wrapper .visualizer .line4{animation:updown .5s ease-in-out infinite;animation-delay:.25s}.player .visualizer__wrapper .visualizer .line5{animation:updown-small .5s ease-in-out infinite;animation-delay:.4s}.toggle-btn.active{background:linear-gradient(132deg,var(--color-title-200),var(--color-new));color:var(--color-bg-400);padding-left:unset;background-size:200%;background-position:top left;animation:button 1.65s ease-in-out infinite}@keyframes progress{to{width:100%}}@keyframes button{0%{background-position:top left}50%{background-position:bottom right}100%{background-position:top left}}@keyframes updown{0%{height:0%}50%{height:90%}100%{height:0%}}@keyframes updown-small{0%{height:0%}50%{height:40%}100%{height:0%}}@media screen and (max-width:441px){body{font-size:12px}.social-icon__wrapper a{font-size:1.2rem}.hero-area i{font-size:40vw}}@media screen and (min-width:441px){.hero-area i{font-size:20vw}}@media screen and (min-width:961px){body{font-size:16px}.container{width:80%;max-width:1350px}.hero-area .title_player__wrapper>*{height:200px;width:50%}.hero-area .title{padding:0}.search-bar__container input[type=search]:active+span,.search-bar__container input[type=search]:focus+span{outline:0;transform:translateY(-100%);opacity:1}.song__container{display:grid;grid-template-columns:100%;column-gap:unset;grid-template-rows:auto 20% auto;row-gap:1rem}.song__container .song-btn__container{grid-column:unset;justify-content:flex-start}}