body{flex-direction:column;align-items:center;justify-content:center;height:100%;overflow-y:auto;margin:0;font-family:Segoe UI,Roboto,Oxygen,Helvetica,Arial,sans-serif;background:linear-gradient(to top,#141414,#545454);background-repeat:no-repeat;background-attachment:fixed;box-sizing:border-box}body.login-page{height:100%;margin:0;overflow:hidden;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{background:linear-gradient(to top,#141414,#123613);width:10px}::-webkit-scrollbar-thumb{background:linear-gradient(to top,#2b2b2b,#848484);border-radius:5px}.recommendations-container ::-webkit-scrollbar{width:10px;background:linear-gradient(#1a421c,#24bb3b,#1a421c);border-radius:5px}.recommendations-container ::-webkit-scrollbar-thumb{background:linear-gradient(to top,#353535,#8d8d8d);border-radius:5px}.recommendations-container{padding:20px;margin-top:15px;text-align:center;display:flex;flex-direction:column;align-items:center}.recommendations-container h3{color:#1db954;font-size:1.25rem;margin-top:5px}.recommendations-container .search-section span{color:gray;font-size:1rem}.search-section,.attributes-section,.playlist-section{color:#fff;width:30%;background:linear-gradient(to top,#1e1e1e,#2d2d2d);border-top:3px solid #1db954;border-bottom:3px solid #1db954;padding:20px;border-radius:15px;margin-bottom:-25px;text-align:left;animation:fade-up .75s ease}.search-section ul li:hover{color:#1db954;background-color:#00000038;border-radius:20px}.search-section img{object-fit:cover;height:50px;width:50px}.recommendations-container .search-section h4,.playlist-section h4{margin-top:20px;font-size:1.2rem;color:#1db954}.recommendations-container ul{list-style-type:none;padding:0;margin-left:10px}.recommendations-container ul li{margin:5px 0 10px;cursor:pointer;list-style-type:none}.recommendations-container ul li:hover{color:#1db954;background-color:#00000038;border-radius:20px}.recommendations-container input[type=text]{-moz-appearance:input;appearance:input;-webkit-appearance:none;width:50%;padding:10px;border-radius:5px;color:#fff;outline-color:#1ecf5c;background-color:transparent;border-bottom:2px solid #1ecf5c;margin-bottom:10px;margin-left:10px}.recommendations-container .playlist-section .playlist-button{padding:10px;background-color:#1db954;border:none;border-radius:30px;cursor:pointer;margin-top:10px;width:100%;color:#fff;font-size:1rem;font-weight:600;outline:white solid 2px}.playlist-button:hover{color:#fff;text-shadow:0px 0px 3px black;transform:scale(1.05);transition:all .3s ease-in-out}.recommendations-container .playlist-section .playlist-button:hover{background-color:#1ecf5c;text-shadow:0px 0px 3px black}.playlist-results{max-height:500px;overflow-y:scroll}.playlist-results li{padding:5px}.recommendations-container input[type=range]{width:100%;border:1px solid grey}.slider-labels{display:flex;justify-content:space-between;color:#b3b3b3;margin-left:3px;width:100%}.sliders div{margin-bottom:15px}.sliders div input{-moz-appearance:input;appearance:input;-webkit-appearance:none;background:linear-gradient(to right,#191919,#545454);border-radius:10px;margin-top:10px}.sliders div ::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#1db954;border-radius:50%;cursor:grab;box-shadow:0 0 5px #0003}.sliders div input::-webkit-slider-thumb:hover{width:25px;height:25px;border:2px solid white;background:#28e46a}.recommendations-container select{width:50%;padding:10px;border-radius:5px;border:2px solid grey;margin-bottom:15px;margin-top:0;margin-left:10px;background-color:#444;color:#fff}.listening-history-container{padding:20px;margin-top:0;text-align:center;display:flex;flex-direction:column;align-items:center}.top-header{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;animation:fade-down .75s ease}.top-header h2{margin:5px;color:#fff;text-shadow:0px 0px 10px #1db954;font-weight:400;font-size:2.5rem}.timeRange{margin-top:3px;margin-bottom:5px;background-color:#4caf50;border-radius:5px;color:#fff;padding:5px;font-size:1rem;border:none;cursor:pointer;border:2px solid white}.listening-history-sections{display:flex;justify-content:space-between;margin-top:20px}.section{width:30%;background:linear-gradient(to top,#111,#252525);box-shadow:0 0 10px #1db954;padding:15px;border-radius:15px;text-align:left;animation:fade-up .75s ease}.section h3{color:#fff;text-align:center;font-size:1.75rem;margin-top:15px;margin-bottom:20px}.track-item,.album-item,.artist-item{display:flex;align-items:center;margin-bottom:15px;margin-left:-25px}li{animation:fade-in .75s ease}.album-title,.artist-item{color:#fff}.album-artist{color:#b3b3b3}.track-item img,.album-item,img{margin-right:15px;border-radius:6px}.artist-item img{border-radius:50%;object-fit:cover;height:50px;width:50px}.artist-genres{overflow:hidden;text-overflow:ellipsis;max-height:70px;color:#b3b3b3}.preview-button{background-color:#1db954;border:2px solid rgb(255,0,0);text-align:center;color:#fff;border:none;padding:5px 8px;border-radius:50%;cursor:pointer;margin-right:15px}.preview-button:focus{background-color:#28e46a;border:2px solid white}.preview-button:hover{border:2px solid white}.await-server-message{position:fixed;bottom:20%;left:50%;transform:translate(-50%);font-size:1.5rem;color:#fff;text-align:center;animation:fade-in .75s ease}.no-preview-message{position:fixed;top:4%;right:40%;left:40%;background-color:#8d8d8d;color:#fff;padding:10px 20px;border-radius:5px;font-size:1rem;animation:fade-in-out 1s forwards;z-index:10}.track-details{display:flex;flex-direction:column}.song-title{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;font-size:1rem}.artist-album{font-size:.9rem;color:#b3b3b3}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 100px);padding-top:60px;text-align:center;overflow:hidden}.dashboard-container{display:flex;flex-direction:column;justify-content:left;height:100%;padding-top:70px;text-align:center}.dashboard-header{position:fixed;top:0;width:100%;background:linear-gradient(to bottom,#1f1f1f,#545454);color:#fff;font-family:Segoe UI,Roboto,Oxygen;padding:10px;box-shadow:0 2px 10px #000000bf;z-index:5;display:flex;animation:fade-in .75s ease}.user-profile-img{border-radius:50%;object-fit:cover;height:40px;width:40px;margin-left:10px;animation:fade-in .75s ease}.github-logo{object-fit:cover;height:30px;width:30px;margin-right:10px;cursor:pointer;transition:transform .2s ease;animation:fade-in .75s ease}.github-logo-login{position:fixed;height:40px;width:40px;top:15px;right:5px;border-radius:50%;box-shadow:0 0 10px #fff;animation:fade-up .75s ease;transition:transform .2s ease}.github-logo-login:hover,.github-logo:hover{transform:scale(1.1)}.dashboard-header .dashboard-header-left{display:flex;justify-content:left;align-items:center;width:50%}.dashboard-header-left .header img{width:10rem;margin-top:.5rem;margin-left:.5rem;margin-right:0rem}.dashboard-header .dashboard-header-left h1{font-weight:400;margin:5px 5px 5px 15px;font-size:2.5rem;text-shadow:0px 0px 10px black;letter-spacing:2px}.dashboard-header .dashboard-header-left p{color:#cfcfcf;margin:0 0 0 20px;font-size:1.8rem;text-shadow:0px 0px 10px black}.dashboard-header .dashboard-header-right{width:50%;display:flex;justify-content:right;align-items:center}.dashboard-header .dashboard-header-right .logout-button button{text-align:center;background-color:#1db954;border-radius:30px;color:#191414;cursor:pointer;font-size:1rem;font-weight:600;width:8rem;outline:white solid 2px;padding:10px;margin-right:35px}.dashboard-header .dashboard-header-right .logout-button button:hover{background-color:#1ecf5c;text-shadow:0px 0px 3px black;color:#fff;transform:scale(1.03);transition:all .3s ease-in-out}.headerbox{display:flex;justify-content:center;align-items:center;left:5px;animation:fade-down .75s ease;margin-bottom:0rem}.header img{width:15rem}.headerbox .header{display:flex;justify-content:center;align-items:center;text-shadow:0px 0px 10px black;color:#fff;font-size:4rem}.headerbox .logo{background:no-repeat;background-image:url(/assets/spotifylogo.png);height:5rem;width:5rem;background-size:cover;background-position:center;margin-left:0}.authbutton{margin-top:20px;text-align:center;background-color:#1db954;border-radius:30px;color:#191414;cursor:pointer;font-size:1rem;font-weight:600;width:12rem;outline:white solid 2px;padding:10px;animation:fade-up .75s ease}.authbutton:hover{color:#fff;text-shadow:0px 0px 3px black;transform:scale(1.1);transition:all .3s ease-in-out}.authbutton:hover{background-color:#1ecf5c;text-shadow:0px 0px 3px black;border:.1rem solid white}.background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:65%;z-index:-1;background-image:url(/assets/albumsgrid.png);background-repeat:repeat-x;background-position:0 0;background-size:cover;animation:slide 75s linear infinite}.background-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0000,#000000bf);animation:vignette 1s ease-in-out forwards;z-index:-1}.gradient-transition{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0%;background:linear-gradient(to top,#141414,#545454);animation:vignette 2s ease-in forwards;z-index:5}@keyframes slide{0%{background-position:0 0}to{background-position:-3900px 0}}@keyframes fade-up{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade-in-out{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes fade-down{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes vignette{0%{opacity:0}to{opacity:1}}@media screen and (max-width: 768px){body,html{height:100%;margin:0}.listening-history-sections,.recommendations-container{flex-direction:column;align-items:center;width:90%}.section,.search-section,.attributes-section,.playlist-section{width:90%;margin-bottom:20px;margin-right:-10px}.dashboard-header .dashboard-header-left h1{font-size:1rem;margin-left:10px}.dashboard-header .dashboard-header-left p{font-size:.75rem;margin-left:5px}.dashboard-header .user-profile-img{height:25px;width:25px}.dashboard-header .dashboard-header-right .logout-button button{font-size:.75rem;padding:5px;width:4rem}.dashboard-header .headerbox .github-logo{height:25px;width:25px}.dashboard-header .dashboard-header-left .header img{width:6rem}.await-server-message{bottom:10%}.top-header h2{margin:-30px}.timeRange{margin-top:40px;margin-bottom:-10px}}@media screen and (min-width: 769px){.listening-history-sections{display:flex;justify-content:space-between;width:90%;margin:0 auto}.section,.search-section,.attributes-section,.playlist-section{width:35%;margin-right:20px;margin-bottom:0}.playlist-section{margin-right:0}}