/* User Provided Stylesheet */

:root {
  --book-accent: #7b3f52;
  --music-gold: #c28b37;
  --music-paper: #fffdf8;
}

a {
  text-underline-offset: 0.15em;
}

article img {
  height: auto;
  max-width: 100%;
}

article figure {
  background: var(--music-paper);
  border: 1px solid color-mix(in srgb, var(--book-accent) 18%, transparent);
  border-radius: 0.55rem;
  margin: 1.5rem auto;
  overflow-x: auto;
  padding: 1rem;
  text-align: center;
}

article figcaption {
  color: #554c50;
  font-size: 0.92rem;
  margin: 0.7rem auto 0;
  max-width: 52rem;
  text-align: left;
}

article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.exercise,
.example,
.note,
.problem,
.solution {
  border-left: 0.28rem solid var(--book-accent);
  border-radius: 0.25rem;
  margin: 1.25rem 0;
  padding: 0.2rem 1rem 0.65rem;
}

.exercise {
  background: color-mix(in srgb, var(--music-gold) 9%, transparent);
  border-left-color: var(--music-gold);
}

.example,
.note {
  background: color-mix(in srgb, var(--book-accent) 6%, transparent);
}

.problem,
.solution {
  background: rgb(255 255 255 / 55%);
}

.solution {
  border-left-color: #4f7a66;
}

article blockquote {
  background: color-mix(in srgb, var(--book-accent) 6%, transparent);
  border-left: 0.28rem solid var(--book-accent);
  border-radius: 0.25rem;
  margin: 1.25rem 0;
  padding: 0.2rem 1rem 0.65rem;
}

article blockquote blockquote {
  background: rgb(255 255 255 / 55%);
  border-left-color: var(--music-gold);
  margin: 0.85rem 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --music-paper: #242124;
  }

  article figcaption {
    color: #d8ced2;
  }
}