body {
  background: url(../img/smalljohnnablue.jpg);
  background-attachment: fixed;
  background-position: bottom center;
}

h1, h2, h3, h1 > span {
  font-family: "Prata", serif;
}

*, p {
  font-family: "Mulish", sans-serif;
  font-weight: 300;
}

p.emphasis {
  font-weight: bold;
  color: #07557b;
}

a {
  color: #f189ba;
  text-decoration: none;
}

a:hover {
  color: #f189ba6b;
}

.background-transparent {
  background-color: #0404048c;
}

span.jfa {
  font-family: "Prata", serif;
}

small.credit {
  font-style: italic;
}

.credit.truck-credit {
  text-align: center;
  padding-top: 0.5em;
}

/*Hero Styling*/
.hero {
  padding: 3% 0 5%;
}

.hero-shape h3.aside {
  font-size: 12px;
  font-style: italic;
}

main {
  padding: 1em 0;
}

.hero-shape {
  padding: 1em;
  color: white;
  margin-top: 2em;
}

.hero-shape h1 {
  font-size: 3em;
}

.hero-shape p:first-of-type {
  margin-top: 2em;
}

.hero-shape p {
  text-align: justify;
}

/*Nav Styling*/
.item {
  width: 100%;
}

.item a {
  color: black;
  text-decoration: none;
}

.item a:hover, .item-special:hover {
  color: white;
  text-decoration: none;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  padding: 2em 0;
  font-weight: bolder;
}

.nav-buttons > div, .nav-buttons > button, .nav-buttons > a {
  box-shadow: 0px 15px 25px -4px rgba(30, 30, 60, 0.25);
  border-radius: 5px;
  margin-bottom: 0.5em;
  background-color: white;
  padding: 1em;
  text-align: center;
  font-weight: bold;
}

.nav-buttons > .item-special {
  background-color: #f189ba;
}

.modal-submit {
  margin-top: 1em;
}

.modal-form .form-group {
  padding-bottom: 0.5em;
}

/*Box Styling*/
.box {
  height: 100%;
  background-color: white;
  box-shadow: 0px 15px 25px -4px rgba(30, 30, 60, 0.25);
  margin-bottom: 5em;
  padding: 5em 1em;
}

.box-shape p {
  text-align: justify;
  padding-top: 1em;
}

.box-shape p:first-of-type {
  margin-top: 1.5em;
}

.box-shape p:first-of-type:not(.accordion-body) {
  margin-top: 0;
}

.box-shape.hero-paragraph {
  padding-top: 1em;
}

/*Back to Top Button */
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 1;
  background-color: #fff;
  border-radius: 50%;
  border: 3px solid #4c8bb7;
}

#btn-back-to-top a {
  color: #4089aa;
}

/* lined tabs */
.lined .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
}

.lined .nav-link:hover {
  border: none;
  border-bottom: 3px solid transparent;
}

.lined .nav-link.active {
  background: none;
  color: #555;
  border-color: #2b90d9;
}

/* Prompts Modal */
.emailForm {
  border-radius: 10px;
  margin-top: 20px;
  padding-bottom: 10px;
}

textarea {
  height: 220px;
}

.prompts {
  margin-bottom: 2em;
}

.prompts button {
  background-color: #f189ba;
  width: 100%;
  height: 150px;
  border-radius: 10px;
  box-shadow: 0px 15px 25px -4px rgba(30, 30, 60, 0.25);
  border: none;
}

.prompts button h1:hover {
  color: white;
}

.first-prompt {
  margin-bottom: 2em;
}

.big-modal-button {
  font-size: 2.5rem;
  font-family: "Prata", serif;
}

.big-modal-button:hover {
  color: white;
}

.modal-body {
  text-align: left;
}

.modal-submit {
  width: 100%;
  background-color: #f189ba;
  color: white;
}

.modal-body p {
  text-align: justify;
}

textarea.form-control {
  height: 150px;
}

/* Footer */
footer {
  background: #093554b0;
  color: #fffbfb5c;
  position: absolute;
  width: 100%;
}

.footer-shape {
  flex-direction: column;
  display: flex;
}

.footer-shape {
  padding: 1em;
}

.footer-shape p {
  margin-bottom: 0;
  font-size: smaller;
}

.footer-shape p:hover {
  color: white;
}

.footer-shape a {
  color: white;
}

.footer-shape a:hover {
  text-decoration-color: #f189ba;
  color: white;
}

/*Accordion*/
.accordion-body ul, .accordion-body ol {
  padding-left: 1em;
}

.accordion-case {
  padding: 2% 0;
}

.accordion-case li {
  padding-bottom: 0.5em;
  text-align: justify;
}

.accordion-case li > ul {
  padding-bottom: 0.5em;
}

.accordion-case li > ol {
  padding-top: 0.5em;
}

.accordion-case li > ol > li {
  padding-bottom: 0.25em;
}

.accordion-button {
  padding: 1em 0.5em;
}

