/* Reset CSS */

* {
  margin: 0;
  padding: 0;
  border: none;
}

body {
  background-color: #abc4aa;
  /* Setting the root font of the page, and font-size to use rem. Black as color. */
  font-family: "Ubuntu", sans-serif;
  font-size: 24px;
  color: #000000;
}

/* Universal Link designs. */
a {
  text-decoration: none;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
}

a:active {
  color: #4c453e;
}

a:hover {
  opacity: 0.8;
  text-decoration: underline;
  color: #675d50;
  text-shadow: rgba(243, 222, 186, 100%) 0px 0px 20px;
}

a:visited {
  color: #5d5d5d;
}

/* Making sure all different sized headings except h1 use the same kind of Font. */
h2 {
  font-family: "Indie Flower", cursive;
}
/* Center text on a page style for the h2 headings! */
.section__heading {
  text-align: center;
  text-decoration: underline;
  margin-top: 20px;
}

/* Header Section of CSS */

header {
  display: flex;
  align-items: center;
  justify-content: space-around;

  position: sticky;
  top: 0px;
  height: 100%;

  background-color: rgba(171, 196, 170, 0.9);
  z-index: 9999;
}

/* Navigation Styles! */
header ul {
  display: flex;
  width: 100%;
}

/* Navigation List designs */
header li {
  list-style: none;
  margin: 10px;
  font-size: 1.2rem;
}

/* Hero Section */

.hero {
  height: 70vh;
  width: 100%;
  background: url("../../assets/images/choban-hero.webp") no-repeat center
    center;
  background-size: cover;
  overflow: hidden;
}

/* About Section */

/* style for h1 heading on the page */
.heading__text {
  text-align: center;
  font-family: "Gloria Hallelujah", cursive;
}

/*  container for the About section  */
.img__txt__about {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 20px 0px 20px 0px;
}

.img__txt__about img {
  border-radius: 5px;
  /* Borrowed style see readme Credits section */
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.para__about {
  height: 40%;
  width: 40%;
  background-color: rgba(243, 222, 186, 0.2);
  padding: 20px;
  border-radius: 5px;
  /* Borrowed style see readme Credits section */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.para__about span {
  font-weight: bolder;
}

/* Unified Color to use for Fontawesome icons */
.pimp__icon {
  color: green;
  margin-left: 10px;
}

/* Inspiration Section! */

/* Container for the content in the section */
.inspired {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #a9907e;
  color: #000000;
}
.inspired a {
  color: rgba(32, 76, 57, 1);
}

.inspired__text {
  display: flex;
  flex-direction: column;

  width: 30%;
  text-align: center;
  font-weight: 900;
}

.inspired__text h2 {
  text-decoration: underline;
  margin-bottom: 6px;
}
.videos {
  width: 560px;
  height: 315px;
  margin: 20px 0px 20px 0px;
  border-radius: 10%;
}

/* Permaculture section */

.perma__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #f3deba;
  padding: 20px 0px 20px 0px;
}
.perma__container p {
  width: 40%;
  padding: 10px;
}
.perma__container img {
  margin-top: 20px;
  border-radius: 5px;
}

/* Gallery Section */

.galtainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0px 20px 0px;
}

.galtainer img {
  margin: 10px;
}

/* Signup Section */

.signup__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../assets/images/newsletter.webp") no-repeat right bottom;
  background-color: #a9907e;
  overflow: hidden;
  width: 100%;
  height: 320px;

  text-align: center;
}
.form__design {
  margin: 25px;
  width: 50%;
}
.form__design p {
  margin: 25px 0px 25px 0px;
}
.form__design input {
  background-color: #abc4aa;
  border-radius: 15px;
  padding: 15px;
  width: 300px;
  font-size: 1.3rem;
  /* Borrowed style see readme Credits section */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.form__design label {
  font-size: 1rem;
  margin-bottom: 5px;
}
.form__design input[type="email"]:focus {
  background-color: rgba(243, 222, 186, 1);
}
.form__design button {
  background-color: #abc4aa;
  border-radius: 15px;
  padding: 15px;
  font-size: 1.2rem;
  /* Borrowed style see readme Credits section */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  cursor: pointer;
}
.form__design button:hover {
  background-color: #675d50;
}

/* Footer */
.social {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #4c453e;
}
/* First part of the footer email copyright */

.social div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.social div p {
  font-size: 1.2rem;
  margin: 5px;
}

.social ul {
  display: flex;
  list-style: none;
  margin-right: 20px;
}
.social li {
  padding: 10px;
}

/* thanks.html and 404.html css starts here.*/
.seed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.seed img {
  /* Borrowed style see readme Credits section */
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.seed h1 {
  font-family: "Gloria Hallelujah", cursive;
}
.seed p {
  text-align: center;
  width: 500px;
}
/* MediaQueries section! */

@media only screen and (max-width: 1024px) {
  /* Header section MQ! */
  header {
    flex-wrap: wrap;
  }
  header ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  header li {
    font-size: 0.9rem;
    padding: 5px;
    margin: 0;
  }
  header img {
    width: 200px;
    height: auto;
  }
  /* Hero image responsiveness! */
  .hero {
    background: url("../../assets/images/choban-hero1024.webp") no-repeat center
      center;
    height: 21vh;
  }
  /* About Section MQ! */
  .img__txt__about {
    flex-wrap: wrap;
    padding: 20px 0px 20px 0px;
  }
  /* Had to change order when in mobile view for pictures to align right */
  .para__about {
    order: 2;
    width: 80%;
    font-size: 1.1rem;
  }
  /* Had to change order when in mobile view for pictures to align right */

  .img__txt__about img {
    order: 1;
    border-radius: 0px;
  }

  /* Inspiration */
  .inspired__text {
    text-align: center;
    width: 80%;
  }
  .videos {
    width: 80%;
  }

  /* Permaculture */
  .perma__container p {
    text-align: center;
    width: 80%;
    font-size: 1.1rem;
  }
  .perma__container a {
    padding: 10px;
    font-size: 1rem;
    color: green;
  }
  /* Gallery queries */
  .galtainer img {
    margin: 10px 0px 10px 0px;
  }
  /* Signup section */
  .signup__container {
    height: 300px;
    background-size: 50%;
  }
  .form__design {
    margin: 5px;
    width: 90%;
  }
  .form__design h2 {
    font-size: 90%;
  }
  .form__design input {
    width: 200px;
    padding: 5px;
  }
  .form__design button {
    padding: 5px;
    font-size: 1rem;
  }
  .form__design p {
    font-size: 1rem;
    width: 100%;
    margin: 5px;
  }
  /* Footer section MQ! */
  .social {
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .social ul {
    justify-content: space-around;
  }

  .social div {
    flex-direction: column;
  }
  .social div p {
    font-size: 0.9rem;
  }
  .social div a {
    font-size: 1rem;
  }
  /* thanks.html and 404.html mediaqueries starts here.*/

  .seed p {
    width: 300px;
    font-size: 1rem;
  }

  /* End of Mediaquery! */
}