body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--logo-color:#d6deff;--accent-color:#7893ff;--login-button-color:#12cc11;--primary-color:#94b0da;--secondary-color:#173753;--tertiary-color:#f28f3b;--quaternary-color:#2e70c6;--quinary-color:#ffd275;--spotify-green:#163;--header-footer-color:#282c34}.App{text-align:left}.App-header{align-items:center;flex-direction:row;font-family:sans-serif;font-size:calc(10px + 2vmin);font-size:35px;font-weight:700;justify-content:space-between;min-height:10vh;padding-left:4vh;padding-top:2vh;-webkit-user-select:none;user-select:none}.App-footer,.App-header{background-color:#282c34;background-color:var(--header-footer-color);color:#d6deff;color:var(--logo-color);display:flex}.App-footer{align-content:center;padding:5vh}.footer-link:link,.footer-link:visited{color:#7893ff;color:var(--accent-color)}.App-link{color:#61dafb}.Login-button{align-content:center;background-color:#12cc11;background-color:var(--login-button-color);border-radius:40px;color:green;cursor:pointer;font-family:sans-serif;font-size:medium;margin:5vh;text-align:center}.Login-button,.Login-button:hover{height:10vh;outline:2px solid #12cc11;outline:2px solid var(--login-button-color);width:20vh}.Login-button:hover{background-color:initial;color:#99ff92;transition:1s}.Login-button-link{align-content:center;color:#fff;text-decoration:none;vertical-align:center}.Login-button-link:hover{color:gray;text-decoration:none}.Login-button-link:visited{color:#fff;text-decoration:none}.Callback{background:#8ab3db;background:linear-gradient(8deg,#8ab3db,#be98d9 49%,#a048f7);height:100vh}.Kofi-button{border:0;height:36px;margin-left:-150px;margin-top:50px}.Kofi-button:hover{opacity:70%}@media screen and (max-width:900px){.Kofi-button{display:none}.Login-button{margin:5vh;width:100px}.Login-button-link{width:300px}}.Playlist-body{background:var(--secondary-color);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8AB3DB",endColorstr="#A048F7",GradientType=0);list-style-type:"none";min-height:100vh}.Playlist-list{display:grid;grid-template-columns:repeat(4,400px);list-style-type:none;margin:1vh;padding:1vh;width:100vh}.Playlist-item{margin:2vh}.Playlist-link{color:#fff;cursor:pointer;text-decoration:none}.Playlist-link:hover{filter:brightness(.6)}.Spotify-link{background-color:var(--spotify-green);border-radius:12px;color:#f5f5f5;padding:1vh;text-decoration:none}.Spotify-link:hover{filter:brightness(1.5)}.Playlist-nav-button-clickable{color:#fff;cursor:pointer}.Playlist-nav-button-unclickable{color:gray;cursor:default}.Artwork-container{align-content:center;height:200px;margin-top:40px;max-height:200px;width:200px}.Image-artwork{border-radius:7px;height:200px;object-fit:contain;width:200px}.Playlist-offsets-text{color:#fff;display:inline;font-size:40px;vertical-align:75%}.Login-prompt{align-items:center;color:#faebd7;display:flex;flex-direction:column;font-size:200%;height:100%;justify-content:center;padding-top:20%;width:100%}.Disclaimer{font-size:20px;margin-top:5vh;width:320px}@media screen and (max-width:1400px) and (min-width:1001px){.Playlist-list{grid-template-columns:repeat(3,400px)}}@media screen and (max-width:1000px) and (min-width:401px){.Playlist-list{grid-template-columns:repeat(2,400px)}}@media screen and (max-width:400px){.Artwork-container,.Image-artwork{height:100px;width:100px}.Playlist-item{margin:.1vh}.Playlist-list{grid-template-columns:repeat(1,400px)}.Login-prompt{font-size:100%;width:60%}}.Track{background:#49a1ffa6;border-radius:10px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#B595DB",endColorstr="#4A7AFF",GradientType=0);margin-left:10vh;margin-right:50vh;padding-bottom:10px;padding-left:1vh;text-align:left}.Track-artwork{height:80px;padding-left:10px;padding-top:10px}.SelectedPlaylist,.Track-comment-list{list-style-type:none}.SelectedPlaylist{padding:1vh}.SelectedPlaylist-background{background-color:var(--secondary-color);margin:0;min-height:100vh;padding-bottom:100px}.SelectedPlaylist-artwork{height:400px;margin:2vh}.SelectedPlaylist-link{font-size:x-large;font-weight:light;text-align:justify;text-decoration:none}.SelectedPlaylist-link:hover{filter:brightness(.75)}.SelectedPlaylist-title{background-color:#1c9e57;border-radius:100px;color:#2cfe97;font-family:sans-serif;font-weight:700;margin-left:3vh;padding:1vh;position:relative;text-align:center;width:25vh}.Added-by{font-size:12px}.Comment-by{float:right;font-size:11px;margin-right:25px;margin-top:5px}.loader{animation:spin 2s linear infinite;border-radius:50%;border-top:16px solid var(--logo-color);border:16px solid var(--logo-color);border-top-color:var(--accent-color);height:120px;width:120px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Edit-button{align-items:center;align-self:center;background-color:var(--quaternary-color);border:3px solid var(--primary-color);border-radius:50%;color:var(--quinary-color);cursor:pointer;display:flex;height:60px;margin:1%;padding:2%;position:fixed;right:150px;-webkit-user-select:none;user-select:none;width:60px}.Edit-button:hover{background-color:var(--secondary-color);filter:brightness(180%)}.Back-button{background-color:#b595db;color:#000}.Back-button,.Back-button:hover{border-radius:20px;cursor:pointer;height:2vh;margin:1%;padding:2%;text-align:center;text-decoration:none;-webkit-user-select:none;user-select:none;width:8vh}.Back-button:hover{background-color:#2737ac;color:#fff}.Comment-editing{background-color:var(--primary-color);border-radius:10px;color:var(--secondary-color);margin-bottom:1vh;margin-right:5vh;padding:1vh}.Comment-editing:empty:before{color:var(--secondary-color);content:"Write comment here...";opacity:46%}.Refresh-button{align-content:center;background-color:var(--primary-color);border-radius:20px;cursor:pointer;font-size:15px;height:5vh;margin:1%;padding:1%;text-align:center;transition:.3s;-webkit-user-select:none;user-select:none;width:8vh}.Refresh-button:hover{background-color:maroon;color:#fff;transition:.13s}@media screen and (max-width:400px){.SelectedPlaylist-artwork{height:200px}.Track{margin-right:1vh}.Refresh-button{position:relative;right:150px}.Edit-button{border:1px solid #4757cc;bottom:25px;right:40px}}
/*# sourceMappingURL=main.62478498.css.map*/