/*HOME PAGE*/
body {
  background-image: url('https://img.freepik.com/free-vector/paper-style-smooth-background_23-2148985107.jpg?semt=ais_incoming&w=740&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.centered-image {
  display: block;
  margin: 20px auto;
  max-width: 400px;
  height: auto;
  float: none;
}
.home-page {
  .bold {
    font-weight: 800;
  }

  .lora {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    color: white;
  }

  h1 {
    text-align: center;
  }
  h1 {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    font-size: 40pt;
  }
  p {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 20pt;
  }
}

/*RESEARCH PAGE*/
.research-page {
  h1 {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    color: rgb(0, 0, 0);
    text-align: center;
    margin: 10px auto;
    font-size: 40px;
    padding: 0px 10px 0px 10px;
    border-radius: 15px;
  }
  h2 {
    border: 1px solid black;
    padding: 5px;
    margin: 10px auto;
    background-color: rgb(245, 239, 230);
    text-align: center;
    overflow: auto;
    height: auto;
    font-size: 30px;
    width: 80%;
    max-width: 1500px;
    display: block;
    font-weight: 400;
    border-radius: 15px;
  }
  p {
    border: 1px solid black;
    padding: 5px;
    margin: 20px auto;
    background-color: rgb(245, 239, 230);
    text-align: center;
    overflow: auto;
    height: auto;
    font-size: 30px;
    width: 80%;
    max-width: 1500px;
    display: block;
    border-radius: 15px;
  }

  .container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 150px 20px 150px;
  }

  .container img {
    width: 400px;
    height: auto;
    flex-shrink: 0;
    max-height: 300px;
    max-width: 500px;
  }
  .container p {
    margin: 0;
    font-size: 30px;
  }
  .centered-image {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    float: none;
    width: 500px;
  }
}

/*buttons*/
.btn {
  display: inline-block;
  background-color: #b1ca6b;
  color: rgb(0, 0, 0);
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.5s ease;
  margin: 10px 5px auto;
}
.btn:hover {
  background-color: #2a6911;
}
.button-container {
  text-align: center;
}

/*boxes*/

.simplebox {
  background-color: antiquewhite;
  padding: 10px;
  border-radius: 5px;
  transition: transform 0.3s ease;
  margin: 40px auto;
  font-size: large;
  width: 50%;
  max-width: 700px;
  display: block;
}
.simplebox2 {
  background-color: antiquewhite;
  padding: 10px;
  border-radius: 5px;
  transition: transform 0.3s ease;
  margin: 40px auto;
  font-size: large;
  width: 50%;
  max-width: 900px;
  display: block;
  text-align: center;
}

.simplebox3 {
  background-color: antiquewhite;
  padding: 10px;
  border-radius: 5px;
  transition: transform 0.3s ease;
  margin: 50px auto;
  font-size: large;
  width: 80%;
  max-width: 1500px;
  display: block;
}
.simplebox4 {
  background-color: antiquewhite;
  padding: 10px;
  border-radius: 5px;
  transition: transform 0.3s ease;
  margin: 10px auto;
  font-size: xx-large;
  width: 50%;
  max-width: 500px;
  display: block;
  text-align: center;
}

/*^boxes^*/

/*Te Houtaewa*/
.Te-Houtaewa {
  p {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 20pt;
  }
}
/*Learning Plan*/
.learningplan {
  h2,
  h3,
  h4,
  h5,
  h6,
  h7 {
    border: 1px solid black;
    padding: 5px;
    margin: 10px auto;
    background-color: rgb(245, 239, 230);
    text-align: center;
    overflow: auto;
    height: auto;
    font-size: 30px;
    width: 80%;
    max-width: 500px;
    display: block;
    font-weight: 400;
    border-radius: 15px;
  }
  p {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    text-align: left;
    font-size: 20pt;
  }
}
.values {
  h2,
  h3,
  h4,
  h5,
  h6 {
    border: 1px solid black;
    padding: 5px;
    margin: 10px auto;
    background-color: rgb(245, 239, 230);
    text-align: center;
    overflow: auto;
    height: auto;
    font-size: 30px;
    width: 80%;
    max-width: 700px;
    display: block;
    font-weight: 400;
    border-radius: 15px;
  }
  p {
    font-family: 'Lora', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    text-align: left;
    font-size: 20pt;
  }
}