@import url(https://fonts.googleapis.com/css?family=Spartan:400,700&display=swap);
html{box-sizing:border-box}body{margin:0;min-height:100vh;background:#c9ced3;display:flex;justify-content:center;align-items:center;font-family:Spartan,sans-serif;font-size:12px}.player-container{height:500px;width:400px;background:#e7e7e7;border-radius:20px;box-shadow:0 15px 30px 5px rgba(0,0,0,.3)}.img-container{width:300px;height:300px;position:relative;top:-50px;left:50px}.img-container img{height:100%;width:100%;object-fit:cover;border-radius:20px;box-shadow:0 5px 30px 5px rgba(0,0,0,.5)}h2{font-size:25px;text-align:center;margin:0}h3{font-size:20px;text-align:center;font-weight:400;margin:5px 0 0}.progress-container{background:#fff;border-radius:5px;cursor:pointer;margin:40px 20px;height:4px;width:90%}.progress{background:#242323;border-radius:5px;height:100%;width:0%;transition:width .1s linear}.duration-wrapper{position:relative;top:-25px;display:flex;justify-content:space-between}.player-controls{position:relative;top:-15px;left:120px;width:200px}.fas{font-size:30px;color:#818181;margin-right:30px;cursor:pointer;user-select:none}.fas:hover{filter:brightness(80%)}.main-button{font-size:40px;position:relative;top:3px}@media screen and (max-width: 376px){.player-container{width:95vw}.img-container{left:29px}h2{font-size:20px}h3{font-size:15px}.player-controls{top:-10px;left:100px}}