main.css

:root {
  --yellow: #CC1E;
  --gray: #333D;
  --red: #D22D;
  --orange: #E72D;
  --green: #2D2D;
  --blue: #22DD;
  --indigo: #72DD;
  --violet: #F0D9;
  --bg: var(--yellow);
  --fg: var(--gray);
  --accent: var(--red);

  --player-height: 2rem;
}

@media(prefers-color-scheme: dark) {
  :root {
    --bg: var(--gray);
    --fg: var(--yellow);
  }
}

body, html {
  background-color: var(--bg);
  color: var(--fg);
}

#scrollbar {
  border: 0.2rem solid var(--fg);
  background-color: var(--bg);
}

#slider {
  width: 1rem;
  height: 1rem;
  border: 0.25rem solid var(--fg);
  background-color: var(--bg);
  margin: 0.25rem;
  position: relative;
}

#slider:hover {
  background-color: var(--accent);
}

#slider.active {
  background-color: var(--green);
}

#music {
  display: flex;
  width: 95%;
  height: var(--player-height);
  border: thin solid var(--fg);
  position: fixed;
  bottom: 0;
}

.loading + #music {
  display: none;
}

html, body, #content {
  margin: 0;
  padding: 0;
}

html, body, #display, .markup {
  height: 100svh;
}

#content {
  height: calc(100svh - var(--player-height));
  margin-bottom: var(--player-height);
}

html, body, #display, #content, #content > .single, .markup {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

body, #content.loading {
  flex-direction: row;
}

#content.loading {
  flex-grow: unset;
  flex-wrap: wrap;
  gap: 0.25vmin;
  align-items: center;
}

#content.loading img {
  width: 8vmin;
  height: 8vmin;
}

#content {
  list-style: none;
}

.loading img {
  border: 0.5vmin solid var(--orange);
}

.loaded img {
  border-color: var(--green);
}

.errored img {
  border-color: var(--red);
}

#content .single, #content .single img {
  max-height: 100%;
  max-width: 100%;
}

#content .single img {
  object-fit: contain;
}