/* Google fonts Import URL */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Merriweather&family=Raleway&display=swap');

/* GLOBAL STYLES */
/* sets the background colour and the font family for the body of the website */
body {
  background-color: #DAF7FB;
  font-family: 'Raleway', sans-serif;
  padding-top: 9.25rem;
}

/* sets the headings to Merriweather font, centers the text and adds padding */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Merriweather', serif;
  text-align: center;
  padding: 1.25rem;
}

h1 {
  font-size: 4rem;
}

p {
  text-align: center;
}

/* NAVBAR */
/* Additional padding added to the navbar to push in the navbar image and toggler */
.navbar {
  padding: 0.75rem 1.5rem;
}

/* to position the top navbar, z-index added to enable the drop down menu to be viewed above the carousel */
.navbar-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

/* navbar background colour */
.bg-nav {
  background-color: #E9DBFA;
}

/* Styling to the navbar image to make it a circle */
.navbar-brand img {
  border-radius: 50%;
}

/* To style the navbar brand with merriweather font, which is being used for headings, & heading font weight */
.navbar-brand {
  font-family: 'Merriweather', serif;
  font-size: 2.5rem;
}

/* Changes the background colour of the dropdown menu in the navbar*/
.dropdown-menu {
  background-color: #d6b6ff;
}

/* to style the navbar links colour */
.navbar-light .navbar-nav .nav-link {
  color: #000000;
  font-size: 1.25rem;
}

/* HOVER STYLING - hover.css from https://ianlunn.github.io/Hover/ */
/* Hover.css to style the navbar links */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}

.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}

.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* hover.css to style the footer links */
@-webkit-keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.hvr-push {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-push:hover,
.hvr-push:focus,
.hvr-push:active {
  -webkit-animation-name: hvr-push;
  animation-name: hvr-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* PADDING  */
/* Adds extra padding on the sides of the container*/
.container-fluid {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  padding-bottom: 6.25rem;
}

/* Adding top padding to the containers */
.home-container,
.carousel-container,
.about-us-container,
.join-us,
.card-container,
.form-container,
.thank-you-container,
.error-container,
.error-img-container {
  padding-top: 1.25rem;
}

/* Adding bottom padding to containers */
.about-us-container,
.error-container {
  padding-bottom: 3.125rem;
}

/* adding padding to the layout of the cards on books page */
div.col-12.col-lg-6 {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  margin-bottom: 0.938rem;
}

/* CAROUSEL */
/*to make the carousel images stay visable on larger screens without having to scroll*/
@media only screen and (min-width: 1024px) {
  .carousel-item img {
    height: 85vh;
    object-fit: contain;
  }
}

/* CARDS */
/* To make the cards all align at the same height */
.card {
  height: 100%;
}

/*styling the badge in the card header */
.badge-primary {
  background-color: #000000;
  color: #d6b6ff;
  padding: 0.313rem;
}

/* Styling the card headers*/
.card-header {
  padding: 0.75rem 1.25rem;
  background-color: #d6b6ff;
  font-size: 1.5rem;
  font-family: 'Merriweather', serif;
  text-align: center;
}

/* changing book titles & author to Merriweather font so they stand out from body text , aligning text to center*/
.book-title,
.book-author {
  font-family: 'Merriweather', serif;
  text-align: center;
}

/* sizing book title font */
.book-title {
  font-size: 1.5rem;
}

/* sizing author font */
.book-author {
  font-size: 1.25rem;
}

/* justify the card text */
p.card-text {
  text-align: justify;
}

/* this media query hides the text within the card from displaying on screens smaller than a tablet*/
@media only screen and (max-width: 576px) {
  .card-body {
    display: none;
  }
}

/* styling the card footer */
.card-footer {
  font-size: 1.125rem;
  text-align: center;
  color: #000000;
  background-color: #d6b6ff;
  border-top: none;
}

/*  paragraph margin in card footer removed */
.card-footer p {
  margin-bottom: 0rem;
}

/* RETURN TO TOP - idea demonstrated to me by Dave Horrocks - for more information see Readme */
/* positioning the top id */
#top {
  position: absolute;
  top: 0;
}

/* styling the return to top anchor*/
#return-to-top {
  color: #d6b6ff;
  font-size: 4rem;
  text-decoration: none;
  padding: 1rem;
  position: fixed;
  bottom: 1.5rem;
  right: 0.75rem;
}

/* FORM */
/* adding a margin to the contact us list items */
.contact-us-list {
  margin-bottom: 1.25rem;
}

/* Styling the list items bullet points to be 📚 - tutorial from https://daily-dev-tips.com/posts/css-emoji-list-style/ */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-bottom: 0.5rem;
}

.contact-us-list li::before {
  content: "📚  ";
}

/* change colour to improve contrast */
.text-muted {
  color: #2a2929 !important;
}

/*change the background colour on the instagram handle input */
.input-group-text {
  background-color: #d6b6ff;
}

/*padding added to the left of the checkboxes so they align with other form items */
.checkbox-group {
  padding-left: 0.938rem;
}

/* prevents the textarea from being resized with the grabber in bottom corner */
textarea {
  resize: none;
}

/* change the colour of the submit button */
.btn {
  display: flex;
  background-color: #E9DBFA;
  color: #000000;
  border-color: #d6b6ff;
}

/* Changing the colour of the submit button when hovered over & adding a larger border */
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn:focus,
.btn-primary:focus {
  color: #000000;
  background-color: #E9DBFA;
  border: #d6b6ff 3px solid;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgb(214 182 255 / 50%);
}

/* added width to prevent the image overflowing on small devices */
#HFB,
#milkshake {
  width: 50%;
}

/*placing image central on page*/
.dictator,
.error-img {
  text-align: center;
}

/* THANK YOU PAGE*/
/* Changing the font family of the dog writing section */
.dog-writing {
  font-family: 'Indie Flower', cursive;
  font-size: 1.25rem;
}

/*resize paw icon on thank you page*/
.fa-paw:before {
  font-size: 5rem;
}

/* FOOTER */
/* styling the footer colour, adding padding & aligning icons to center of containers */
.footer-container {
  background-color: #E9DBFA;
  text-align: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/*change the size & colour of the icons in the footer */
footer i {
  color: #000;
  font-size: 1.25rem;
}