@import url("https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap");
html {
  font-family: "M PLUS 2", system-ui, sans-serif;
}

:root {
  --color-0: colours.$primary-100;
  --color-1: colours.$primary-200;
  --color-2: colours.$primary-300;
  --color-3: colours.$primary-400;
}

* {
  box-sizing: border-box;
}

body {
  background: white;
  background-size: 100vw;
  color: black;
  margin: 0;
}

#colors {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  overflow: clip;
  display: flex;
  flex-wrap: wrap;
}
#colors::after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  backdrop-filter: blur(90px);
  background: rgba(0, 0, 0, 0.2);
  content: "";
}
#colors > .cell {
  width: 128px;
  flex-grow: 1;
  transition: background-color 5s ease-in-out;
}
#colors > .cell.color-0 {
  background-color: #30483b;
}
#colors > .cell.color-1 {
  background-color: #30483b;
}
#colors > .cell.color-2 {
  background-color: #30483b;
}
#colors > .cell.color-3 {
  background-color: #30483b;
}
#colors > .cell.color-4 {
  background-color: #30483b;
}

#wrapper {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 1000px;
}

main {
  border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, 0.2);
  color: black;
  box-shadow-color: black;
  box-shadow-spread: 25px;
  box-shadow-blur: 5px;
  box-shadow-offset: 0 0;
  max-width: 1000px;
  width: 100%;
  display: grid;
  grid-template: "header" auto "live" auto "recents" auto "footer" 32px/auto;
  backdrop-filter: blur(10px);
  margin-bottom: 2em;
}

.song {
  display: grid;
  gap: 1rem;
  grid-template: "art texts" 200px/200px auto;
}
.song .img-wrapper::after {
  content: "*";
  font-family: "Maple Mono", monospace;
  font-size: 8pt;
  font-weight: bold;
  padding: 1pt 2pt;
  border-radius: 0.25rem;
  background-color: #ffdf0e;
  color: black;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(-50%);
  transition: all 0.25s ease-out;
}
.song.new-item .img-wrapper::after {
  opacity: 1;
  transform: translateY(0);
}
.song .img-wrapper {
  --background-image: unset;
  position: relative;
  transition: scale 0.25s ease-in-out;
}
@supports (selector(:has(.loaded))) {
  .song .img-wrapper {
    scale: 0.9;
  }
}
.song .img-wrapper:has(.loaded) {
  scale: 1;
}
.song .img-wrapper > img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.song .img-wrapper > img.loaded {
  opacity: 1;
}
.song .img-wrapper:before {
  background-color: black;
  background-image: var(--background-image);
  background-position: center;
  background-size: cover;
  filter: saturate(0) brightness(0.4);
  color: white;
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: filter 1s ease-in-out;
}
.song > .texts {
  min-width: 0;
}
.song > .texts > * {
  margin: 0;
}
.song > .texts h1 {
  font-size: 2.75em;
  font-weight: 700;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 1ch;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
.song > .texts h1.MARQUEE_HIDDEN {
  opacity: 0;
}
.song > .texts h2 {
  opacity: 0.8;
}
.song > .texts h3 {
  font-size: 1.75em;
  overflow: clip;
  text-overflow: ellipsis;
  text-wrap: pretty;
  font-weight: 700;
  max-width: 100%;
}
.song > .texts .artist {
  font-size: 1.3em;
  font-weight: 500;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 1ch;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
.song > .texts .artist.MARQUEE_HIDDEN {
  opacity: 0;
}
.song > .texts .album {
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 1ch;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
.song > .texts .album.MARQUEE_HIDDEN {
  opacity: 0;
}
.song.little {
  padding-bottom: 8px;
  grid-template: "art texts" 128px/128px auto;
}
.song.little > .img-wrapper > img {
  width: 128px;
  height: 128px;
}

.header {
  background: rgba(48, 72, 59, 0.8);
  color: white;
  display: grid;
  grid-template: "logo logo" auto "return connected" 32px/auto 375px;
  padding: 8px 8px 8px 16px;
  align-items: center;
}
@media screen and (max-width: 900px) {
  .header {
    grid-template: "logo logo" auto "return return" 32px "connected connected" 32px/auto;
  }
}

#return {
  grid-area: return;
}
#return a {
  color: inherit;
}

@property --connecting-gradient-a {
  syntax: "<color>";
  initial-value: rgba(72, 116, 96, 0);
  inherits: false;
}
@property --connecting-gradient-b {
  syntax: "<color>";
  initial-value: #487460;
  inherits: false;
}
#connected-wrapper {
  grid-area: connected;
  text-align: right;
  background: linear-gradient(to right, var(--connecting-gradient-a) 50px, var(--connecting-gradient-b));
  margin: -8px 8px -16px;
  border-radius: 8px 8px 0 0;
  transition: --connecting-gradient-a 2.5s ease-in, --connecting-gradient-b 2.5s ease-in;
}
#connected-wrapper.reconnecting {
  --connecting-gradient-a: #ff690000;
  --connecting-gradient-b: #ff6900FF;
}
#connected-wrapper.disconnected {
  --connecting-gradient-a: #ff000000;
  --connecting-gradient-b: #ff0000;
}

