@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0";:root{--base-font-size: 18px;--page-background-color: #000000;--primary-text-color: #FFFFFF;--secondary-text-color: #A7A7A7;--section-background-color: #121212;--section-border-radius: .5rem;--background-color-hover: hsla(0,0%,100%,.07);--control-border-color: #878787;--control-border-color-hover: #FFFFFF;--error-background-color: red}*{margin:0;padding:0;box-sizing:border-box}html{font-family:Nunito Sans,sans-serif;font-size:var(--base-font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;max-height:100vh;display:flex;flex-direction:column;background-color:var(--page-background-color)}#root{flex-grow:1;display:flex;flex-direction:column;min-height:0;margin:.5rem}h1{font-size:2rem}h2{font-size:1.5rem;font-weight:700}button{padding:.5em 2em;font-size:1em;border-radius:1em;border-style:solid;border-width:1px;border-color:var(--control-border-color);line-height:1em;background-color:transparent;color:inherit;cursor:pointer;display:flex;justify-content:center;align-items:center}button:hover{background-color:var(--background-color-hover);border-color:var(--control-border-color-hover)}button .icon{font-size:1.5em}input{font-size:1em;background-color:transparent;border-color:var(--control-border-color);border-width:0;border-bottom-width:1px;border-style:solid;padding:.25em;color:inherit}input:hover{border-color:var(--control-border-color-hover)}.App{min-height:0;flex-grow:1;background-color:var(--page-background-color);color:var(--primary-text-color);display:flex;flex-direction:column}.App-header{height:5rem;padding:.5rem 1rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:var(--section-background-color);border-radius:var(--section-border-radius)}.App-header h1{flex-grow:1}.App-header .user{display:flex;flex-direction:row;align-items:center}.App-header .user button{margin:1rem}.App main{min-height:0;flex-grow:1;display:grid;grid-template-rows:minmax(0,25%) minmax(0,1fr);grid-template-columns:1fr 1fr;grid-column-gap:.5rem;margin:.5rem;justify-content:center}.App main .login{grid-area:1 / 1 / span 2 / span 2;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.SearchBar{grid-area:1 / 1 / span 1 / span 1;align-self:center;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.SearchResults{grid-area:2 / 1 / span 1 / span 1}.Playlist{grid-area:1 / 2 / span 2 / span 1}.SearchResults,.Playlist{background-color:var(--section-background-color);border-radius:var(--section-border-radius);padding:.25rem 0 0;display:flex;flex-direction:column}.SearchResults h2{padding:.25em;margin:.5rem}.Playlist .controls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;column-gap:.25rem;padding-bottom:.5rem}.Playlist .controls input{font-size:1.5rem;font-weight:700;margin:.5rem;flex-grow:1;color:inherit}.TrackList{overflow-y:auto;flex-grow:1;list-style:none;display:flex;flex-direction:column}.TrackList li{padding:.5rem 1rem}.TrackList .Track{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-rows:auto auto;grid-gap:.25rem 1rem}.TrackList .Track:hover{background-color:var(--background-color-hover)}.TrackList .Track .thumbnail{grid-area:1 / 1 / span 2 / span 1;display:block;max-height:4rem;object-fit:cover;aspect-ratio:1}.TrackList .Track .trackName{grid-area:1 / 2 / span 1 / span 2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.TrackList .Track .artistName{color:var(--secondary-text-color);grid-area:2 / 2 / span 1 / span 1;font-size:.75rem;font-weight:bolder;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.TrackList .Track .artistName:after{color:var(--secondary-text-color);display:inline-block;content:"•";position:relative;left:.375rem;width:1rem}.TrackList .Track .albumName{color:var(--secondary-text-color);grid-area:2 / 3 / span 1 / span 1;font-size:.75rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.TrackList .Track button{grid-area:1 / 4 / span 2 / span 1;align-self:center;width:2rem;aspect-ratio:1;padding:0;margin-left:1rem}.ErrorPane{background-color:var(--error-background-color);position:fixed;padding:1rem 2rem;top:0;left:calc(50% - 22.5rem);width:45rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;column-gap:.5rem}.ErrorPane .message{flex-grow:1}.ErrorPane button{border:none;padding:0}