* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}
html,
body {
  height: 100vh;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

h1 {
  font-size: 2.8rem;
}

h2 {
  font-size: 4.5rem;
}

p {
  font-size: 2.5rem;
}

h3 {
  font-size: 3rem;
  font-weight: 400;
}

a {
  color: #86ac33;
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 400;
}

#main-head {
  display: flex;
  min-height: 5rem;
  height: 10vh;
  background: #fffdfd;
  color: #86ac33;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0px 0px 10px black;
  z-index: 1;
}

#main-head nav {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  flex-wrap: wrap;
}

#logo {
  font-family: "Dancing Script", cursive;
  flex: 1 1 40rem;
  flex-wrap: wrap;
}

#main-head ul {
  display: flex;
  list-style-type: none;
  flex: 1 1 40rem;
  justify-content: space-between;
}

#burger-check {
  opacity: 0;
}

#hero {
  margin-top: 10vh;
  height: 90vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("./img/lifeFullSc.png");
  background-size: cover;
  background-position-y: -40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  color: #fffdfd;
  text-align: right;
  padding-right: 5vw;
}

#hero div {
  transform: translate(-50%, 0);
  animation: text-animation 4s forwards;
}

@keyframes text-animation {
  from {
    tranform: translate(0, 0);
    opacity: 0%;
  }
  to {
    transform: translate(0, 0);
    opacity: 100%;
  }
}

#hero h2 {
  font-weight: 500;
}

#hero h3 {
  padding: 1.5rem 0rem 1.5rem 0rem;
}

#hero p {
  font-weight: 300;
  padding-bottom: 2rem;
}

#hero button {
  color: #032b43;
  background: #fffdfd;
  border: none;
  padding: 2rem 3rem;
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
  border-radius: 4rem;
  cursor: pointer;
  transition: 0.5s;
  font-weight: 500;
}

#hero button:hover {
  padding: 2rem 5rem;
  letter-spacing: 0.5rem;
  background: #def36d;
  color: #032b43;
  font-weight: 500;
}
#hero button:focus {
  transition: 0.1s;
  letter-spacing: 0.5rem;
  background: #def36d;
  color: #032b43;
  font-weight: 500;
}

/* POSTS section */

.posts-header {
  height: 20vh;
  background: white;
  color: #032b43;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.posts-header h2 {
  padding-bottom: 2rem;
}

.posts-cards {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: whitesmoke;
}

.card {
  display: flex;
  flex-direction: column;
  height: 20vh;
  width: 90%;
  margin: auto;
  border-radius: 4rem;
  color: white;
  box-shadow: 0px 0px 15px black;
  justify-content: center;
  align-items: center;
  filter: grayscale(100%);
  transition: filter 0.3s;
  text-align: center;
}

.card:hover {
  filter: grayscale(0%);
}

.card h3 {
  font-weight: 500;
  font-size: 4.5rem;
  margin: 1.5rem 2rem 0rem 2rem;
}

.card p {
  color: rgb(206, 206, 206);
  font-size: 2rem; 
}

#indus-post div {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
  url("./img/pexels-vijay-sadasivuni-3833370.jpg");
  background-size: 100%;
  background-position-y: -45vw;
}
#happy-post div {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("./img/pexels-karolina-grabowska-4471316.jpg");
  background-size: 100%;
  background-position-y: -97vh;
}

#roshni-post div {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("./img/pexels-criativithy-1805405.jpg");
  background-size: 100%;
  background-position-y: -50vh;
}

#female-post div {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("./img/pexels-muhammadtaha-ibrahim-ma\'aji-6355945.jpg");
  background-size: 100%;
  background-position-y: -70vw;
}

/* WRITER SECTION */

#writer {
  display: flex;
  flex-wrap: wrap-reverse;
}

#writer img {
  flex: 1 1 44.5rem;
  max-height: 80vh;
  max-width: 100vw;
}
.writer-text {
  flex: 2 1 44.5rem;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.writer-text div {
  padding: 4rem;
}

.writer-text div h3 {
  padding: 1rem 0rem 3rem 0rem;
  color: #032b43;
  font-weight: 500;
}

.writer-text div h2 {
  font-family: "Dancing Script", cursive;
  color: #b26682;
  font-size: 6rem;
}

/* CONTACT SECTION */

#contact {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7), transparent),
    url("./img/spirit.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
}

.form-wrapper {
  background: rgba(19, 28, 39, 0.9);
  width: 60%;
  border-radius: 2rem;
  color: white;
  margin: 5rem;
}

.form-head {
  text-align: center;
  padding: 4rem;
}
.form-head p {
  font-size: 2rem;
  color: rgb(90, 90, 90);
}

.name-form,
.email-form,
.message-form {
  padding: 3rem;
  text-align: center;
}

.form-wrapper input,
#message {
  padding: 1rem 2rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid grey;
  color: grey;
  width: 50%;
  transition: 0.5s;
}

#message {
  padding: 0rem 2rem 20vh 0rem;
}

.form-wrapper input:focus {
  border-bottom: 2px solid white;
  color: white;
}

#message:focus {
  border-bottom: 2px solid white;
  color: white;
}

.form-wrapper input,
#message:required {
  box-shadow: none;
}

.form-wrapper button {
  color: #032b43;
  background: white;
  width: 100%;
  padding: 2rem;
  margin-top: 5rem;
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
  border: 0;
  font-size: 2rem;
  transition: background 0.5s;
}

.form-wrapper button:hover {
  background: #def36d;
}

.form-wrapper button:focus {
  background: #def36d;
}

/* FOOTER SECTION */

#footer {
  background: #032b43;
  min-height: 15vh;
}

footer {
  padding: 2rem 0rem;
  width: 90%;
  margin: auto;
  display: flex;
  color: white;
  min-height: 12vh;
}

footer div {
  flex: 1 1;
}

footer h5 {
  font-size: 2.4rem;
  font-weight: 400;
  display: flex;
  flex: 1 1;
  font-family: Arial, Helvetica, sans-serif;
}

footer img {
  height: 7rem;
  margin-left: 2rem;
}

.footer-img {
  display: flex;
  justify-content: flex-end;
}

.creator {
  color: white;
  background: #031622;
  min-height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

/* MEDIA QUERIES */

@media screen and (max-width: 2084px) {
  #hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
      url("./img/life.png");
    background-size: cover;
    background-position: 2rem;
  }
  
}

@media screen and (max-width: 890px) {
  html {
    font-size: 45%;
  }
  .card h3 {
    font-size: 3.5rem;
  }
  .form-wrapper {
    width: 90%;
  }
  .form-wrapper input,
  #message {
    width: 90%;
  }
  .card {
    filter: grayscale(0%);
  }
}
@media screen and (max-width: 640px) {
  #happy-post div {
    background-position-y: -90vh;
  }
  
  #roshni-post div {
    
    background-position-y: -2vh;
  }
  html {
    font-size: 35%;
  }
  .hero button {
    margin-bottom: 0;
  }
  #logo {
    text-align: center;
    font-weight: lighter;
    font-size: calc(3rem + 1vw);
  }

  #main-head ul {
    padding-top: 1vh;
  }
  .writer-text {
    position: absolute;
    top: 244.9vh;
    max-height: 50rem;
  }
  .form-wrapper {
    margin-top: 45rem;
  }
  .posts-header h2 {
    font-size: 3rem;
  }
  footer img {
    height: 4vh;
    width: 4vh;
  }

  .footer-img {
    flex-wrap: wrap;
  }

  
}