body,html,#root{height:100%}*{box-sizing:border-box}html{font-size:18px}h1{padding:.77rem 0;text-align:center;font-family:Poppins,sans-serif;font-size:1.88rem;color:#fff}h1 .highlight{color:#6c41ec}h2{font-family:Poppins,sans-serif;font-size:1.55rem}::-webkit-scrollbar{width:0}.App{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 60px);height:100%;padding:0 17% 20%;background-image:url(/background_photo_desktop.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;font-family:Work Sans,sans-serif;font-weight:500;color:#fff}.login-button{display:block;cursor:pointer;width:20rem;padding:2rem 0;border-radius:54px;border-width:0px;background-color:#6c41ec;text-align:center;font-size:.83rem;transition:background-color .25s;color:#fff;text-decoration:none;font-size:1.5rem;font-family:Poppins,sans-serif;font-weight:500}.login-button:hover{background-color:#fff;color:#6c41ec}.App-playlist{display:flex;justify-content:space-between;width:100%}@media only screen and (max-width: 600px){.App{padding:5% 5% 35%}}@media only screen and (max-width: 1020px){.App-playlist{align-items:center;flex-direction:column}}nav{display:flex;position:sticky;top:0;height:60px;background-color:#010c3f;justify-content:space-around;align-items:center}nav a{color:#fff;text-decoration:none;font-size:1rem;font-family:Poppins,sans-serif;font-weight:500}nav a:hover{background-color:#6c41ec;padding:.5rem;border-radius:54px;transition:all .5s ease-in-out}.SearchBar{display:flex;flex-direction:column;align-items:center;padding-top:3rem;margin-bottom:3rem}.SearchBar input{width:300px;padding:.88rem;border:1px solid #fff;border-radius:3px;margin-bottom:2.22rem;color:#010c3f;font-size:1rem}.SearchBar input:focus{outline:none}input.SearchButton{cursor:pointer;width:8.11rem;padding:.77rem 0;border-radius:54px;background-color:#010c3f;text-align:center;font-size:1rem;transition:background-color .25s;border:0px;color:#fff;font-weight:500}input.SearchButton:hover{background-color:#6c41e9b3}.SearchResults{width:50%;min-height:200px;max-height:950px;overflow-y:auto;padding:2.27rem 1.16rem;background-color:#010c3fb3;-webkit-box-shadow:17px 20px 31px -1px rgba(0,0,0,.75);-moz-box-shadow:17px 20px 31px -1px rgba(0,0,0,.75);box-shadow:17px 20px 31px -1px #000000bf}.SearchResults::-webkit-scrollbar{width:.5rem}.SearchResults::-webkit-scrollbar-track{background:transparent}.SearchResults::-webkit-scrollbar-thumb{background-color:#fff;border-radius:50px}@media only screen and (max-width: 1020px){.SearchResults{width:90%;margin-bottom:2rem}}.TrackList{margin-top:16px;width:100%}.Track{display:flex;padding:4px;align-items:center;border-bottom:1px solid rgba(256,256,256,.8)}.Track-action{cursor:pointer;padding:.25rem;font-size:1.05rem;transition:color .25s;border:0px;background-color:#0000;color:#fff}.Track-action:hover{color:#ffffff80}.play-icon{display:flex;padding:.25rem}.play-icon:hover{color:#ffffff80}.lyric-icon{display:flex;padding:.25rem}.lyric-icon:hover{color:#ffffff80}.Track-information{flex-grow:1;display:flex;gap:.5rem;align-items:center;height:80px}.Track-information h3{margin-bottom:.22rem}.Track-information p{font-size:.83rem;font-weight:300;color:#fffc}.Track-information .Track-information-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Track-information .Track-information-text h3{margin-bottom:8px}.Playlist{display:flex;flex-direction:column;align-items:center;overflow-y:auto;width:37%;min-height:200px;max-height:950px;padding:2.27rem 1.16rem;background-color:#010c3fb3;-webkit-box-shadow:17px 20px 31px -1px rgba(0,0,0,.75);-moz-box-shadow:17px 20px 31px -1px rgba(0,0,0,.75);box-shadow:17px 20px 31px -1px #000000bf}.Playlist::-webkit-scrollbar{width:.5rem}.Playlist::-webkit-scrollbar-track{background:transparent}.Playlist::-webkit-scrollbar-thumb{background-color:#fff;border-radius:50px}.Playlist input{width:100%;border:0;outline:0;background:transparent;border-bottom:3px solid #6f6f6f;font-family:Poppins,sans-serif;font-size:1.55rem;color:#fff}.Playlist-save{cursor:pointer;width:10rem;padding:.77rem 0;border-radius:54px;border-width:0px;margin-top:1.27rem;background-color:#6c41ec;text-align:center;font-size:1rem;transition:background-color .25s;color:#fff;font-weight:500}.Playlist-save:hover{background-color:#6c41e9b3}@media only screen and (max-width: 1020px){.Playlist{width:90%}}.Player{box-sizing:border-box;position:fixed;width:calc(100vw - 34%);left:0px;bottom:0px;height:152px;margin:0 17%}@media only screen and (max-width: 600px){.Player{margin:0;width:100%}}