.accordion-button:not(.collapsed) {
  color: #f189ba;
  background-color: inherit;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.13);
}

.accordion-button:focus {
  z-index: 3;
  outline: 0;
}

/* Cards for Related Books */
.card-title {
  font-size: x-large;
}

.card.related-books {
  box-shadow: 5px 4px 13px -5px #07557b78;
  border: none;
}

.book-cards .card-body {
  padding: 0;
}

.card-ribbon {
  padding: 4em 2em;
  background-color: #07557b;
  color: white;
}

.card-main {
  padding: 1em;
  text-align: justify;
}

.card-text > small {
  color: #ffffffa6;
  font-size: small;
  font-style: italic;
}

.book-cards .card img {
  height: 200px;
}

.img-card {
  padding: 1em;
  display: flex;
  justify-content: center;
}

/*Textual Inspiration*/
.textual-box h2:first-of-type {
  padding-top: 1em;
}

.card.textual-inspir {
  padding: 1em 0;
}

.card.textual-inspir .card-body {
  padding: 2em;
}

.card.textual-inspir {
  background-color: #c0c0c038;
  border: none;
}

.card.textual-inspir.white {
  background-color: white;
}

.card.textual-inspir small {
  color: #23232385;
}

.carousel-inner img {
  margin: auto;
  border-radius: 10px;
  width: 100%;
}

.johnna-art {
  margin-top: 2em;
}

.johnna-art img {
  margin: auto;
  object-fit: cover;
  width: 100%;
}

.book-cards .card-body small {
  color: #cac8c8b0;
  font-style: italic;
}

.visual-box h2 {
  padding-top: 1em;
}

.card.visual-card {
  border: none;
  padding-top: 6em;
}

.card.visual-card.johnna-card {
  padding-top: 2em;
}

/*Carousel*/
.carousel {
  margin: 1em 0;
}

/*Masonry Layout*/
/* Future Plans */
.future-plans {
  padding-top: 6em;
}

/* About Me */
.profile-body ul {
  display: block;
  margin-left: -10px;
}

.profile-body ul li {
  display: block;
  position: relative;
  background-color: #c0c0c038;
  padding: 0.5em 1em;
  text-align: justify;
}

.profile-body ul li:not(:last-child) {
  margin-bottom: 15px;
}

.profile-body ul li:before {
  content: "";
  position: absolute;
  top: 2em;
  left: -30px;
  margin-top: -0.9em;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: linear-gradient(45deg, #F189BA 0%, #e5e5e5 100%);
}

.profile-sidebar {
  margin-top: 2em;
  padding: 1em;
  border-radius: 5px;
}

.profile-photo img {
  border-radius: 50%;
  border: 4px #003860 solid;
  width: 50%;
}

.profile-sidebar p {
  font-size: smaller;
  margin-top: 0.5em;
  padding-top: 2em;
}

/* Section Break 5 */
.section-break-5 {
  background-color: transparent;
  border: 0;
  border-top: 1px solid #9e9e9e;
  display: block;
  height: 0;
  margin: 3rem auto 3rem;
  text-align: center;
  width: 50%;
}
.section-break-5:before {
  background-color: white;
  color: black;
  content: "j";
  display: inline-block;
  font-size: inherit;
  left: 50%;
  letter-spacing: 0;
  line-height: inherit;
  text-indent: 0;
  text-rendering: geometricPrecision;
  transform: translateY(-65%);
  width: 15px;
}

@media (min-width: 992px) {
  .nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .item {
    display: flex;
    width: 30%;
    margin: 0.5em;
    align-items: center;
    justify-content: center;
  }

  .hero {
    padding: 3% 0% 1%;
    text-align: center;
  }

  .hero-shape {
    padding: 4em;
    margin-top: 0;
  }

  .hero-shape p {
    width: 70%;
    margin: 0 auto;
    text-align: justify;
    padding-top: 1em;
  }

  .box {
    border-radius: 10px;
    padding: 5em 2em;
  }

  .box-shape {
    width: 90%;
    margin: 0 auto;
  }

  .box-shape.hero-paragraph {
    padding-top: 3em;
  }

  .nest-description {
    padding: 0 2em;
  }

  .nest-main-img {
    padding: 2em;
  }

  .masonry {
    padding: 1em 2em;
  }

  .carousel {
    padding: 2em;
    margin: 1em 0 0 0;
  }

  .carousel-item img {
    height: 400px;
  }

  .book-slider {
    padding: 1em;
  }

  .card-main {
    padding: 2em;
  }

  .johnna-art img {
    margin: auto;
  }

  .profile-body ul {
    padding: 1em 3em;
  }

  .profile-body {
    padding: 0 2em 0 0;
  }

  .profile-photo img {
    width: 100%;
  }

  .carousel-inner img {
    margin: auto;
    border-radius: 10px;
    width: auto;
  }

  .footer-shape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
@media (min-width: 1200px) {
  .box-shape {
    width: 80%;
  }
}