/* the current css file is below

_ want to change it so that for the index.html page the 2 pictures are on top of each other (the top was on aligned to the left and the bottom was towards the right)
The text above the top picture is on the left side of the picture. this is correct. the text for the bottom picture is to the right. I want it to be on the right side ofhte 
*/


:root{
  --bg: rgb(146, 170, 118);
  --text: #111;
}
    
* {box-sizing: border-box;}
    
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  overflow-y: scroll;
}

/* =========================
   Navigation (navDiv)
   ========================= */
.nav {
  position: fixed;
  top: 0;
  right: 0;
  padding: 44px 58px 0 0;
  text-align: right;
  line-height: 1.2;
  font-weight: 700;
  z-index: 10;
}

.nav div {
  margin-bottom: 6px;
}

.nav a {
  color: #000;
  text-decoration: underline;
  font-size: 16px;
}

/* =========================
   Body container (bodyDiv)
   ========================= */
.bodyDiv {
  margin: 0 auto;
  padding-top: 140px;
  padding-bottom: 100px;
  width: 100%;
  max-width: 700px;
  min-width: 500px;
}

.bodyDiv2 {
  margin: 0 auto;
  padding-top: 140px;
  padding-bottom: 100px;
  width: 100%;
  max-width: 600px;
  min-width: 300px;
}

/* =========================
   Shared section styling
   ========================= */

   /* 
.section {
  width: 100%;
  min-height: 300px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
} */ 

.section {
  width: 100%;
  /* min-height: 100px;
  /* max-height: 500px;  <-- REMOVE THIS */
  position: relative;
  display: block;        /* explicit block flow */
}

.section img {
  width: 90%;
  object-fit: contain;
}

.title {
  font-size: 18pt;
  font-weight: 600;
  margin: 0;
}

.subtitle {
  font-size: 12pt;
  margin: 4px 0 12px 0;
}

/* =========================
   Top section (topDiv)
   ========================= */
#topDiv {
  padding: 24px;
  min-height: 400px;
}

#topDiv img {
  align-self: flex-start;
  
}

/* =========================
   Bottom section (bottomDiv)
   ========================= */
#bottomDiv {
  padding: 24px;
}

.bottomText {
  position: absolute;
  top: 24px;
  right: 24px;
  text-align: left;
  padding: 0;
  right: 20px;
}

#bottomDiv img {
  align-self: flex-end;
  padding-top: 20px;
}

/* =========================
   Top section (topDiv2)
   ========================= */
#topDiv2 {
  padding: 24px;
}

#topDiv2 img {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 250px;
  height: auto; /* preserve aspect ratio */
  padding: 0;
}

/* =========================
   Bottom link
   ========================= */
.bottomLink {
  text-align: center;
  margin-top: 40px;
  font-weight: 700;
}

.bottomLink a {
  color: #000;
  text-decoration: underline;
  font-size: 16px;
}

/* =========================
   Bottom link
   ========================= */
   
.title {
  font-size: 16pt;
  font-weight: bold;
  margin-bottom: 5px;
}

.section-label {
  font-weight: bold;
  margin-top: 5px;
}