*{margin:0;padding:0;box-sizing:border-box;font-family:Gilroy,sans-serif}body{background:#e7ebd6;background:linear-gradient(180deg,#e7ebd6,#37662c)}.library{position:fixed;top:0;left:0;width:20rem;height:100%;background:#32522b;box-shadow:2px 2px 50px #00000034;overflow:scroll;transform:translate(-100%);transition:all .2s ease;opacity:0}.library h2{padding:2rem}.library-song{display:flex;align-items:center;padding:1rem 2rem}.library-song img{width:30%}.library-song:hover{background:#78f8a0}.song-description{padding-left:1rem}.song-description h3{color:#fff;font-size:1rem}.song-description h4{color:gray;font-size:.7rem}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#ffb7b7;border-radius:10px}::-webkit-scrollbar-track{background:#ddd}.selected{background:#ffe6ff}.selected h3{color:#306b26}.active{transform:translate(0);opacity:1}@media screen and (max-width: 768px){.library{width:100%}}.player{width:100vw;min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.time-control{width:50%;display:flex;align-items:center}.time-control input{width:100%;background-color:transparent;cursor:pointer}.time-control p{padding:1rem;font-weight:700}.play-control{display:flex;justify-content:space-between;align-items:center;padding:1rem;width:30%}.play-control svg{cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px}.track{background:#add8e6;width:100%;height:1rem;position:relative;border-radius:1rem;overflow:hidden}.animate-track{background:#ccc;width:100%;height:100%;position:absolute;top:0;left:0;transform:translate(0);pointer-events:none}@media screen and (max-width: 768px){.time-control{width:90%}.play-control{width:80%}}.song-container{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.song-container img{width:20%}.song-container h2{padding:3rem 1rem 1rem}.song-container h3{font-size:1rem}@media screen and (max-width: 768px){.song-container img{width:60%}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotateSong{animation:rotate 20s linear forwards infinite}h1,h4{color:#094609}nav{min-height:10vh;display:flex;justify-content:center;align-items:center;margin:20px}nav button{background:transparent;border:none;cursor:pointer;font-size:16px;margin-left:20%;border:2px solid rgb(41,216,25);padding:.8rem;transition:all .3s ease}nav button:hover{background:#59db4d;color:#fff}@media screen and (max-width: 768px){nav button{z-index:10}}h2,h3{color:#133a1b}h3,h4{font-weight:600}button{font-weight:700}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}