.nav{position:relative;height:10vh;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#2e2e2e;overflow:hidden}@media screen and (min-width: 900px){.nav{height:5vh}}.nav__content{display:flex;width:100%;max-width:140rem;justify-content:space-between;align-items:center;padding:0 2rem}.nav__content button{background:transparent;border:2px solid rgb(165,165,165);border-radius:.5rem;padding:1rem;cursor:pointer;color:#a5a5a5;transition:all .3s ease}.nav__content button:hover{background-color:#a5a5a5;color:#000}@media screen and (min-width: 768px){.nav__content button{font-size:1.6rem}}.logo{max-width:8rem;width:100%}@media screen and (min-width: 768px){.logo{max-width:10rem}}.song-container{position:relative;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.song-container .cta__button{position:absolute;top:2rem;right:2rem;background-color:#2e2e2e;border:2px solid rgb(165,165,165);border-radius:.5rem;padding:1rem;cursor:pointer;color:#a5a5a5;text-decoration:none;z-index:100}@media screen and (min-width: 768px){.song-container{min-height:50vh}}@media screen and (min-width: 900px){.song-container{min-height:80vh}}.song-container__name{text-align:center;font-size:2.4rem;padding-top:1.5rem}@media screen and (min-width: 768px){.song-container__name{font-size:4.5rem}}.song-container__artist{font-size:2rem;padding:2rem}@media screen and (min-width: 768px){.song-container__artist{font-size:2.5rem}}.song-container h2,.song-container h3{color:#fff}.song-container h3,.song-container h4{font-weight:400}.player{position:relative;min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:start;z-index:5}.time-control{width:100%;display:flex;align-items:center;color:#fff}.time-control input{width:100%}.time-control p{padding:1rem}.play-control{display:flex;align-items:center;justify-content:space-around;padding:3rem 2rem;width:90%}@media screen and (min-width: 768px){.play-control{width:50%}}.play-control svg{cursor:pointer}input[type=range]{-webkit-appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:1.6rem;width:1.6rem}.track{position:relative;margin-left:1rem;width:100%;height:1.6rem;border-radius:1.6rem;overflow:hidden;background:#ffffff40;box-shadow:0 4px 32px #1f26872e,0 1px 3px #0000001f;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.animate-track{background-color:#c5c5c5;width:100%;height:100%;position:absolute;top:0;left:0;transform:translate(0);pointer-events:none}.controls{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0 2rem}@media screen and (min-width: 768px){.controls{max-width:120rem}}@media screen and (min-width: 1200px){.controls{padding:0}}.control{display:flex;align-items:center;justify-content:center;background:#fff4;box-shadow:0 4px 32px #1f26875e;border-radius:50%;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);width:6rem;height:6rem;border:1.5px solid rgba(255,255,255,.3);transition:box-shadow .4s cubic-bezier(.4,.2,.2,1),background .4s cubic-bezier(.4,.2,.2,1),backdrop-filter .4s cubic-bezier(.4,.2,.2,1);cursor:pointer}@media screen and (min-width: 768px){.control{width:7rem;height:7rem}}.control:hover,.control:focus{background:#ffffff59;box-shadow:0 8px 48px #1f268773,0 2px 8px #0000002e;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px solid rgba(255,255,255,.4)}.skip-forward,.skip-back,.play{font-size:2rem;color:#ffffff8c}@media screen and (min-width: 768px){.skip-forward,.skip-back,.play{font-size:3rem}}.record-cover{position:relative;display:flex;justify-content:center;align-items:center;overflow:visible}.record-cover__name{font-size:2rem;padding:3rem 2rem 1rem 1rem}.record-cover__artist{font-size:2rem}.record-cover__wrapper{position:relative;overflow:visible}.record-cover__disk{position:relative;animation:spin 2s linear infinite;display:flex;justify-content:center;align-items:center;width:35rem}@media screen and (min-width: 768px){.record-cover__disk{width:50rem}}@media screen and (min-width: 1920px){.record-cover__disk{width:70rem}}.record-cover__disk img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50%;border-radius:50%}.record-cover__inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:5rem;width:5rem;border-radius:50%;background-color:#1f1f1f}@media screen and (min-width: 1920px){.record-cover__inner{width:10rem;height:10rem}}.record-cover__arm{position:absolute;right:0;top:15%;transform-origin:top center;transform:translate(25%,-25%) rotate(-25deg);transition:transform .4s ease;z-index:2;width:20rem}@media screen and (min-width: 768px){.record-cover__arm{width:30rem}}@media screen and (min-width: 1920px){.record-cover__arm{width:50rem}}.record-cover__arm--play{transform:translate(25%,-25%) rotate(0);transition:transform .4s ease}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.library{position:fixed;top:0;left:0;width:100%;max-width:100vw;height:100%;background-color:#363636e7;color:#b9b9b9;overflow-y:scroll;transform:translate(-100%);transition:all .3s ease;opacity:0;z-index:11}@media screen and (min-width: 768px){.library{width:60%}}@media screen and (min-width: 900px){.library{width:40%}}@media screen and (min-width: 1100px){.library{width:30%}}.library-song{display:flex;align-items:center;padding:1.6rem 3.2rem;cursor:pointer;transition:background .5s ease}.library-song:hover{background-color:#555}.library-song img{max-width:10rem}.song-description{padding-left:2rem}.song-description h3{font-size:2.2rem;padding-bottom:.4rem}.song-description h4{font-size:1.6rem}.selected{background-color:#464545}.active-library{transform:translate(0);opacity:1}.header{position:relative;background-color:#363636}.header__heading{color:#b9b9b9;padding:2.8rem 3.2rem;font-size:3rem}.library-close{position:absolute;top:50%;right:2rem;transform:translateY(-50%);cursor:pointer}.library-close:hover{color:#fff}*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(155,155,155,.5) transparent;overflow-x:hidden}html{font-size:62.5%}body{font-size:1.6rem;font-family:Lato,sans-serif}h1{color:#353535}.App{overflow:hidden;height:100vh;transition:all .5s ease;background-repeat:no-repeat;background-size:0%;z-index:0}.App:before{content:"";overflow:hidden;position:absolute;inset:0;background-image:inherit;background-size:cover;background-repeat:inherit;background-position:center;filter:blur(20px) brightness(.5)}.library-active{margin-left:30%}