*{margin:0;padding:0;box-sizing:border-box}body{background:#383d3c;font-family:"Lato",sans-serif}.app-body{width:90%;margin-left:10%}@media screen and (max-width:600px){.app-body{width:100%;margin-left:0}}.playlist{position:fixed;left:0;top:0;height:100vh;width:10%;transition:.5s;background:linear-gradient(145deg,#252929,#2c3130);box-shadow:41px 41px 82px #151717,-41px -41px 82px #3e4544;overflow:auto}.playlist:hover{width:30%}.playlist:hover .playlist-item{justify-content:space-between}.playlist:hover .playlist-item div{display:flex}.playlist:hover .playlist-item img{margin-right:10%}.playlist:hover .playlist-item h2{margin-left:10%}.playlist:hover .playlist-item:hover{background-color:#151717}.playlist-item{width:100%;height:100px;margin:5% auto;display:flex;align-items:center;justify-content:center}.playlist-item h2{color:#fff;font-size:1rem}.playlist-item img{border-radius:20px;height:100%}.playlist-item div{display:none;width:100%}.playlist-item:hover{cursor:pointer}@media screen and (max-width:600px){.playlist{position:fixed;left:0;bottom:0;top:unset;height:10vh;width:100%;transition:.5s;background:linear-gradient(145deg,#252929,#2c3130);box-shadow:41px 41px 82px #151717,-41px -41px 82px #3e4544;overflow:auto;display:flex}.playlist:hover{width:100%;height:15vh}.playlist:hover .playlist-item{justify-content:space-evenly}.playlist:hover .playlist-item div{display:none}.playlist:hover .playlist-item img{margin-left:inherit;margin-right:inherit}.playlist:hover .playlist-item h2{margin-left:inherit}.playlist:hover .playlist-item:hover{background-color:transparent}.playlist-item{width:20%;height:60%;display:flex;align-items:center;justify-content:center;margin:auto}.playlist-item h2{color:#fff;font-size:1rem}.playlist-item img{border-radius:20%;height:100%}.playlist-item div{display:none;width:100%}.playlist-item:hover{cursor:pointer}}.player{flex-direction:column;margin-top:1%}.input,.player{display:flex;align-items:center;justify-content:center}.input{width:50%}.input input{width:100%;padding:1rem 0}.input input[type=range]{-webkit-appearance:none;padding:0;outline:none;color:#fff;opacity:.8;border-radius:50px;box-sizing:border-box;transition:opacity .2s;cursor:pointer;background:linear-gradient(145deg,#323736,#3c4140);box-shadow:2px 2px 3px #282c2b,-2px -2px 3px #484e4d}.input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:.5rem;height:1rem;padding:.25em;border-radius:50px;background:red;box-shadow:1px 1px 3px red,-1px -1px 3px red}.input input[type=range]::-moz-range-thumb{-moz-appearance:none;width:.5rem;height:1rem;padding:.25em;border-radius:50px;background:red;box-shadow:1px 1px 3px red,-1px -1px 3px red}.input input[type=range]::-ms-thumb{width:.5rem;height:1rem;padding:.25em;border-radius:50px;background:red;box-shadow:1px 1px 3px red,-1px -1px 3px red}.input p{padding:1rem;color:#fff}.control{width:30%;display:flex;align-items:center;justify-content:space-evenly}.control svg{color:#fff}.control svg:hover{cursor:pointer}.circle{padding:1rem;border-radius:50%;background:linear-gradient(145deg,#323736,#3c4140);box-shadow:7px 7px 15px #282c2b,-7px -7px 15px #484e4d}@media screen and (max-width:600px){.control,.input{width:90%}}.song{margin-top:5%;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.song h1{color:#fff}.song img{padding:1rem;border-radius:50px;background:#383d3c;box-shadow:20px 20px 40px #282c2b,-20px -20px 40px #484e4d}.song img:hover{cursor:pointer}@media screen and (max-width:600px){.song h1{font-size:1.5rem}.song img{height:auto;width:70%}}
/*# sourceMappingURL=main.a6e6f81f.chunk.css.map */