.song-container{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:60vh;transition:all .5s ease}.song-container h2{padding:2rem 1rem}.song-container h3{font-size:1.5rem}.vinyl{align-items:center;background-image:repeating-radial-gradient(#131313,#131313 5%,#202020 15%);display:flex;height:30rem;justify-content:center;overflow:hidden;position:relative;width:30rem}.vinyl,.vinyl img{border-radius:50%;transition:all .5s ease}.vinyl img{width:65%}.vinyl:after{border-color:hsla(0,0%,100%,.5) transparent;border-style:solid;border-width:250px 70px;content:"";filter:blur(15px);-webkit-filter:blur(15px);position:absolute;-webkit-transform:rotate(120deg);transform:rotate(120deg)}.songCover{-webkit-animation:rotate 25s linear infinite;animation:rotate 25s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}.songCover.active{-webkit-animation-play-state:running;animation-play-state:running}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.player{flex-direction:column;justify-content:space-evenly;min-height:15vh}.player,.time-control{align-items:center;display:flex}.time-control{transition:all .5s ease;width:50%}.time-control input{-webkit-appearance:none;background:transparent;cursor:pointer;width:100%}.time-control input[type=range]:focus{outline:none}.time-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;height:16px;width:16px}.time-control input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;height:16px;width:16px}.time-control p{padding:1rem;-webkit-user-select:none;user-select:none}.play-control{align-items:center;display:flex;justify-content:space-between;padding:1rem;transition:all .5s ease;width:30rem}.play-control svg{cursor:pointer;padding:.5rem;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;width:2rem}.play-control svg:active{-webkit-transform:scale(.8);transform:scale(.8)}.repeat,.shuffle{background:rgba(70,70,70,.9);border-radius:.8rem;color:#fff}.track{border-radius:100px;height:1rem;overflow:hidden;position:relative;width:100%}.volume-control{display:flex;justify-content:space-evenly;transition:all .5s ease;width:30rem}.volume-control input{-webkit-appearance:none;background:transparent;cursor:pointer;width:100%}.volume-control div{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.volume-control .volume-slider{background:#aaa;border-radius:100px;cursor:pointer;height:.5rem;width:100%}.volume-control .volume-slider:hover{background:#929292}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:4px solid #666;border-radius:50%;height:1.5rem;width:1.5rem}.volume-control svg{padding:1rem}.library{box-shadow:2px 2px 50px #fff;height:100%;left:0;opacity:0;overflow-x:hidden;overflow-y:scroll;position:fixed;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:all .5s ease;width:20rem}.library h2{padding:2rem;-webkit-user-select:none;user-select:none}.library span{font-size:.9rem}.library-song{align-items:center;cursor:pointer;display:flex;padding:1rem 2rem;transition:background .5s ease;-webkit-user-select:none;user-select:none}.library-song img{width:30%}.library-song:hover{background:#ccc;margin-bottom:5px;margin-top:5px;-webkit-transform:scale(1.2);transform:scale(1.2)}.library-song h3{font-size:1rem}.library-song h4{font-size:.8rem}.song-description{padding-left:1rem}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:hsla(0,0%,61%,.5);border:transparent;border-radius:20px}.selected{background:#b6b6b6}.active-library{background:#fff;opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}nav{align-items:center;display:flex;justify-content:space-around;min-height:8vh}nav button{background:transparent;border:2px solid #414141;cursor:pointer;padding:.5rem;transition:all .5s ease}nav button:hover{background:#414141;color:#fff}nav h1{font-family:Walter Turncoat,sans-serif;font-size:3rem;-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}@media screen and (max-width:912px){.song-container .vinyl{height:30rem;width:30rem}.song-container img,.time-control,.volume-control{width:70%}nav button{z-index:10}.library{width:100%}}@media screen and (max-width:768px){.song-container .vinyl{height:25rem;width:25rem}.song-container img{width:65%}.song-container .vinyl:after{border-width:210px 70px}.time-control,.volume-control{width:70%}nav button{z-index:10}.library{width:100%}}@media screen and (max-width:540px){.song-container .vinyl{height:25rem;width:25rem}.song-container img{width:60%}.song-container .vinyl:after{border-width:180px 65px}.time-control,.volume-control{width:70%}nav button{z-index:10}.library{width:100vw}}@media screen and (max-height:720),screen and (max-width:540px){.song-container .vinyl{height:20rem;width:20rem}.song-container img{width:60%}.song-container .vinyl:after{border-width:180px 65px}.time-control,.volume-control{width:70%}nav button{z-index:10}.library{width:100vw}}@media screen and (max-width:414px){.song-container .vinyl{height:20rem;width:20rem}.song-container img{width:60%}.song-container .vinyl:after{border-width:170px 60px}.play-control,.time-control,.volume-control{width:90%}nav h1{font-size:2rem}nav button{z-index:10}.library{width:100vw}.song-container{min-height:55vh}}@media screen and (max-width:375px){.song-container .vinyl{height:14rem;width:14rem}.song-container img{width:70%}.song-container .vinyl:after{border-width:120px 40px}.play-control,.time-control,.volume-control{font-size:.8rem;width:90%}nav h1{font-size:2rem}nav button{z-index:10}.library{width:100vw}.song-container{min-height:55vh}}*{box-sizing:border-box;margin:0;padding:0;scrollbar-color:hsla(0,0%,61%,.5) transparent;scrollbar-width:thin}body{font-family:Lato,sans-serif}h1,h2,h3{color:#363636}h3,h4{color:#646464;font-weight:400}.App{position:relative;transition:all .5s ease}.library-active{padding-left:20%}.container{height:100vh;left:0;opacity:.4;position:absolute;top:0;width:100vw;z-index:-1}a{color:inherit;text-decoration:none}
/*# sourceMappingURL=main.41091b91.css.map*/