/*
Wondercraft palette:
Birch: #f3efe6
Forest Green: #4f6b58
Slate Blue: #5e748c
Wood Brown: #7a5c48
Soft Copper: #b67a4b
*/

:root {
  --birch: #f3efe6;
  --cream: #fffaf0;
  --forest: #4f6b58;
  --forest-dark: #35483b;
  --slate: #5e748c;
  --wood: #7a5c48;
  --copper: #b67a4b;
  --ink: #24302a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(243, 239, 230, 0.92), rgba(243, 239, 230, 0.92)),
    url("../images/birch-background.jpg");
  background-color: var(--birch);
  background-size: cover;
  background-attachment: fixed;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
.navbar-brand {
  font-family: Georgia, "Times New Roman", serif;
}

h1,
h2 {
  color: var(--forest-dark);
}

a {
  color: var(--forest-dark);
}

a:hover {
  color: var(--copper);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--forest-dark);
  color: white;
  padding: .75rem;
  z-index: 9999;
}

.skip-link:focus {
  left: 0;
}

.navbar {
  background-color: rgba(53, 72, 59, 0.96);
}

.navbar-brand,
.nav-link,
.dropdown-item {
  letter-spacing: .02rem;
}

.navbar-brand,
.navbar .nav-link {
  color: #fff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #f2d8bc !important;
}

.dropdown-menu {
  background-color: var(--cream);
  border: 1px solid rgba(79, 107, 88, .25);
}

.hero-carousel img {
  height: 340px;
  object-fit: cover;
  filter: brightness(72%);
}

.carousel-caption {
  background-color: rgba(83, 138, 111, 0.62);
  border-radius: 1rem;
  padding: 1rem;
}

.section-pad {
  padding: 3rem 0;
}

.soft-card {
  border: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background-color: rgba(255, 250, 240, .92);
  box-shadow: 0 10px 28px rgba(36, 48, 42, .12);
}

.soft-card img {
  height: 220px;
  object-fit: cover;
}

.btn-wonder {
  background-color: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

.btn-wonder:hover,
.btn-wonder:focus {
  background-color: var(--forest-dark);
  border-color: var(--forest-dark);
  color: #fff;
}

.btn-outline-wonder {
  border-color: var(--forest);
  color: var(--forest-dark);
}

.btn-outline-wonder:hover {
  background-color: var(--forest);
  color: #fff;
}

.callout {
  background-color: rgba(94, 116, 140, .13);
  border-left: .4rem solid var(--slate);
  border-radius: 1rem;
  padding: 1.25rem;
}

.timeline {
  position: relative;
  padding-left: 1rem;
}

.timeline-item {
  background-color: rgba(255, 250, 240, .9);
  border-left: .35rem solid var(--forest);
  border-radius: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  box-shadow: 0 5px 15px rgba(36, 48, 42, .08);
}

.badge-nature {
  background-color: rgba(79, 107, 88, .12);
  color: var(--forest-dark);
  border: 1px solid rgba(79, 107, 88, .25);
}

.video-card {
  max-width: 920px;
  margin: 0 auto;
}

footer {
  background-color: var(--forest-dark);
  color: #fff;
  padding: 2rem 0;
}

footer a {
  color: #f2d8bc;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}

.page-header {
  background: linear-gradient(rgba(53, 72, 59, .75), rgba(53, 72, 59, .75)), url("../images/forest-header.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 4rem 0;
}

.page-header h1 {
  color: white;
}

.resource-list li {
  margin-bottom: .5rem;
}

@media (min-width: 768px) {
  .hero-carousel img {
    height: 470px;
  }

  .section-pad {
    padding: 4rem 0;
  }
}

@media (min-width: 1024px) {
  .hero-carousel img {
    height: 560px;
  }
}