#connected {
  margin: 8px 16px 16px;
}

#live {
  background: rgba(190, 221, 211, 0.9);
  color: black;
  padding: 8px 16px;
}

#recents {
  margin: 0;
  padding: 8px 16px;
  list-style: none;
  background: rgba(228, 241, 237, 0.9);
  color: black;
  counter-reset: listItem;
}
#recents li::before {
  counter-increment: listItem;
}
#recents li:nth-child(1) {
  animation-delay: 75ms;
}
#recents li:nth-child(1) .img-wrapper::after {
  transition-delay: 25ms;
}
#recents li:nth-child(2) {
  animation-delay: 150ms;
}
#recents li:nth-child(2) .img-wrapper::after {
  transition-delay: 50ms;
}
#recents li:nth-child(3) {
  animation-delay: 225ms;
}
#recents li:nth-child(3) .img-wrapper::after {
  transition-delay: 75ms;
}
#recents li:nth-child(4) {
  animation-delay: 300ms;
}
#recents li:nth-child(4) .img-wrapper::after {
  transition-delay: 100ms;
}
#recents li:nth-child(5) {
  animation-delay: 375ms;
}
#recents li:nth-child(5) .img-wrapper::after {
  transition-delay: 125ms;
}
#recents li:nth-child(6) {
  animation-delay: 450ms;
}
#recents li:nth-child(6) .img-wrapper::after {
  transition-delay: 150ms;
}
#recents li:nth-child(7) {
  animation-delay: 525ms;
}
#recents li:nth-child(7) .img-wrapper::after {
  transition-delay: 175ms;
}
#recents li:nth-child(8) {
  animation-delay: 600ms;
}
#recents li:nth-child(8) .img-wrapper::after {
  transition-delay: 200ms;
}
#recents li:nth-child(9) {
  animation-delay: 675ms;
}
#recents li:nth-child(9) .img-wrapper::after {
  transition-delay: 225ms;
}
#recents li:nth-child(10) {
  animation-delay: 750ms;
}
#recents li:nth-child(10) .img-wrapper::after {
  transition-delay: 250ms;
}
#recents li:nth-child(11) {
  animation-delay: 825ms;
}
#recents li:nth-child(11) .img-wrapper::after {
  transition-delay: 275ms;
}
#recents li:nth-child(12) {
  animation-delay: 900ms;
}
#recents li:nth-child(12) .img-wrapper::after {
  transition-delay: 300ms;
}
#recents li:nth-child(13) {
  animation-delay: 975ms;
}
#recents li:nth-child(13) .img-wrapper::after {
  transition-delay: 325ms;
}
#recents li:nth-child(14) {
  animation-delay: 1050ms;
}
#recents li:nth-child(14) .img-wrapper::after {
  transition-delay: 350ms;
}
#recents li:nth-child(15) {
  animation-delay: 1125ms;
}
#recents li:nth-child(15) .img-wrapper::after {
  transition-delay: 375ms;
}
#recents li:nth-child(16) {
  animation-delay: 1200ms;
}
#recents li:nth-child(16) .img-wrapper::after {
  transition-delay: 400ms;
}
#recents li:nth-child(17) {
  animation-delay: 1275ms;
}
#recents li:nth-child(17) .img-wrapper::after {
  transition-delay: 425ms;
}
#recents li:nth-child(18) {
  animation-delay: 1350ms;
}
#recents li:nth-child(18) .img-wrapper::after {
  transition-delay: 450ms;
}
#recents li:nth-child(19) {
  animation-delay: 1425ms;
}
#recents li:nth-child(19) .img-wrapper::after {
  transition-delay: 475ms;
}
#recents li:nth-child(20) {
  animation-delay: 1500ms;
}
#recents li:nth-child(20) .img-wrapper::after {
  transition-delay: 500ms;
}
#recents li:nth-child(21) {
  animation-delay: 1575ms;
}
#recents li:nth-child(21) .img-wrapper::after {
  transition-delay: 525ms;
}
#recents li:nth-child(22) {
  animation-delay: 1650ms;
}
#recents li:nth-child(22) .img-wrapper::after {
  transition-delay: 550ms;
}
#recents li:nth-child(23) {
  animation-delay: 1725ms;
}
#recents li:nth-child(23) .img-wrapper::after {
  transition-delay: 575ms;
}
#recents li:nth-child(24) {
  animation-delay: 1800ms;
}
#recents li:nth-child(24) .img-wrapper::after {
  transition-delay: 600ms;
}
#recents li:nth-child(25) {
  animation-delay: 1875ms;
}
#recents li:nth-child(25) .img-wrapper::after {
  transition-delay: 625ms;
}
#recents li:nth-child(26) {
  animation-delay: 1950ms;
}
#recents li:nth-child(26) .img-wrapper::after {
  transition-delay: 650ms;
}
#recents li:nth-child(27) {
  animation-delay: 2025ms;
}
#recents li:nth-child(27) .img-wrapper::after {
  transition-delay: 675ms;
}
#recents li:nth-child(28) {
  animation-delay: 2100ms;
}
#recents li:nth-child(28) .img-wrapper::after {
  transition-delay: 700ms;
}
#recents li:nth-child(29) {
  animation-delay: 2175ms;
}
#recents li:nth-child(29) .img-wrapper::after {
  transition-delay: 725ms;
}
#recents li:nth-child(30) {
  animation-delay: 2250ms;
}
#recents li:nth-child(30) .img-wrapper::after {
  transition-delay: 750ms;
}
#recents li:nth-child(31) {
  animation-delay: 2325ms;
}
#recents li:nth-child(31) .img-wrapper::after {
  transition-delay: 775ms;
}
#recents li:nth-child(32) {
  animation-delay: 2400ms;
}
#recents li:nth-child(32) .img-wrapper::after {
  transition-delay: 800ms;
}
#recents li:nth-child(33) {
  animation-delay: 2475ms;
}
#recents li:nth-child(33) .img-wrapper::after {
  transition-delay: 825ms;
}
#recents li:nth-child(34) {
  animation-delay: 2550ms;
}
#recents li:nth-child(34) .img-wrapper::after {
  transition-delay: 850ms;
}
#recents li:nth-child(35) {
  animation-delay: 2625ms;
}
#recents li:nth-child(35) .img-wrapper::after {
  transition-delay: 875ms;
}
#recents li:nth-child(36) {
  animation-delay: 2700ms;
}
#recents li:nth-child(36) .img-wrapper::after {
  transition-delay: 900ms;
}
#recents li:nth-child(37) {
  animation-delay: 2775ms;
}
#recents li:nth-child(37) .img-wrapper::after {
  transition-delay: 925ms;
}
#recents li:nth-child(38) {
  animation-delay: 2850ms;
}
#recents li:nth-child(38) .img-wrapper::after {
  transition-delay: 950ms;
}
#recents li:nth-child(39) {
  animation-delay: 2925ms;
}
#recents li:nth-child(39) .img-wrapper::after {
  transition-delay: 975ms;
}
#recents li:nth-child(40) {
  animation-delay: 3000ms;
}
#recents li:nth-child(40) .img-wrapper::after {
  transition-delay: 1000ms;
}
#recents li:nth-child(41) {
  animation-delay: 3075ms;
}
#recents li:nth-child(41) .img-wrapper::after {
  transition-delay: 1025ms;
}
#recents li:nth-child(42) {
  animation-delay: 3150ms;
}
#recents li:nth-child(42) .img-wrapper::after {
  transition-delay: 1050ms;
}
#recents li:nth-child(43) {
  animation-delay: 3225ms;
}
#recents li:nth-child(43) .img-wrapper::after {
  transition-delay: 1075ms;
}
#recents li:nth-child(44) {
  animation-delay: 3300ms;
}
#recents li:nth-child(44) .img-wrapper::after {
  transition-delay: 1100ms;
}
#recents li:nth-child(45) {
  animation-delay: 3375ms;
}
#recents li:nth-child(45) .img-wrapper::after {
  transition-delay: 1125ms;
}
#recents li:nth-child(46) {
  animation-delay: 3450ms;
}
#recents li:nth-child(46) .img-wrapper::after {
  transition-delay: 1150ms;
}
#recents li:nth-child(47) {
  animation-delay: 3525ms;
}
#recents li:nth-child(47) .img-wrapper::after {
  transition-delay: 1175ms;
}
#recents li:nth-child(48) {
  animation-delay: 3600ms;
}
#recents li:nth-child(48) .img-wrapper::after {
  transition-delay: 1200ms;
}
#recents li:nth-child(49) {
  animation-delay: 3675ms;
}
#recents li:nth-child(49) .img-wrapper::after {
  transition-delay: 1225ms;
}
#recents li:nth-child(50) {
  animation-delay: 3750ms;
}
#recents li:nth-child(50) .img-wrapper::after {
  transition-delay: 1250ms;
}
#recents li.new-item {
  opacity: 0;
  animation: new-item-animation 300ms ease-in-out forwards;
}

@keyframes new-item-animation {
  from {
    opacity: 0;
    transform: translateY(-25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.debug {
  display: none;
}

.font-small {
  font-size: 0.9em;
}

.footer {
  background-color: #a26477;
  color: white;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  margin: 0;
}

/*# sourceMappingURL=app.css.map */