*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}h1,h2{color:#3b444b}h3,h4{color:#646464}img{width:100%}body{background-color:#50e3c2;background-image:radial-gradient(at 47% 33%,hsl(162deg,77%,40%) 0,transparent 59%),radial-gradient(at 82% 65%,hsl(198deg,100%,50%) 0,transparent 55%)}.app{backdrop-filter:blur(25px) saturate(111%);-webkit-backdrop-filter:blur(25px) saturate(111%);background-color:#ffffffbf;border-radius:12px;border:1px solid rgba(209,213,219,.3);max-width:900px;margin-inline:auto;min-height:100vh}.player{min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.time-control{width:50%;display:flex;align-items:center;gap:2rem;padding:1rem 2rem}.time-control input{width:100%;-webkit-appearance:none;background:transparent;cursor:pointer}.play-control{width:33%;display:flex;align-items:center;justify-content:space-between}.play-control svg{cursor:pointer}.track{width:100%;height:1rem;position:relative;overflow:hidden;border-radius:1rem}.animate-track{background:rgb(204,204,204);width:100%;height:100%;position:absolute;top:0;left:0;transform:translate(0);padding:1rem;pointer-events:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:200px;width:20px;border-radius:50%;background-color:#fff}@media screen and (max-width: 768px){.time-control{width:90%}.play-control{width:80%}}.song-container{min-height:60vh;display:flex;align-items:center;justify-content:center;flex-direction:column}.song-container h1{padding:3rem 1rem 1rem}.song-container h2{font-size:1rem}.song-img{height:200px;width:200px;border-radius:50%;overflow:hidden}@media screen and (max-width: 768px){.song-img{height:150px;width:150px}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotateSong{animation:rotate 20s linear forwards infinite}.library{position:fixed;top:0;left:0;width:20rem;height:100%;background:white;box-shadow:2px 2px 50px gray;overflow:scroll;padding-bottom:3rem;transform:translate(-100%);opacity:0;transition:all .75s ease-in-out}.library h2{padding:3rem;font-size:3rem;text-align:center}.library-song{display:flex;align-items:center;padding:1rem 2rem;cursor:pointer;transition:all .4s ease-out}.library-song:hover{background-color:#a9ddf3}.library-song img{width:30%}.song-description{padding-left:1rem}.song-description h3{font-size:1.2rem}.song-description h4{font-size:.8rem}*{scrollbar-width:thin;scrollbar-color:rgba(155,155,155,.5) transparent}*::-webkit-scrollbar{width:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:rgba(155,155,155,.5);border-radius:20px}.selected{background:rgb(196,174,244)}.active-library{transform:translate(0);opacity:1}nav{min-height:10vh;display:flex;align-items:center;justify-content:space-around;z-index:99}nav .logo{height:50px;width:100px;display:grid;place-items:center}nav .logo img{width:100%;transform:scale(2)}nav button{background:transparent;border:none;outline:none;border:2px solid rgb(65,65,65);padding:.5rem;transition:all .3 ease;display:flex;align-items:center;gap:4px}nav button:hover{background:rgb(65,65,65);color:#fff}