body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{margin:0;padding:0;outline:none;box-sizing:border-box;transition:.2s}.center{display:flex;justify-content:center;align-items:center}.App{position:relative;width:100%;height:100vh;display:flex;flex-direction:row;overflow:hidden}.albums_display{padding:10px;text-align:center;width:25%;background:#fff;transition:.3s ease-in-out}.albums_display h2{margin:30px 0 50px}.albums{flex-direction:column}.albums button{width:100px;font-size:15px;color:#fff;font-weight:700;border:none;outline:none;padding:10px;margin:10px;background:#5d89da;cursor:pointer}.player_con{background:#fad14a;width:40%;padding:10px}header{margin:30px 0 50px}.player,header{text-align:center}.player{border-radius:20px;background:#fbfcd7;height:500px;padding:10px;width:400px;margin:auto;display:grid;grid-template-rows:1.2fr .2fr .2fr .2fr .2fr;box-shadow:-4px -8px 10px hsla(0,0%,100%,.4),4px 8px 10px rgba(0,0,0,.1)}.player img{height:100%;width:100%;border-radius:10px;grid-row:1/2}.player h2{grid-row:2/3}.player h3{grid-row:3/4}.player_controls{grid-row:4/5;justify-content:space-evenly}.player_controls button{background:none;border:none;font-size:30px;cursor:pointer}#play_con{width:50px;height:50px}#play_con img{width:100%;height:100%}.tracks_display{padding:10px;transition:.3s ease-in-out}.tracks_display h2{text-align:center;margin:30px 0 50px}.slider_con{grid-row:5/6;cursor:pointer}.slider{width:100%;height:10px;position:relative}.slide{position:absolute;width:100%;height:5px;background:tomato;border-radius:30px}.sliding{width:0;height:6px;border-radius:30px 0 0 30px}.nob,.sliding{position:absolute;background:#4169e1;left:0}.nob{width:10px;height:10px;border-radius:50%}.track{width:100%;height:100px;display:grid;margin:10px 0;grid-template-columns:.25fr 1.5fr .25fr;grid-template-rows:1fr 1fr}.track .img{width:100px;background:grey;grid-row:1/3;grid-column:1/2}.track .img img{width:100%;height:100%}.track_name{color:#fff;background:orange;grid-row:1/2;grid-column:2/3}.album_name{grid-row:2/3;grid-column:2/3;background:#d6cece}.album_name,.track_name{display:flex;align-items:center;padding:10px}.controls{background:#87ceeb;width:70px;grid-row:1/3;grid-column:3/4}.controls button{background:none;border:none;font-size:30px}.tracks_display{background:#fff;width:35%}.special_btns{font-size:30px;color:#fff;background:#4169e1;width:50px;height:50px;position:absolute;top:50%;transform:translateY(-50%);display:none;transition:.2s ease-in-out}#alb_btn{left:0;border-radius:0 50px 50px 0}#tracks_btn{border-radius:50px 0 0 50px;right:0}.caution{position:absolute;top:0;left:0;background:#fff;border:2px solid #4169e1;width:25%;padding:10px;border-radius:0 0 10px 10px}.caution p{margin:10px}.caution_btn{font-size:20px;color:#fcf975;width:50px;background:#4169e1;height:25px;border-radius:0 0 50px 50px;margin-bottom:-45px}@media screen and (max-width:1000px){.App{flex-direction:column}.albums_display{width:100%;position:absolute;left:-100%;border-radius:0 0 10px 10px;box-shadow:-5px 5px 10px #646464}.player_con{width:100%;height:100%}.sliding{height:5px}.tracks_display{width:100%;position:absolute;right:-100%;border-radius:0 0 10px 10px;box-shadow:5px 5px 10px #646464}.special_btns{display:flex}.caution{width:100%}}@media screen and (max-width:500px){#alb_btn,#tracks_btn{top:50px}.player{width:90%;height:75%}}
/*# sourceMappingURL=main.1920bb9f.chunk.css.map */