*{margin:0;padding:0;box-sizing:border-box}h1,h2,h3{color:#363636}body{font-family:"Lato",sans-serif}h3,h4{font-weight:400;color:#646464}.library-active{margin-left:10%}.App{transition:all .3s ease}.rotate-track-img{animation:rotate-track 15s linear infinite}@keyframes rotate-track{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.track-container{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(120,121,119,.3);padding:1rem}.track-container img{border-radius:50%;width:20em;height:20em}.track-container h2{padding:3rem 1rem 1rem}.track-container h3{font-size:1rem}@media screen and (max-width:768px){.track-container img{width:80%}}.player{flex-direction:column;margin-bottom:3rem}.player,.player-control{display:flex;align-items:center}.player-control{justify-content:space-between;padding:1rem;width:30%}.player-control svg{cursor:pointer}.time-control{width:50%;display:flex}.time-control input{width:100%;padding:1rem 2rem}.time-control p{padding:1rem}@media screen and (max-width:768px){.time-control{width:90%}.play-control{width:60%}.player-control{width:80%}}nav{min-height:10vh;display:flex;justify-content:space-around;align-items:center}nav button{background:transparent;cursor:pointer;border:2px solid #1c2524;padding:.5rem;transition:all .3s ease;margin-left:10em}nav button:hover{background:#414141;color:#fff}@media screen and (max-width:768px){nav button{z-index:5}}.library{position:fixed;top:0;left:0;width:24rem;height:100%;background-color:#aeafaf;box-shadow:2px 2px 50px #565c5b;overflow:scroll;transition:all .5s ease;opacity:0;z-index:4}.library h2{padding:2rem}.library-track{display:flex;align-items:center;padding:1rem 2rem;cursor:pointer;transition:background-color .5s ease}.library-track img{width:30%}.library-track:hover{background-color:#c4c6c7}.track-description{padding-left:1rem}.track-description h3{font-size:1rem}.track-description h4{font-size:.7rem}*{scrollbar-width:thin;scrollbar-color:hsla(0,0%,60.8%,.7) transparent}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:20px;border:transparent;background:hsla(0,0%,60.8%,.7)}.selected{background-color:#f4f6f7}.active-library{transform:translateX(0);opacity:1}@media screen and (max-width:768px){.library{width:100%}}.footer{bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;min-height:25px}
/*# sourceMappingURL=main.e874f995.chunk.css.map */