/* Match pcg.org: Crimson Text at one heading weight, Open Sans for interface,
   coral #ee3626 instead of the brick red, header black #242424. */

:root {
  --red: #ee3626;
  --red-text: #ee3626;
  --red-deep: #d12e20;
  --legacy-red: #ee3626;
}

body,
button,
input,
select,
textarea,
.official-bar,
.site-header,
.nav-toggle {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1-as-h2,
.home-title,
.hero h1,
.hero h2,
.page-hero h1,
.page-hero h2 {
  font-family: "Crimson Text", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
}

.give-button,
.site-header .give-button,
.button-primary,
.btn-primary,
.btn.btn-primary,
.site-chrome-give {
  background: #ee3626;
  border-color: #ee3626;
  color: #fff;
}
.give-button:hover,
.site-header .give-button:hover,
.button-primary:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
.site-chrome-give:hover {
  background: #d12e20;
  border-color: #d12e20;
}

/* One boxed Explore control, on every page that has it. */
button.nav-toggle,
.site-header button.nav-toggle {
  border: 1px solid #242424;
  border-radius: 4px;
  background: #fff;
  color: #242424;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  box-shadow: none;
}
button.nav-toggle:hover,
.site-header button.nav-toggle:hover {
  border-color: #ee3626;
  color: #ee3626;
}
button.nav-toggle:focus-visible,
.site-header button.nav-toggle:focus-visible {
  outline: 2px solid #ee3626;
  outline-offset: 2px;
}