/* --- Base Styles --- */

html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
	background-color: #f9fbfc;
  font-family: "manrope", sans-serif;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

main {
	background-color: #F8F8F7;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

/* --- Header --- */

header {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


header h6 {
  width: 95%;
  color: crimson;
  text-align: center;
  font-size: 0.6em;
}


/* --- Welcome --- */

.welcome {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 90%;
}

/* --- About --- */

.about {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 90%;
}

/* --- Ho'oponopono --- */

.hooponopono {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 90%;
}

/* --- Sidenote --- */

.sidenote {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 90%;
}

/* --- Offerings --- */

.offerings {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 90%;
}

/* --- Footer --- */

footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 90%;
}




/* ===== Tablet Styles ===== */
@media only screen and (min-width: 768px) {

  .welcome_header {
    width: 100%;
  }

  .welcome_container {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .welcome_text {
    width: 60%;
  }

  .about {
    margin: 30px 0;
  }

  .about_container_1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .about_text_1 {
    width: 60%;
  }

  .about_container_2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row-reverse;
  }

  .about_text_2 {
    width: 50%;
  }

  .about_text_3 {
    width: 90%;
    margin-top: 30px;
  }

  .hooponopono_header {
    width: 100%;
  }
}



/* ===== Desktop Styles ===== */
@media only screen and (min-width: 1200px) {

  .welcome_img {
    width: 40%;
  }

  .welcome_img img {
    width: 80%;
    height: auto;
  }

  .welcome_text {
    width: 40%;
  }

  .about_container_1 {
    margin-top: 30px;
  }

  .about_text_1 {
    width: 40%;
  }

  .about_img_1 {
    width: 40%;
  }

  .about_img_1 img {
    width: 70%;
    height: auto;
  }

  .about_container_2 {
    margin-top: 30px;
  }

  .about_text_2 {
    width: 40%;
  }

  .about_img_2 {
    width: 40%;
  }

  .about_img_2 img {
    width: 90%;
    height: auto;
  }
}