/* Brand touches on top of the Material theme. */

/* Center the hero banner on the landing page. */
.bj-hero {
  text-align: center;
  margin: 1.5rem 0 2rem;
}

.bj-hero img {
  max-width: 640px;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Center the announcement bar content (Material left-aligns it by default). */
.md-banner__inner {
  text-align: center;
}

.bj-hero .bj-tagline {
  font-size: 1.1rem;
  color: var(--md-default-fg-color--light);
  max-width: 40rem;
  margin: 1rem auto 1.5rem;
}

/* Homepage demo GIF. */
.bj-demo img {
  max-width: 820px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* Slightly lift the grid cards on hover. */
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
}