*{margin:0;padding:0;box-sizing:border-box;--primary-color:#ff7a30;--meta-color:#12181b}body{font-family:"Montserrat",sans-serif;background-color:#1b1b1b}@media only screen and (max-width:600px){body{margin-bottom:5rem}}.App{transition:all .5s ease}.library-active{margin-left:20%}@media only screen and (max-width:600px){.library-active{margin-left:20%}.library-active .player,.library-active .song-container{display:none}}h1{font-size:1rem}h2{color:#333}h3,h4{color:#646464;font-weight:400}.song-container{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-left:100px}@media only screen and (max-width:600px){.song-container{margin-left:0}}.song-container img{width:23%;border-radius:50%}.song-container h2{padding:3rem 1rem 1rem;color:#fff}.song-container h3{font-size:1rem}@media screen and (max-width:600px){.song-container img{width:45%}}@media screen and (max-width:600px){.song-container h2{padding:2rem 1rem 1rem;color:#fff}}.rotateSong{animation:rotate 20s linear infinite forwards}.player{min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin-left:100px}@media only screen and (max-width:600px){.player{margin-left:0;min-height:10vh;justify-content:center}}.time-control{width:50%;display:flex;align-items:center}.time-control input{width:100%;-webkit-appearance:none;background:transparent;cursor:pointer}.time-control p{padding:1rem;color:#fff}@media only screen and (max-width:600px){.time-control{margin-top:-1.5rem}}.play-control{display:flex;justify-content:space-between;align-items:center;padding:2rem;margin:0;width:40%;color:#fff}.play-control svg{cursor:pointer}@media only screen and (max-width:600px){.play-control{padding:1.5rem}}.track{width:100%;height:1rem;position:relative;overflow:hidden;border-radius:1rem}.animate-track{background:#ccc;width:100%;height:100%;position:absolute;top:0;left:0;transform:translateX(0);padding:1rem;pointer-events:none}@media only screen and (max-width:600px){.animate-track{padding:0}}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px}@media screen and (max-width:768px){.time-control{width:90%}.play-control{width:80%}}.library{position:fixed;box-shadow:2px 2px 50px rgba(255,120,48,0);top:0;left:0;width:20rem;height:100%;overflow:scroll;background:linear-gradient(to right top,var(--meta-color),hsla(0,0%,40.8%,.1647058824));transform:translateX(-100%);transition:all .5s ease;opacity:0;margin-left:100px}@media only screen and (max-width:600px){.library{margin-left:0;width:20%}}.library h2{padding:2rem;color:#fff}.library-song{display:flex;align-items:center;padding:1rem 2rem 1rem 1.5rem;cursor:pointer;transition:all .75s ease-out}.library-song img{width:30%;border-radius:5px;margin-left:0}.library-song:hover:not(.selected){background:rgba(255,120,48,.1294117647)}.library-song .active{color:var(--primary-color)}.song-description{padding-left:1rem}.song-description h3{font-size:1rem;color:#a7a7a7;padding-left:0}.song-description h4{padding-top:.2rem;font-size:.7rem;color:#fff}*{scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.7) transparent}.library::-webkit-scrollbar{width:2px;height:100%}.library::-webkit-scrollbar-track{background:none;border:none}.library::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:50px;border:transparent}.selected{background:rgba(18,24,27,.3882352941)}.active-library{transform:translateX(0);opacity:1}@media screen and (max-width:600px){.library{width:67%;background:linear-gradient(to right top,var(--meta-color),rgba(24,24,24,.9607843137))}}nav{margin-top:15px;margin-left:100px;min-height:10vh;display:flex;justify-content:space-around;align-items:center}@media only screen and (max-width:600px){nav{margin-left:0}}nav button{background:transparent;border:none;cursor:pointer;padding:.5rem 1rem;border:1.5px solid var(--primary-color);color:var(--primary-color);font-weight:600;border-radius:5px;outline:none;transition:all .3s ease}nav .library-active,nav button:hover{border-color:#1b1b1b;background:var(--primary-color);color:var(--meta-color);outline:none}nav .logo{width:5rem;padding-top:10px}@media screen and (max-width:768px){nav button{z-index:10}}
/*# sourceMappingURL=main.f905dd5f.chunk.css.map */