@font-face {
  font-family: 'SpotifyMixUI';
  src: url('/fonts/SpotifyMixUI-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpotifyMixUI';
  src: url('/fonts/SpotifyMixUI-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpotifyMixUITitle';
  src: url('/fonts/SpotifyMixUITitle-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpotifyMixUITitle';
  src: url('/fonts/SpotifyMixUITitle-Extrabold.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html {
  line-height: normal;
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
}

:root {
  --text-base: #fff;
  --text-subdued-2: #a7a7a7;
  --text-subdued: #b3b3b3;
  --text-bright-accent: #1ed760;
  --panel-gap: 8px;
  --background-base: #121212;
  --essential-bright-accent: #1ed760;
  --background-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
  --dark-overlay-full: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    var(--background-noise);
  --dark-overlay-gradient: linear-gradient(transparent 0, rgba(0, 0, 0, 0.5) 100%),
    var(--background-noise);
  --overlay-to-base: linear-gradient(rgba(0, 0, 0, 0.6) 0, var(--background-base) 100%),
    var(--background-noise);
  scrollbar-color: rgba(255, 255, 255, 0.3), transparent;
}
.main {
  display: grid;
  grid-template-areas:
    'global-nav global-nav global-nav'
    'left-sidebar main-view right-sidebar'
    'now-playing-bar now-playing-bar now-playing-bar';
  gap: var(--panel-gap);
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  padding: var(--panel-gap);
  background-color: black;
  -webkit-font-smoothing: antialiased;
}

input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}