#root{max-width:1280px;height:max-content;margin:0 auto;padding:2rem;text-align:center;display:flex;justify-content:space-between;align-items:center;gap:5em}body{background-color:#000}#root button:hover{cursor:pointer}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}@media screen and (max-width: 768px){#root{margin-top:50px;flex-direction:column;overflow-x:hidden;gap:3em}.footer,.footer-after{position:unset}}.login{text-decoration:none;color:#fff;background-color:#32cd32;width:250px;height:100px;text-align:center;display:flex;justify-content:center;align-items:center;border-radius:10px;transition:.3s all}.login-a{width:250px;height:100px;text-align:center;display:flex;justify-content:center;align-items:center;text-decoration:none;border-radius:10px;font-size:1.5rem;color:#000}.login-a:visited{color:#000}#logout{width:200px;height:50px;display:flex;justify-content:center;align-items:center;color:#fff;background-color:#32cd32;-moz-appearance:none;appearance:none;-webkit-appearance:none;text-decoration:none;font-size:20px;padding:5px;border:0;border-radius:10px}@media screen and (max-width: 768px){#body{overflow:hidden}.login{height:40px}}@media (hover: hover){#logout:hover{text-decoration:none;color:#000}.login:hover{text-decoration:underline;color:#000;background-color:#8fbc8f;transition:.3s all}}.footer{right:50%;transform:translate(+50%)}.footer-after,.footer{position:absolute;bottom:0;display:flex;justify-content:center;align-items:center;gap:.5em;padding:.5em;width:100vh}.footer-after{bottom:1em;left:1em;width:auto}#heart{color:red!important}a:visited{color:#fff}@media screen and (max-width: 768px){.footer-after{position:unset;height:1em;width:50vh;margin:0;transform:unset}}@media (hover: hover){a:hover{text-decoration:underline}}.error-div{display:flex;justify-content:center;align-items:center;gap:3em;flex-direction:column}#error-img{width:650px;height:500px}#error-h2{text-align:center;width:auto}@media screen and (max-width: 768px){.error-div{gap:0;margin:0;padding:0}#error-img{width:400px;height:300px}#error-h2{width:300px}}.aboutArtist-div{display:flex;justify-content:center;align-items:center;flex-direction:column;width:fit-content;background-color:transparent;padding-bottom:1em;border-radius:10px;gap:.2em}#artist-img{max-width:300px;max-height:300px;border-radius:10px}.showPlaylistOfSong-div{width:fit-content;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:transparent;padding-bottom:1em;border-radius:10px;gap:.2em}.showPlaylistOfSong-div h2{max-width:280px;text-overflow:ellipsis}.showPlaylistOfSong-div img{border-radius:10px}.lds-ellipsis{display:inline-block;position:relative}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fff;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}.skeleton-div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;background-color:transparent;border-radius:10px;-webkit-user-select:none;user-select:none;gap:.5em}.controllers{display:flex;justify-content:center;align-items:center;gap:2em;position:absolute;bottom:1.5em}#play-button{text-align:center;border-radius:50%;border-color:transparent;width:50px;height:50px;display:flex;justify-content:center;align-items:center;transition:all .3s ease-out;transform:scale(1);background-color:#fff;outline:none}#previous-button,#next-button{display:flex;align-items:center;justify-content:center;border-color:transparent;text-align:center;background-color:#fff;border-radius:50%;width:36px;height:36px;transition:all .3s ease-out;transform:scale(1);outline:none}#song-img{width:200px;height:200px;object-fit:contain;border-radius:10px}#songName-h2{position:relative;max-width:280px;text-overflow:ellipsis;overflow:hidden;width:200px;height:20px;background-color:silver}#songArtist-h5{margin:5px;position:relative;width:200px;height:20px;background-color:silver}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:lightgrey}@media screen and (max-width: 768px){.skeleton-div{flex-direction:column;width:350px}}@media (hover: hover){#previous-button:hover,#play-button:hover,#next-button:hover{transition:all .3s ease-in-out;transform:scale(1.05)}}.user{display:flex;justify-content:center;align-items:center;text-decoration:none;color:#fff;background-color:#32cd32;width:250px;height:50px;text-align:center;border-radius:10px;transition:.3s all;position:absolute;top:.5em;right:1em}#user-icon{border-radius:50%;width:40px;height:40px}#body-after{overflow:auto}.fa-caret-down,.fa-caret-up{transform:scale(1.3)}.fa-caret-down:hover,.fa-caret-up:hover{cursor:pointer}.preview{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1em}#preview-img{border-radius:10px}.play-btn{text-align:center;border-radius:50%;border-color:transparent;width:50px;height:50px;display:flex;justify-content:center;align-items:center;background-color:#fff;outline:none}: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:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h2,p{margin:0}.div-volume{position:absolute;bottom:1.5em;right:2em}.div-volume input:hover{cursor:pointer}.btn-share{position:absolute;bottom:1.7em;right:16em;background-color:transparent;outline:none;display:flex;justify-content:center;align-items:center;border-color:transparent}.popup{position:absolute;top:1.5em;right:50%;transform:translate(+50%);animation:move .1s ease-in-out;background-color:#000;color:#fff;margin:.5em;padding:.8em;display:flex;justify-content:center;align-items:center;border-radius:10px}#img-share{background-color:transparent;width:30px;height:30px}.like-btn{position:absolute;bottom:1.6em;right:20em;background-color:transparent;outline:none;border-color:transparent;display:flex;justify-content:center;align-items:center}.like-btn img{width:30px;height:30px;aspect-ratio:auto 30 / 30}.like-btn:hover{cursor:pointer;transform:scale(1.1);transition:.2s all ease-in}.div-volume img:hover{cursor:pointer}.btn-share:hover{cursor:pointer;transform:scale(1.1);transition:.2s all ease-out}@keyframes move{0%{top:0}50%{top:.75em}to{top:1.5em}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}