:root {
 --primery-font-family: "Ysabeau SC", sans-serif;
 --primery-font-color: #16423C;
 --secondery-font-family: "Poiret One", sans-serif;
 --secondery-font-color: #E9EFEC;
 --primery-bg-color:  #C4DAD2; 
 --secondery-bg-color: #E9EFEC;

} 
body{
  margin: 0;
  text-align: center;
  background-color: var(--secondery-bg-color);
  color: var(--primery-font-color);
  overflow-x: hidden;
}
/*navbar*/
nav  {
  background-color: var(--secondery-bg-color);
  font-family: var(--primery-font-family);
}
.nav-link, .navbar-brand {
  color: var(--primery-font-color) !important;
  font-family: var(--primery-font-family) !important;
}

/*header*/
header {
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: center;
  text-align: center;
  align-items: center;
  min-height: 70vh;
}
/*header imgs*/
.home-header {
  background-image: url("imgs/landingpage.jpg");
 }
.water-header {
  background-image: url("imgs/water_ocean.jpg");
  color: var(--secondery-font-color);
}

.soil-header {
  background-image: url("imgs/soil.jpg");
  color: var(--secondery-font-color);
}

.plastic-header {
  background-image: url("imgs/plastic.jpg");
  color: var(--secondery-font-color);
}
.technology-header {
  background-image: url("imgs/bio technology.jpg");
  color: var(--secondery-font-color);
}
.about-header {
  background-color: var(--primery-bg-color);
  min-height: 50vh;
}
/*titles*/
.header-title, .header-subtitle,
.h-content-title, .h-content-subtitle{
  font-family: var(--primery-font-family);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.header-message, .h-content-message {
  font-family: var(--secondery-font-family);
  font-weight: bolder;
}

/* main*/
main {
  background-color: var(--primery-bg-color);
}
.coverpic-landingpage {
  width: 100%;
  height: 150px;     
  object-fit: cover;  
  object-position: center;
}
.coverpic-landingpage:hover {
  transform:scale(1.04);
  transition: all 150ms ease-in-out;
}
.image-card {
  position: relative;
  display: block;
  text-decoration: none;

}
.image-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--secondery-bg-color);
  font-family: var(--primery-font-family);
  font-size: 38px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.content-text {
  font-family: var(--secondery-font-family);
  text-align: justify;
  padding-left: 25px;
  padding-right: 25px;
  width: auto;
  font-weight:600;
}
.introduction {
  width: 100%;
  padding: 25px;
}

/*footer*/
 .footer-links {
  text-decoration: none;
  color: var(--primery-font-color);
  font-family: var(--secondery-font-family);
 }

.footer-title{
  font-family: var(--primery-font-family);
}
 /*media*/

 @media (max-width: 527px) {
h1, h2, h3 .image-title {
  font-size: 20px;
}
 p { font-size: 15px;} 

 .footer-links, .footer-title {
  font-size: small;
 }
 .content-text {
  padding-top: 10px;
  padding-left: none;
  padding-right: none;
 }
 }

/* old code 

 <main class="main pt-5 pb-5">
      <div class="container">
      <div class="row row-cols-2">
  <div class="col p-3"><a href="content-HTML/water.html" class="image-card"><img src="style/imgs/water_ocean.jpg"  class="img-fluid rounded-3 coverpic-landingpage" alt=""><span class="image-title">WATER</span></a></div>
  <div class="col p-3"><a href="content-HTML/soil.html" class="image-card"> <img src="style/imgs/soil.jpg" class="img-fluid rounded-3 coverpic-landingpage" alt=""><span class="image-title">SOIL</span></a></div>
</div>
    <div class="row row-cols-2">
  <div class="col p-3"><a href="content-HTML/plastic.html" class="image-card"><img src="style/imgs/plastic.jpg"  class="img-fluid rounded-3 coverpic-landingpage" alt=""><span class="image-title">PLASTIC POLUTION</span></a></div>
  <div class="col p-3"><a href="content-HTML/technology.html" class="image-card"><img src="style/imgs/bio technology.jpg" class="img-fluid rounded-3 coverpic-landingpage" alt=""><span class="image-title">SUSTAINBLE TECHNOLOGIES</span></a></div>
</div>
      </div>
    </main> */