@import "https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--a:0}*{margin:0;padding:0;font-family:Roboto,sans-serif}.close{display:none}body{color:#fff;background-color:#000}.left{width:25vw;padding:10px}.right{width:75vw}.home ul li{gap:15px;width:14px;padding-top:14px;font-weight:700;list-style:none;display:flex}.heading{align-items:center;gap:15px;width:100%;padding:23px 14px;font-size:13px;font-weight:700;display:flex}.heading img{width:30px}.library{min-height:80vh;position:relative}.footer{color:gray;gap:13px;padding:10px 0;font-size:10px;display:flex;position:absolute;bottom:0}.footer a{color:gray}.right{margin:16px 0;position:relative}.header{background-color:#222;justify-content:space-between;display:flex}.header>*{padding:20px}.spotifyPlaylists{padding:16px;position:relative}.spotifyPlaylists h1{padding:16px}.cardContainer{flex-wrap:wrap;gap:10px;max-height:60vh;margin:30px;display:flex;overflow-y:auto}.card{background-color:#252525;border-radius:5px;width:200px;padding:10px;transition:all .9s;position:relative}.card:hover{cursor:pointer;--a:1;background-color:#696767}.card>*{padding-top:10px}.card img{object-fit:contain;width:100%}.play{width:28px;height:28px;opacity:var(--a);background-color:#1fdf64;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:all 1s ease-out;display:flex;position:absolute;bottom:88px;right:17px}.buttons>*{margin:0 12px}.signupbtn{color:#9c9494;cursor:pointer;background-color:#222;border:none;outline:none;font-size:16px;font-weight:700}.signupbtn:hover{color:#fff;font-size:17px}.loginbtn{color:#000;cursor:pointer;background-color:#fff;border-radius:21px;width:79px;padding:10px;font-size:16px}.loginbtn:hover{font-size:17px;font-weight:700}.playbar{background:#e2d9d9;border-radius:10px;justify-content:center;align-items:center;width:70vw;min-height:40px;padding:12px;display:flex;position:fixed;bottom:30px}.songbuttons{justify-content:center;align-items:center;gap:20px;display:flex}.songList{height:544px;margin-bottom:44px;overflow:auto}.hamburger{cursor:pointer;display:none}.hamburgerContainer{justify-content:center;align-items:center;gap:14px;display:flex}.songList ul{padding:0 12px}.songList ul li{cursor:pointer;border:1px solid #928f8f7d;border-radius:5px;justify-content:space-between;gap:12px;margin:12px 0;padding:13px;list-style-type:decimal;display:flex}.songList .info{width:344px;font-size:13px}.info div{word-break:break-all}.downloadSong{color:#fff;cursor:pointer;background:0 0;border:none;margin-left:10px;font-size:20px}.downloadSong:disabled{cursor:default;opacity:.7}.downloadApp{color:#000;cursor:pointer;background:#fff;border-radius:25px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .2s,opacity .2s;display:inline-flex;position:absolute;top:20px;right:25px}.downloadApp:hover{opacity:.9;transform:scale(1.04)}.downloadApp:active{transform:scale(.97)}.playnow{justify-content:center;align-items:center;display:flex}.playnow span{width:64px;padding:12px;font-size:15px}.seekbar{cursor:pointer;background:#000;border-radius:10px;width:98%;height:4px;margin:6px;position:absolute;bottom:8px}.circle{background-color:#000;border-radius:13px;width:13px;height:13px;transition:left .5s;position:relative;bottom:5px;left:0%}.songbuttons img{cursor:pointer}.timevol{justify-content:center;align-items:center;display:flex}.songinfo{color:#000;text-align:center;width:auto;padding:0 12px;font-size:18px}.songtime{color:#000;width:auto;padding:0}.volume{cursor:pointer;justify-content:center;align-items:center;gap:8px;display:flex}.range input{cursor:pointer;width:110px}.abovebar{flex-direction:column;justify-content:center;align-items:center;gap:25px;width:100%;margin:20px 0;display:flex}.searchBox{box-sizing:border-box;background-color:#242424;border-radius:25px;align-items:center;width:350px;height:44px;margin:10px 0 25px 16px;padding:0 14px;transition:background-color .2s,outline .2s;display:flex}.searchBox:hover{background-color:#2a2a2a}.searchBox:focus-within{background-color:#2a2a2a;outline:2px solid #fff}.searchBox .searchIcon{opacity:.8;flex-shrink:0;width:20px;height:20px;margin-right:10px}.searchBox input{color:#fff;background:0 0;border:none;outline:none;flex:1;width:100%;height:100%;font-size:14px}.searchBox input::placeholder{color:#b3b3b3}#favouriteBtn{color:#1fdf64;cursor:pointer;background:0 0;border:none;margin:0;padding:0;font-size:28px}#favouriteBtn:hover{transform:scale(1.1)}#favouriteBtn.active{color:#1fdf64}@media (width<=1200px){.left{z-index:1;background-color:#000;width:373px;height:100vh;padding:0;transition:all .3s;position:fixed;top:0;left:-130%}.songinfo,.songtime{width:auto}.left .close{width:29px;position:absolute;top:25px;right:31px}.timevol{flex-direction:column;justify-content:space-evenly;align-items:center;gap:13px;display:flex}.right{width:100vw}.playbar{width:calc(100vw - 75px)}.seekbar{width:calc(100vw - 120px)}.hamburger{display:block}.right{margin:0}.card{width:55vw}.cardContainer{justify-content:center;margin:0}.close{display:block}.abovebar{flex-direction:column;align-items:center;gap:23px}.cardContainer{max-height:unset;overflow-y:unset;margin-bottom:35vh}.playbar{right:25px}}@media (width<=500px){.card{width:100%}.header>*{padding:2px}.buttons>*{margin:0 6px}.header{padding:7px}.spotifyPlaylists h1{padding:4px}.library{height:85vh}.left{width:100vw}.searchBox{width:calc(100% - 32px);margin:10px 16px 20px}}.border{border:2px solid red;margin:3px}.flex{display:flex}.justify-center{justify-content:center}.items-center{align-items:center}.bg-black{color:#fff;background-color:#000}.invert{filter:invert()}.bg-grey{background-color:#121212}.rounded{border-radius:7px}.m-1{margin:5px}.p-1{padding:10px}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-thumb{background-color:#333;border-radius:6px}::-webkit-scrollbar-track{background-color:#222}