/* Google fonts for Title, text */
/* DM Sherif Display            */
/* Poppins                      */
/* Montserrat 100 à 900         */

/* For header box title text H1 */
.montserrat-h1 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* For paragraph titles H3 */
.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}


.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* For default main text P */
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */


* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: "poppins-regular", sans-serif;
  font-size: clamp(1px,1.5vw,18px);
  margin: 0;
}

/* Header/logo Title */
.header {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  text-align: center;
  background: #82a078;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-family: "Montserrat-h1", sans-serif;
  font-size: 2em;
}

/* Style the top navigation bar */
.navbar {
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  background-color: #e0cfb8;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 1.2em;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #c9ac83;
  color: black;
}

/* Column container */
.row {  
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.row h2 {
  font-family: "dm-serif-display-regular", serif;
  font-size: 1.5em;
  color: #27344b;
}

.imgmainlogo {
  display: block;
  margin: auto;
  width: 40%;
}


/* Create two unequal columns that sits next to each other */
/* Main column left */
.main {   
  flex: 70%;
  background-color: white; 
  padding: 20px 40px;
}
/* Sidebar/right column */
.side {
  flex: 30%;
  background-color: white;
  padding: 20px 40px;
}

/* Sidebar logo picture */
.imgsidelogo {
  width: 100%;
}

/* APH logo picture */
.imgaphlogo {
  display:block;
  margin:auto;
  width:30%;
}



/* Footer */
.footer {
  flex: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  text-align: center;
  background: #82a078;
  color: white;
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */


/* Responsive layout - when the screen is less than 700px wide, */
/* ----------------------------------------------------------- */
@media screen and (max-width: 700px) {
/* make the two columns stack on top of each other instead of next to each other */
.row {   
  flex-direction: column;
  }

/* increase the default font size */
body {
  font-size: clamp(1px,2vw,18px);
  }

/* increase de main logo size */
.imgmainlogo {
  display: block;
  margin: auto;
  width: 100%;
  }

/* decrease de side logo size */
.imgsidelogo {
  display: block;
  margin: auto;
  width: 50%;
  }
}


/* Responsive layout - when the screen is less than 450px wide */
/* ----------------------------------------------------------- */
@media screen and (max-width: 450px) {
/* increase the default font size and double the size of the APH Logo */
body {
  font-size: clamp(1px,3vw,18px);
  }

/* double the size of the APH logo */
.imgaphlogo {
  width:50%;
}

/* make the navigation links stack on top of each other instead of next to each other */
  .navbar a {
/*    float: none; */
    width: 50%;
  }
}