:root{--text:#e5e5d7;--dark:#0d0d0c;--green:#6a7349;--light-green:#bdcc87;--primary:#d9a78b;--secondary:#8c5230}*{font-family:Lato,sans-serif;margin:0;padding:0}body{background:#0d0d0c;background:var(--dark)}a{text-decoration:none}#login-container{align-items:center;display:flex;flex-direction:column;gap:4rem;height:90vh;justify-content:center;margin:auto}#login-container p{color:#e5e5d7;color:var(--text);font-size:1.4rem;font-weight:300;max-width:38rem;text-align:center}#login-button{align-items:center;border:1px solid #bdcc87;border:1px solid var(--light-green);border-radius:2rem;color:#bdcc87;color:var(--light-green);display:flex;font-size:1.6rem;font-weight:300;gap:.8rem;padding:1rem 2rem;transition:all .3s ease-in-out}#login-button:hover{background:#bdcc87;background:var(--light-green);color:#0d0d0c;color:var(--dark);cursor:pointer}#top-nav{background:#0d0d0c;background:var(--dark);position:fixed;top:0;width:100%}#top-nav ul{align-items:center;display:flex;gap:1.8rem;justify-content:center;list-style-type:none;padding-block:.6rem}#top-nav ul:hover{cursor:default}#type-nav{border-bottom:1px solid #d9a78b;border-bottom:1px solid var(--primary);color:#d9a78b;color:var(--primary);font-size:1.4rem;font-weight:700;height:2.2rem}#type-nav li:hover,.selected-type{background:#d9a78b;background:var(--primary);color:#8c5230;color:var(--secondary)}#time-range-nav{border-bottom:1px solid #bdcc87;border-bottom:1px solid var(--light-green);color:#bdcc87;color:var(--light-green)}#time-range-nav li:hover,.selected-time-range{text-decoration:underline}#nav-logo{height:1.8rem;left:1rem;position:fixed;top:.8rem}#logout-button{background:none;border:1px solid #8c5230;border:1px solid var(--secondary);border-radius:2rem;color:#8c5230;color:var(--secondary);font-size:1rem;padding:.4rem 2rem;position:fixed;right:1rem;top:.6rem;transition:all .3s ease-in-out}#logout-button:hover{background:#8c5230;background:var(--secondary);color:#0d0d0c;color:var(--dark);cursor:pointer}#display{align-items:flex-start;display:flex;flex-direction:column;margin-top:6rem;margin-inline:auto;padding:2rem 4rem 4rem;width:920px}#container{display:flex;flex-wrap:wrap;gap:1.6rem}.track{height:15rem}.artist{height:13rem}.artist,.genre,.track{color:#bdcc87;color:var(--light-green);display:flex;flex-direction:column;gap:.5rem;margin:auto;width:10rem}.artist:hover,.genre:hover,.track:hover{color:#d9a78b;color:var(--primary)}.artist img,.track img{border-radius:1rem;height:10rem;object-fit:cover;object-position:center;width:10rem}.info{align-items:center;display:flex;gap:.8rem}.info h3,.info h4,.info small{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.info h2{color:#d9a78b;color:var(--primary)}.info small{color:#6a7349;color:var(--green);font-style:italic}#playlist-button{background:none;border:1px solid #bdcc87;border:1px solid var(--light-green);border-radius:2rem;color:#bdcc87;color:var(--light-green);font-size:1.2rem;font-weight:300;margin-bottom:1rem;padding:.6rem 2.2rem;transition:all .3s ease-in-out}#playlist-button:hover{background:#bdcc87;background:var(--light-green);color:#0d0d0c;color:var(--dark);cursor:pointer}#playlist-message{border:1px solid #e5e5d7;border:1px solid var(--text);border-radius:.5rem;color:#e5e5d7;color:var(--text);display:none;margin-inline:auto;margin-bottom:1rem;padding:1rem 2rem}#playlist-message a{color:#6a7349;color:var(--green);text-decoration:underline}footer{background:#0d0d0c;background:var(--dark);font-weight:300;gap:1rem;justify-content:center;padding-block:.6rem;width:100%}footer,footer a{align-items:center;color:#d9a78b;color:var(--primary);display:flex}footer a{gap:.4rem;margin-left:1rem}::-webkit-scrollbar{background:#272724;width:.5rem}::-webkit-scrollbar-track{background:none}::-webkit-scrollbar-thumb{background:#6a7349;background:var(--green);border-radius:1rem}@media screen and (max-width:1023px){#login-logo{max-width:90%}#nav-logo{display:none}#logout-button{padding-inline:1rem}#display{max-width:70vw}#container{gap:1rem}.artist,.genre,.track{flex-direction:row;width:100%}.artist,.track{height:3.6rem}.artist img,.track img{border-radius:5rem;height:3.6rem;width:3.6rem}.info h4{font-size:1rem}.info h3{font-size:1.2rem}.info h2{font-size:1.4rem}.info small{font-size:.8rem}}
/*# sourceMappingURL=main.9ea897c8.css.map*/