/* override bootstrap */

.btn-link {
  --bs-btn-color: white;
  --bs-btn-hover-color: #7f7f7f;
  --bs-btn-active-color: #ffc90e; 
}

.btn-close:focus {
  box-shadow: 0 0 0 #000;;
}

/*********************/

/* styles specific for site */

:root {
  --color-logo-gray: #7f7f7f;
  --color-logo-yellow: #ffd40e;
  --color-background: black;

  --bs-modal-color: ;
  --bs-border-color: #495057;
  --bs-border-width: 1px;
  --bs-modal-padding: 1rem;
  --bs-modal-bg: #212529;
  --bs-modal-border-color: var(--bs-border-color)
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: 0.5rem;
  --bs-modal-inner-border-radius: calc(0.5rem - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
}

body {
  background-color: var(--color-background);
  color: white;
}

a:link, a:visited {
  color: #fcdb68;
}

a:hover, a:active {
  color: var(--color-logo-gray);
}

.strong-link a:link, .strong-link a:visited {
  color: var(--color-logo-yellow);
  font-weight: bold;
}

.strong-link a:hover, .strong-link a:active {
  color: var(--color-logo-gray);
}

.soft-link a:link, .soft-link a:visited {
  color: #fde8a0;
}

.soft-link a:hover, .strong-link a:active {
  color: var(--color-logo-gray);
}

.subheader {
  color: var(--color-logo-gray);
}

.fs-8 {
  font-size: 0.88rem !important;
}
.fs-9 {
  font-size: 0.8rem !important;
}
.fs-10 {
  font-size: 0.75rem !important;
}

.pe-8 {
  padding-right: 5rem !important;
}

.food-photo {
  width: 10rem;
  height: 10rem;
  padding: 0.4rem !important;
}

.prev-next-arrow {
  padding: 0rem !important;
}

.modal-dialog {
  top: 10vh;
  left: 10vw;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  max-width: 60%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.dialog-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.dialog-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.dialog-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.dialog-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.recipe {
  font-family: "Arial", sans-serif;
  padding: var(--bs-modal-padding);
}

.recipe-title {
  color: var(--color-logo-yellow);
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: .5rem;
}

.recipe-servings {
  text-transform: lowercase;
  font-weight: normal;
  margin-top: 0;
}

.recipe .food-photo {
  width: 20rem;
  height: 20rem;
  padding: 0.4rem !important;
}

.recipe-ingredients .recipe-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 1.5rem;
}

.recipe-ingredients p {
  margin-bottom: 0;
  margin-top: 0;
}

.recipe-instructions .recipe-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 2rem;
}

.recipe-notes .recipe-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 2rem;
}

.recipe-references .recipe-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 1.8rem;
}

.recipe-references p {
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 576px) {
  #SPL_verse_top {
    display: none;
  }
  #SPL_verse_bottom {
    display: inline-flex !important;
  }
  .prev-next-arrow svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .header-pe, .mission {
    padding-right: 0rem !important;
  }
  .tagline {
    padding: 0rem !important;
  }
  .modal-dialog {
    top: 0vh;
    left: 0vw;
  }
  .dialog-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  .food-photo {
    width: 4.25rem;
    height: 4.25rem;
    padding: 0rem !important;
  }
  .pricing {
    width: 100% !important;
  }
  .order-here {
    width: 100% !important;
  }
  .recipe .food-photo {
    width: 10rem;
    height: 10rem;
    padding-top: 2rem !important;
  }
}

@media (max-width: 768px) {
  #SPL_verse_top {
    padding-top: 1rem !important;
  }
  .modal-dialog {
    top: 0.5vh;
    left: 0.5vw;
  }
  .dialog-content {
    max-width: 85%;
  }
  .food-photo {
    width: 6rem;
    height: 6rem;
    padding: .25rem !important;
  }
  .pricing {
    width: 100% !important;
  }
  .order-here {
    width: 100% !important;
  }
  #recipe-photo-lg {
    display: none !important;
  }
  #recipe-photo-sm {
    display: flex !important;
    flex: 0 0 auto;
    width: 100%;
  }
  .recipe .food-photo {
    width: 10rem;
    height: 10rem;
    padding: .25rem !important;
  }
}

@media (min-width: 768px) {
  .tagline {
    padding-right: 2rem !important;
  }
}
@media (min-width: 992px) {
  .tagline {
    padding-right: 3rem !important;
  }
}
@media (min-width: 1200px) {
  .tagline {
    padding-right: 5rem !important;
  }
}


/*
<576px	Small
≥576px	Medium
≥768px	Large
≥992px	X-Large
≥1200px	XX-Large
≥1400px
*/