:root {
  --body-background: #4d4846;
  --accent-color: #FFC43F;
  --dark-color: #222222;
  --light-color: #FFFFFF;
  --primary: #7e7033;
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
           "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
           "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
  height: 100%;
  scroll-padding-top: calc(4.5rem - 1px);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--body-background);
  -webkit-text-size-adjust: 100%;
}


/*Main Navigation Starts*/
#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 700;
  background-color: var(--primary);
}
#mainNav .navbar-brand {
  color: var(--light-color);
}
#mainNav .navbar-nav {
  margin-top: 1rem;
}
#mainNav a.nav-link{
  color: var(--light-color);
}
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: var(--light-color);
}
#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: var(--body-background);
}


@media (min-width: 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    transition: font-size 0.3s;
  }
  #mainNav .navbar-nav {
    margin-top: 0;
  }
  #mainNav.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
}
@media (max-width: 767px) {
    #mainNav a.nav-link{
      font-size: 1em;
    }

}
/*Main Navigation Ends*/


/*Book Images Starts*/
.book-images {
  padding-top: calc(3rem + 60px);
  padding-bottom: 6rem;
}
@media (min-width: 992px) {
  .book-images {
    padding-top: calc(4rem + 90px);
    padding-bottom: 6rem;
  }
}
@media (max-width: 767px) {
  .book-images {
    padding-top: calc(3rem + 50px);
    padding-bottom: 3rem;
  }
}
/*Book Images Ends*/