@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap);*{box-sizing:border-box;margin:0}body{height:90vh;display:flex;justify-content:center;align-items:center;position:relative}.title{color:#fff}.title h1{font-size:40px;font-weight:700}.title h1 span{color:#58b883;margin-right:10px}.music-container{height:100%;margin:50px 0;width:300px;max-width:400px}.showcase{color:#fff;margin:20px 10px 20px 0;font-size:22px;width:100%;text-align:center;overflow:hidden}.showcase p{margin:5px;-webkit-animation:slide 10s linear infinite;animation:slide 10s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}.music-container.play .showcase p{-webkit-animation-play-state:running;animation-play-state:running}.showcase :nth-child(2){font-weight:700}.cover{border-radius:50%;width:200px;height:200px;justify-self:center;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}.music-container.play .cover{-webkit-animation-play-state:running;animation-play-state:running}.progress-container{width:100%;height:5px;margin-bottom:20px;background:rgba(0,0,0,.2);border-radius:5px}.progress{background-color:#6df3da;height:100%;width:0;transition:width .1s linear;border-radius:5px}.controls{background:rgba(0,0,0,.2);padding:10px;border-radius:5px;width:100%;box-shadow:0 5px 20px #6df3da;-webkit-animation:breathe 2s linear infinite;animation:breathe 2s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}.music-container.play .controls{-webkit-animation-play-state:running;animation-play-state:running}.action-btn{border:0;background:none;color:#6df3da;font-size:20px;margin:0 15px}.action-btn:hover{color:#58b883}.action-btn:focus{outline:none}.action{background:#6df3da;color:#fff;font-size:22px;padding:10px;border-radius:50px}.action:hover{background:#fff}.menu{top:2%;z-index:3}.menu,.nav{position:absolute;left:0}.nav{top:0;padding:30px;background:rgba(0,0,0,.2);height:80vh;z-index:2;border-radius:5px;transition:display .5s linear;display:none}.nav ul{list-style-type:none;text-align:left;padding:0;margin:0;z-index:2}.nav ul li{color:#fff;font-size:22px;margin:20px 0;font-weight:700;transition:color .5s linear}.nav.playing ul li,.nav ul li:hover{color:#6df3da}footer{color:#fff;width:300px;max-width:400px;margin-top:10px;font-weight:700}footer span a{color:#6df3da;text-decoration:none;margin-left:10px}@-webkit-keyframes breathe{10%{box-shadow:0 5px 10px #6df3da}30%{box-shadow:0 5px 20px red}50%{box-shadow:0 5px 30px #ff0}to{box-shadow:0 5px 40px #6df3da}}@keyframes breathe{10%{box-shadow:0 5px 10px #6df3da}30%{box-shadow:0 5px 20px red}50%{box-shadow:0 5px 30px #ff0}to{box-shadow:0 5px 40px #6df3da}}@-webkit-keyframes slide{10%{transform:translateX(100%)}20%{transform:translateX(90%)}30%{transform:translateX(80%)}40%{transform:translateX(50%)}50%{transform:translateX(40%)}60%{transform:translateX(30%)}70%{transform:translateX(20%)}80%{transform:translateX(10%)}90%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide{10%{transform:translateX(100%)}20%{transform:translateX(90%)}30%{transform:translateX(80%)}40%{transform:translateX(50%)}50%{transform:translateX(40%)}60%{transform:translateX(30%)}70%{transform:translateX(20%)}80%{transform:translateX(10%)}90%{transform:translateX(0)}to{transform:translateX(-100%)}}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:500px){.nav{background:rgba(0,0,0,.5);height:100vh;padding-top:50px}.title{margin-top:80px}.title h1{font-size:35px}.menu{position:absolute;left:0;top:4%;z-index:3}}body{background:#0a192f}#app{font-family:Lato,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}