*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Lato",sans-serif;background:linear-gradient(#252424,#0f0f0f)}h1,h2,h3{color:#e6d8d8}h3,h4{font-weight:400;color:#c2c0c0}.App{transition:all .5s ease;position:relative;overflow:hidden;height:100vh}.library-active{margin-left:30%}.song-container{min-height:65vh;width:90vw;margin:0 auto;flex-direction:column;z-index:2;box-shadow:0 15px 15px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.image,.song-container{display:flex;align-items:center;justify-content:center;position:relative}.image{width:20%}.square-1{width:45%;height:45%;top:0;left:-5%}.square-1,.square-2{position:absolute;transform-origin:center;transform-box:fill-box;box-shadow:0 6px 6px rgba(0,0,0,.2);border-radius:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.square-2{width:30%;height:30%;bottom:0;right:0}img{width:100%;border-radius:50%}h2{padding:3rem 1rem 1rem}h3{font-size:1rem}@media screen and (max-width:768px){.song-container .image{width:60%}.song-container .image img{width:100%}}.animate-play{-webkit-animation:squares 5s linear infinite forwards;animation:squares 5s linear infinite forwards}@-webkit-keyframes squares{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes squares{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.player{min-height:20vh;width:60vw;margin:1rem auto;flex-direction:column;justify-content:space-between;position:relative;z-index:2;padding:2rem 0;box-shadow:0 15px 15px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.player,.time-control{display:flex;align-items:center}.time-control{width:100%;max-width:750px}.time-control input{width:100%;-webkit-appearance:none;background-color:transparent;cursor:pointer}.time-control p{padding:1rem;color:#e6d8d8}.play-control{display:flex;justify-content:space-between;align-items:center;padding:1rem;width:70%;max-width:600px}.play-control svg{cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px}input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:transparent;border:none}.track{background:#add8e6;width:100%;height:1rem;position:relative;border-radius:1rem;overflow:hidden}.animate-track{background:#ccc;width:100%;height:100%;position:absolute;top:0;left:0;transform:translateX(0);pointer-events:none}@media screen and (max-width:768px){.player{width:90vw;height:18vh;padding:.5rem}.player h1{font-size:1.2rem}.time-control{width:90%}.play-control{width:80%;padding:0}}.library{position:fixed;top:0;left:0;width:20rem;height:100%;z-index:11;box-shadow:0 15px 15px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:scroll;transform:translateX(-100%);transition:all .5s ease;opacity:0}.library h2{padding:2rem}.library-song{display:flex;align-items:center;padding:1rem 2rem;cursor:pointer;transition:background .3s ease}.library-song img{width:30%;border-radius:0}.library-song:hover{background:rgba(43,43,43,.2)}.song-description{padding-left:1rem}.song-description h3{font-size:1rem}.song-description h4{font-size:.7rem}*{scrollbar-width:thin;scrollbar-color:hsla(0,0%,60.8%,.5) transparent}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:hsla(0,0%,60.8%,.5);border-radius:20px;border:transparent}.selected{background:rgba(43,43,43,.4)}.active-playlist{transform:translateX(0);opacity:1}@media screen and (max-width:768px){.library{width:100%}}nav{min-height:10vh;justify-content:space-around;position:relative}nav,nav .left{display:flex;align-items:center}nav .left{justify-content:center}nav .left .logo{padding:.7rem;border:1px solid #e6d8d8;border-radius:50%;box-shadow:0 2px 2px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}nav .left .logo svg{color:#e6d8d8}nav .left h1{margin-left:.5rem}nav button{background:transparent;border:none;outline:none;cursor:pointer;padding:.8rem;transition:all .3s ease;box-shadow:0 4px 4px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e6d8d8}nav button:hover{background:rgba(65,65,65,.5);color:#fff}nav button svg{margin-left:.5rem}@media screen and (max-width:768px){nav .left svg{font-size:1.2rem}nav .left h1{font-size:.9rem}nav button{z-index:12}}.triangle{position:fixed;z-index:0;top:0;left:0;width:400px;height:400px;background:linear-gradient(#fa7b16,#eb5351);-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%)}.square{left:50%;top:50%;transform:translate(-50%,-50%);width:450px;height:450px;background:linear-gradient(red,#e64467);border-radius:20%}.circle,.square{position:absolute}.circle{bottom:0;right:-20%;width:500px;height:500px;background:linear-gradient(red,#f0f);border-radius:50%}.play-btn{padding:1rem 1.5rem;background-color:hsla(0,0%,52.5%,.2);box-shadow:0 15px 15px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}.play-btn svg{position:relative;z-index:1;color:rgba(253,249,249,.5);transition:color .3s ease}.play-btn svg:hover{color:rgba(253,249,249,.7)}.play-btn .play-circle{width:30px;height:30px;border-radius:50%;position:absolute;top:50%;left:70%;transform:translate(-50%,-50%);z-index:0;background-color:rgba(172,32,32,.7);-webkit-filter:blur(5px);filter:blur(5px);transition:all .3s ease}.play-btn svg:hover~.play-circle{-webkit-filter:blur(8px);filter:blur(8px)}@media screen and (max-width:768px){.play-btn{padding:.5rem 1.2rem}.play-btn svg{font-size:1rem}}.next-btn{padding:1rem 1.5rem;background-color:hsla(0,0%,52.5%,.2);box-shadow:0 15px 15px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;transition:all .3s ease}.next-btn svg{position:relative;z-index:1;color:rgba(253,249,249,.5);transition:color .3s ease}.next-btn svg:hover{color:rgba(253,249,249,.7)}.next-btn .next-triangle{position:absolute;top:50%;left:65%;transform:translate(-50%,-50%) rotate(90deg);width:2rem;height:2rem;background:linear-gradient(rgba(250,123,22,.7),rgba(235,83,81,.1));-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);z-index:0;transition:opacity .3s ease}.next-btn svg:hover~.next-triangle{opacity:.5}@media screen and (max-width:768px){.next-btn{padding:.3rem 1rem}.next-btn svg{font-size:1rem}}.prev-btn{padding:1rem 1.5rem;background-color:hsla(0,0%,52.5%,.2);box-shadow:0 15px 15px rgba(0,0,0,.5);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;transition:all .3s ease}.prev-btn svg{position:relative;z-index:1;color:rgba(253,249,249,.5);transition:color .3s ease}.prev-btn svg:hover{color:rgba(253,249,249,.7)}.prev-btn .prev-triangle{position:absolute;top:50%;left:35%;transform:translate(-50%,-50%) rotate(-90deg);width:2rem;height:2rem;background:linear-gradient(rgba(250,123,22,.7),rgba(235,83,81,.1));-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);z-index:0;transition:opacity .3s ease}.prev-btn svg:hover~.prev-triangle{opacity:.5}@media screen and (max-width:768px){.prev-btn{padding:.3rem 1rem}.prev-btn svg{font-size:1rem}}
/*# sourceMappingURL=main.485def16.chunk.css.map */