:root {
  --bg-color: #fffaf5;
  --bg-color-faded: #fffdfa;
  --primary-color: #af4a44;
  --extra-color: #4dadaa;
  --bs-border-color: #dfdad5; /* override colors in bootstrap */
}

.cursive {
  font-family: "grafolita-script", sans-serif;
  font-size: 6em;
  font-weight: 100!important;
  color: var(--extra-color);
}

body {
  background: var(--bg-color);
  font-family: "museo-sans", sans-serif;
}

h2, h3 {
  color: var(--primary-color);
}

.btn-outline-red {
  --bs-btn-color: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 175, 74, 68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
}

.btn {
  --bs-btn-bg: var(--bg-color-faded);
}

.card {
  background: var(--bg-color-faded);
}

.bottom {
  background: #efeae5;
}