/* RANDM / dev additions for all themes. Loaded by templates/custom/header.tmpl. */

/* The navbar logo is a charcoal tile with the red slash, so it works on
   light and dark themes. Round its corners a little. */
#navbar-logo img {
  border-radius: 4px;
}

/* Home page (signed-out view). */
.rd-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 0 16px;
}
.rd-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 64px 0;
  text-align: center;
}
.rd-wordmark {
  width: min(640px, 100%);
  height: auto;
}
.rd-wordmark.rd-on-light {
  display: none;
}
html[data-theme*="light"] .rd-wordmark.rd-on-dark {
  display: none;
}
html[data-theme*="light"] .rd-wordmark.rd-on-light {
  display: block;
}
@media (prefers-color-scheme: light) {
  html[data-theme*="auto"] .rd-wordmark.rd-on-dark {
    display: none;
  }
  html[data-theme*="auto"] .rd-wordmark.rd-on-light {
    display: block;
  }
}
.rd-lead {
  max-width: 34em;
  margin: 0;
  font-size: 1.15em;
  color: var(--color-text-light-1);
}
.rd-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}