* {
  box-sizing: border-box;
}

html {
  font-size: 11vh;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

@property --gradient-top {
  syntax: "<color>";
  initial-value: #300600;
  inherits: false;
}

@property --gradient-bottom {
  syntax: "<color>";
  initial-value: #0d0000;
  inherits: false;
}

#player {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0.8rem;

  color: #f5f5f5;
  font-family: sans-serif;

  border: 0.2rem solid #570400;
  border-radius: 0.8rem;
  box-shadow: inset 0 0.4rem 0.6rem 0 #00000080;

  --gradient-top: #300600;
  --gradient-bottom: #0d0000;

  background: linear-gradient(
    180deg,
    var(--gradient-top) 0%,
    var(--gradient-bottom) 100%
  );

  transition:
    --gradient-top 1s ease-in-out,
    --gradient-bottom 1s ease-in-out,
    border-color 1s ease-in-out;

  &.playing {
    border-color: #781200;

    --gradient-top: #630f00;
    --gradient-bottom: #1a0000;
  }
}

#status {
  display: block;

  font-size: 0.8rem;
  color: #aaaaaa;
  user-select: none;
}

#track-info {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

#title {
  font-size: 1.1rem;
  font-weight: 700;
}

#artist {
  color: #dddddd;
}

#release,
#meta {
  color: #888888;
  font-size: 0.9rem;
}

#status,
#title,
#artist,
#release,
#meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidden {
  opacity: 0;
}