:root {
  --bs-danger: #bc4600;
  --bs-danger-rgb: 188, 70, 0;

  --bs-danger-bg: #bc4600;
  --bs-danger-border: #bc4600;
  --bs-danger-hover-bg: #a03e00;
  --bs-danger-hover-border: #a03e00;
  --bs-danger-active-bg: #803200;
  --bs-danger-active-border: #803200;
  --bs-danger-color: #fff;
  --bs-warning: #fbc23e;
  --bs-warning-bg: #fbc23e;
  --bs-warning-border: #fbc23e;
  --bs-warning-hover-bg: #e6ac2f;
  --bs-warning-hover-border: #e6ac2f;
  --bs-warning-active-bg: #cc9926;
  --bs-warning-active-border: #cc9926;
  --bs-warning-color: #212529;
}

html,
body {
  height: 100%;
}

#homepage {
  position: relative;
}

#homepage-carousel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#homepage-carousel .carousel-item {
  background: no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

#homepage #mainnav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 360px;
  padding: 32px;
  background-color: #bc4600;
  z-index: 10;
}

#logo {
  display: block;
  margin: 0 auto;
  max-width: 240px;
}

#mainnav,
#navbar {
  background-color: #bc4600;
}

#mainnav *,
#navbar * {
  color: #fbc23e !important;
}

#mainnav .nav-link,
#navbar .nav-link {
  color: #fbc23e;
}

#subnav *,
#subnav .nav-link,
#subnavMenu .nav-link {
  color: #bc4600;
}

#subnav .nav-link.active span,
#subnavMenu .nav-link.active span {
  border-bottom: 2px solid #bc4600;
}

#mainnav .nav-link:hover,
#navbar .nav-link:hover {
  color: #fce0a3;
}

#navbar .navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28251, 194, 62, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  border-color: #fbc23e;
  border: 0;
}

#bd {
  background: url('/img/henna-8325018_640.png') center repeat;
  min-height: 100%;
}

@media (max-width: 991.98px) {
  #bd.is-recipe #subnav {
    display: none;
  }

  #bd.is-category #main {
    display: none;
  }

  #bd.is-category #subnav .nav-link.active span,
  #bd.is-category#subnavMenu .nav-link.active span {
    border-bottom: 0;
  }
}

@media (min-width: 992px) {
  #bd {
    overflow: hidden;
    height: 100vh;
  }

  #subnav {
    max-width: 300px;
  }
}

.card.with-scrollable {
  background-color: rgba(255, 255, 255, 0.92);
}

.sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-danger);
  padding: .5rem 1rem;
  margin-bottom: 0;
  border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
  z-index: 10;
}

@media (min-width: 992px) {
  .scrollable {
    /* flex: 1 1 auto; */
    overflow: auto;
    z-index: 0;
    height: calc(100vh - 168px);
    scrollbar-color: var(--bs-secondary) transparent;
    /* scrollbar-width: thin; */
  }
}