body{background-color:#000;margin:0;padding:0;box-sizing:border-box;color:#fff}.navbar{display:flex;align-items:center;padding:10px;position:sticky;top:0;z-index:10;background-color:#000}.spotifyLogo{height:50px;width:50px;margin-left:5px;margin-top:10px}.homeIcon{margin-top:8px;font-size:1.3rem;margin-left:25px;padding:10px;background-color:#1f1f1f;border-radius:50%}.homeIcon:hover{background-color:#2e2e2e;cursor:pointer}.glassIcon:hover{cursor:pointer}.searchBar{width:30%;margin-top:5px;margin-left:10px;background-color:#1f1f1f;padding:0 15px 0 20px;border-radius:20px;display:flex;align-items:center;transition:background-color .3s;margin-right:auto}.searchBar:hover{background-color:#2e2e2e}.searchBar:hover .inputField{background-color:#2e2e2e;color:#fff}.inputField{width:80%;color:#fff;font-size:1rem;margin-left:12px;background-color:#1f1f1f;border:none;padding-right:80px;margin-right:10px;transition:background-color .3s,color .3s}.inputField:focus{outline:none;border:none;box-shadow:none}p{color:#b3b3b3}.browseIcon{cursor:pointer;padding-left:10px;padding-right:15px}h4{margin-left:3px;margin-right:3px}.BigResp,.SmallResp{display:flex;flex-direction:row;justify-content:center;align-items:center}.navbar a{color:#b3b3b3;text-decoration:none;text-align:center;margin-left:10px;margin-right:10px;font-family:Arial,Helvetica,sans-serif;font-size:1rem;font-weight:600;transition:all .1s 0s ease-in}.navbar a:hover{color:#fff;font-weight:600;font-size:1.05rem}.logInBtn{cursor:pointer;margin-left:10px;background-color:#fff;color:#000;font-weight:700;font-size:1rem;padding:15px 32px;border-radius:30px;transition:all .1s 0s ease-in}.logInBtn:hover{background-color:#ffffffd9;font-size:1.05rem}.logInBtn:active{background-color:#ffffffb3}@media (max-width: 768px){.BigResp,.installIcon{display:none}.logInBtn{padding:10px 25px}}@media (min-width: 768px) and (max-width: 992px){.installIcon{display:none}.logInBtn{padding:10px 25px}}*{font-family:Arial,Helvetica,sans-serif;color:#fff}.mainLibraryFrame{background-color:#1f1f1f;width:24%;padding:10px 20px;border-radius:10px;position:fixed;top:80px;left:0;z-index:5;height:calc(100vh - 80px);overflow-y:auto}.TitleFrame{display:flex;flex-direction:row;align-items:center;width:100%}.heading{margin-right:auto}.plusIcon{color:#b3b3b3;border-radius:50%;padding:8px}.plusIcon:hover{background-color:#2e2e2e;cursor:pointer}.playlistSection,.podcastSection{background-color:#2e2e2e;padding:2px 20px 20px;border-radius:8px;margin-bottom:25px}.mainLibraryFrame .playlistHeading,.podcastHeading{font-size:.9rem;font-weight:600;color:#fff}.mainLibraryFrame .playlistSub,.podcastSub{font-size:.8rem;color:#fff}.createPlaylistBtn,.browsePodcastBtn{cursor:pointer;background-color:#fff;color:#000;display:flex;justify-content:center;align-items:center;width:45%;height:2rem;font-weight:800;font-size:.75rem;padding:5px 10px;border-radius:20px;transition:all .1s ease-in}.createPlaylistBtn:hover,.browsePodcastBtn:hover{background-color:#ffffffd9;height:2.2rem;width:48%}.createPlaylistBtn:active,.browsePodcastBtn:active{background-color:#ffffffb3}.EmptyDiv{visibility:hidden;height:165px}.linksDiv{display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:auto}.linksDiv a{text-decoration:none;font-size:.8rem;color:#b3b3b3;padding:8px}.Misc{display:flex;flex-direction:column;width:25%}.Misc .cookieLink{color:#fff;font-size:.85rem;margin-top:5px;margin-left:10px;margin-bottom:10px;text-decoration:none;transition:all .2s ease-in}.Misc .cookieLink:hover{text-decoration:underline;font-size:1rem;color:#fff}.Misc .LanguageBtn{display:flex;justify-content:center;background-color:#1f1f1f;border:1px solid white;margin-left:10px;margin-top:15px;margin-bottom:50px;padding:10px 50px;border-radius:20px;cursor:pointer;transition:all .2s ease-in-out}.globeIcon{padding-right:10px}.LanguageBtn:hover{background-color:#2e2e2e}@media (max-width:768px){.EmptyDiv{height:20px}.createPlaylistBtn,.browsePodcastBtn{width:90%;font-size:10px}.createPlaylistBtn:hover,.browsePodcastBtn:hover{width:95%;font-size:10px}}@media (max-width:992px) and (min-width:768px){.mainLibraryFrame{margin-left:5px}.EmptyDiv{height:40px}.createPlaylistBtn,.browsePodcastBtn{width:90%;font-size:12px}.createPlaylistBtn:hover,.browsePodcastBtn:hover{width:95%;font-size:12px}}@media (min-width: 992px) and (max-width: 1400px){.EmptyDiv{height:100px}.createPlaylistBtn,.browsePodcastBtn{width:65%;font-size:12px}.createPlaylistBtn:hover,.browsePodcastBtn:hover{width:70%;font-size:12px}}.songsSection .showAllLink{font-size:.9rem;font-weight:700;text-decoration:none;margin-top:40px;margin-right:45px;color:#b3b3b3}.songsSection .showAllLink:hover{text-decoration:underline}.songGrid{display:flex;gap:.5rem;justify-content:flex-start}.songCardWrapper{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:10px;border-radius:8px;width:150px;transition:transform .3s ease,background-color .3s ease}.songCardWrapper:hover{background-color:#4949493d;transform:scale(1.05)}.songCardWrapper .songImage{width:150px;height:150px;border-radius:8px}.songCardWrapper .songName{margin:0;padding-top:15px;padding-left:5px;font-size:1rem;font-weight:600;color:#fff}.songCardWrapper .songInfo{margin:0;padding-top:10px;padding-left:5px;font-size:.9rem;color:#b3b3b3}.songName:hover,.songInfo:hover{text-decoration:underline;cursor:pointer}.playButtonSong{position:absolute;top:52%;left:70%;height:20px;width:20px;background-color:#1db954;color:#fff;padding:10px;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:2;display:flex;align-items:center;justify-content:center}.songCardWrapper:hover .playButtonSong{opacity:1;transform:scale(1.05)}.songCardWrapper .songImage{height:150px;width:150px;border-radius:8px}.songCardWrapper .songName{margin:0;padding-top:15px;padding-left:5px}.songCardWrapper .songInfo{margin:0;padding-top:10px;padding-left:5px}.songCardWrapper .songName:hover,.songCardWrapper .songInfo:hover{text-decoration:underline;cursor:pointer}.songGrid{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;padding-right:40px}.songGrid::-webkit-scrollbar{display:none}.songGrid:after{content:"";position:absolute;top:0;right:0;height:100%;width:60px;background:linear-gradient(to right,transparent,#121212b4);pointer-events:none;z-index:1}@media (max-width: 768px){.songCardWrapper{width:130px}.songCardWrapper .songImage{width:130px;height:130px}.songCardWrapper .songName{font-size:.95rem}.songCardWrapper .songInfo{font-size:.85rem}}.artistSection{margin-top:20px}.artistSection .showAllLink{font-size:.9rem;font-weight:700;text-decoration:none;margin-top:38px;margin-right:45px;color:#b3b3b3}.artistSection .showAllLink:hover{text-decoration:underline}.artistsGrid{display:flex;align-items:center;justify-content:space-evenly;gap:.5rem}.artistCardWrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:8px;margin:0;transition:transform .3s ease}.artistCardWrapper:hover{background-color:#4949493d;transform:scale(1.05)}.artistImage{width:150px;height:150px;border-radius:50%;object-fit:cover}.artistName{margin:0;padding-top:15px;padding-left:5px;font-size:1rem;font-weight:600;color:#fff}.artistInfo{margin:0;padding-top:10px;padding-left:5px;font-size:.9rem;color:#b3b3b3}.artistName:hover{text-decoration:underline;cursor:pointer}.artistInfo:hover{cursor:pointer}.playButtonArtist{position:absolute;top:60%;left:80%;transform:translate(-50%,-50%) scale(.9);background-color:#1db954;color:#fff;padding:12px;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end}.artistCardWrapper:hover .playButtonArtist{opacity:1;transform:translate(-50%,-50%) scale(1)}.playButtonArtist svg{height:20px;width:20px}.artistsGrid{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;padding-right:40px}.artistsGrid::-webkit-scrollbar{display:none}.artistsGrid:after{content:"";position:absolute;top:0;right:0;height:100%;width:60px;background:linear-gradient(to right,transparent,#121212b4);pointer-events:none;z-index:1}@media (max-width: 768px){.artistCardWrapper{width:130px}.artistCardWrapper .artistImage{width:130px;height:130px}.artistCardWrapper .artistName{font-size:.95rem}.artistCardWrapper .artistInfo{font-size:.85rem}}.albumSection{margin-top:15px}.albumSection .showAllLink{font-size:.9rem;font-weight:700;text-decoration:none;margin-top:40px;margin-right:45px;color:#b3b3b3}.albumSection .showAllLink:hover{font-size:.9rem;text-decoration:underline}.albumGrid{display:flex;align-items:flex-start;justify-content:space-evenly}.albumCardWrapper{position:relative;padding:10px;border-radius:8px;margin-right:5px;transform:translateY(-2px);filter:brightness(1.1);transition:all .2s 0s ease-in-out}.albumCardWrapper:hover{background-color:#4949493d;transform:scale(1.05)}.playButtonAlbum{position:absolute;top:52%;left:70%;height:20px;width:20px;background-color:#1db954;color:#fff;padding:10px;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:2}.albumCardWrapper:hover .playButtonAlbum{opacity:1;transform:scale(1.05)}.albumCardWrapper .albumImage{height:150px;width:150px;border-radius:8px}.albumCardWrapper .albumName{margin:0;padding-top:15px;padding-left:5px}.albumCardWrapper .albumInfo{margin:0;padding-top:10px;padding-left:5px}.albumCardWrapper .albumName:hover,.albumCardWrapper .albumInfo:hover{text-decoration:underline;cursor:pointer}.albumGrid{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;padding-right:40px}.albumGrid::-webkit-scrollbar{display:none}.albumGrid:after{content:"";position:absolute;top:0;right:0;height:100%;width:60px;background:linear-gradient(to right,transparent,#121212b4);pointer-events:none;z-index:1}@media (max-width: 768px){.albumCardWrapper{width:130px}.albumCardWrapper .albumImage{width:130px;height:130px}.albumCardWrapper .albumName{font-size:.95rem}.albumCardWrapper .albumInfo{font-size:.85rem}}.radioSection{margin-top:15px}.radioSection .showAllLink{font-size:.9rem;font-weight:700;text-decoration:none;margin-top:38px;margin-right:45px;color:#b3b3b3}.radioSection .showAllLink:hover{font-size:.9rem;text-decoration:underline}.radiosGrid{display:flex;align-items:flex-start;justify-content:space-evenly}.radioCardWrapper{position:relative;padding:10px;border-radius:8px;margin-right:5px;transition:all .2s ease-in-out}.radioCardWrapper:hover{background-color:#4949493d;transform:scale(1.05)}.radioCardWrapper .radioImage{height:150px;width:150px;border-radius:50%;object-fit:cover}.radioCardWrapper .radioName{margin:0;padding-top:15px;padding-left:5px;font-size:.9rem;font-weight:600;text-align:center}.radioCardWrapper .radioName:hover{text-decoration:underline;cursor:pointer}.playButtonRadio{position:absolute;top:55%;left:75%;height:20px;width:20px;background-color:#1db954;color:#fff;padding:10px;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:2}.radioCardWrapper:hover .playButtonRadio{opacity:1;transform:scale(1.05)}.radioCardWrapper .radioImage{height:150px;width:150px;border-radius:50%}.radioCardWrapper .radioName{margin:0;padding-top:15px;padding-left:5px}.radioCardWrapper .radioInfo{margin:0;padding-top:10px;padding-left:5px}.radioCardWrapper .radioName:hover,.radioCardWrapper .radioInfo:hover{text-decoration:underline;cursor:pointer}.radiosGrid{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;padding-right:40px}.radiosGrid::-webkit-scrollbar{display:none}.radiosGrid:after{content:"";position:absolute;top:0;right:0;height:100%;width:60px;background:linear-gradient(to right,transparent,#121212b4);pointer-events:none;z-index:1}@media (max-width: 768px){.radioCardWrapper{width:130px}.radioCardWrapper .radioImage{width:130px;height:130px}.radioCardWrapper .radioName{font-size:.95rem}}.Headline{display:flex;justify-content:space-between}.Title{margin-left:10px}.Title:hover{text-decoration:underline;cursor:pointer}.chartSection{margin-top:15px}.chartSection .showAllLink{font-size:.9rem;font-weight:700;text-decoration:none;margin-top:38px;margin-right:45px;color:#b3b3b3}.chartSection .showAllLink:hover{text-decoration:underline}.chartsGrid{display:flex;align-items:center;justify-content:space-evenly}.chartCardWrapper{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:10px;border-radius:8px;width:180px;transition:transform .3s ease,background-color .3s ease}.chartCardWrapper:hover{background-color:#4949493d;transform:scale(1.05)}.chartCard{border-radius:8px;filter:brightness(1.1);text-align:center}.chartImage{height:150px;width:150px;border-radius:8px}.playButtonChart{position:absolute;top:54%;left:72%;height:20px;width:20px;background-color:#1db954;color:#fff;padding:10px;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:2;display:flex;align-items:center;justify-content:center}.chartCardWrapper:hover .playButtonChart{opacity:1;transform:scale(1.05)}.chartsGrid{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;padding-right:40px}.chartsGrid::-webkit-scrollbar{display:none}.chartsGrid:after{content:"";position:absolute;top:0;right:0;height:100%;width:60px;background:linear-gradient(to right,transparent,#121212b4);pointer-events:none;z-index:1}@media (max-width: 768px){.chartCardWrapper{width:130px}.chartCardWrapper .chartImage{width:130px;height:130px}.chartCardWrapper .chartName{font-size:.95rem}}.footerAll{padding:2rem}.footerContent{display:flex;flex-direction:column}.divider{height:.5px;color:#b3b3b333;width:100%;align-self:center;margin:3rem 0}.bottomSection{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;flex-wrap:wrap}.listsBlock{display:flex;justify-content:center;gap:4rem;flex-wrap:wrap;margin-left:30px;margin-top:20px}.list{list-style:none;padding:0;margin:0}.list li{color:#b3b3b3;font-size:16px;margin-bottom:10px}.list .main{color:#fff;font-weight:700;font-size:15px;margin-bottom:14px}.list li a{color:inherit;text-decoration:none;cursor:pointer}.list li a:hover{color:#fff;text-decoration:underline}.logosBlock{min-width:150px;margin-top:10px}.InstaLogo,.TwitterLogo,.FacebookLogo{height:20px;width:20px;margin-right:30px;margin-top:5px;background-color:#2b2b2b;padding:10px;border-radius:50%}.InstaLogo:hover,.TwitterLogo:hover,.FacebookLogo:hover{background-color:#5a5a5a}.CopyrightContent p{color:#b3b3b3;margin-bottom:200px}.CopyrightIcon{margin-right:10px}.MainFrame{display:flex;flex-direction:column;flex:1;margin:0 20px 0 10px;padding:20px 20px 20px 30px;border-radius:8px;background:linear-gradient(to bottom,#1f1f1f 10%,#1a1919);overflow-y:auto}@media (max-width:992px) and (min-width:768px){.MainFrame{width:87%}}.App{display:flex;flex-direction:column;min-height:100vh;background-color:#000}.mainContent{display:flex;flex:1}.MainSection{margin-left:27%;width:75%}@media (max-width:768px){.MainSection{margin-left:30%}}@media (max-width:992px) and (min-width:768px){.MainSection{margin-left:30%;width:75%}}@media (min-width:992px) and (max-width: 1400px){.MainSection{margin-left:28%;width:75%}}
