nav,
nav ul {
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 576px) {
  nav,
  nav ul {
    flex-direction: row;
    align-items: center;
  }
}

.banner {
  align-items: center;
  justify-content: center;
  text-align: center;
  img {
    width: 100%;
  }
  margin-top: 1em;
  margin-bottom: 1em;
}

mark {
  border-radius: 1em 0;
  padding: 0.5rem;
  background: linear-gradient(
    -100deg,
    hsl(from var(--pico-mark-background-color) h s l / 0.2),
    hsl(from var(--pico-mark-background-color) h s l / 0.7) 95%,
    hsl(from var(--pico-mark-background-color) h s l / 0.1)
  );
}

footer div {
  display: flex;
  justify-content: flex-end;
}

main {
  container-type: inline-size;
}

@container (inline-size >= 30em) {
  @supports (text-wrap: pretty) and (hyphenate-limit-chars: 10) {
    blockquote {
      text-align: justify;
      text-wrap: pretty;
      hyphenate-limit-chars: 10;
      hyphens: auto;
    }
  }
}