/* ---------------------------------------- COLOR PALETTE START ---------------------------------------- */

:root {  /* place this block at the top of the stylesheet */
  --black-forest: #134611;
  --forest-green: #3e8914;
  --medium-jungle: #3da35d;
  --light-green: #96e072;
  --frosted-mint: #e8fccf;
  --black: #000000;
  --white: #FFFFFF;
}

/* ---------------------------------------- COLOR PALETTE END / FONTS START ---------------------------------------- */

h1 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

h2, h3, h4, h5, h6 {
  font-family: "SN Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  margin: 0 0 1rem 0;
}

p, ol {
  font-family: "SN Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

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

h1 { font-size: 3.5em; }
h2 { font-size: 1.6004em; }
h3 { font-size: 1.4229em; }
h4 { font-size: 1.2651em; }
h5 { font-size: 1.1247em; }
p { font-size: 1em; }
small { font-size: .8891em; }

h1, h2, h3, h4, h5, h6, legend, label, p, li { 
    max-width: 100ch; 
    /* most on-screen text */
}

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

h1 {
  text-align: center;
  margin: 1rem;
}

#jac-logo {
  width: 70%;
  height: auto;
  display: block;
  margin: 0rem auto;  /* centers the logo */
}

/* ---------------------------------------- FONTS END / LOGOS ALIGN START ---------------------------------------- */

.how .logos {
  display: flex;  /* places the two logos side by side */	
  justify-content: center;
  margin-top: 1rem;
}

.android img {
  width: 220px;  /* adjust width of android logo */
  height: auto;
  margin: 0 auto;
  display: block;
}

.ios img {
  height: 60px; /* adjust height of ios logo */
  width: auto;
  margin: 0 auto;
  display: block;
}

.how span {
  display: block;  /* force platform names to be on another line */
  text-align: center;
}

.ios {
  position: relative;  /* tweak vertical position of ios icon and text */
  top: 13px;
}

.ios span {
  position: relative; /* tweak vertical position of ios text */
  top: 3px;
}


.android span {
  position: relative; /* tweak vertical position of android text */
  top: -11px;
}

/* ---------------------------------------- LOGOS ALIGN END / COLORS ASSIGN START ---------------------------------------- */

div.wrapper {
  background-color: var(--light-green);
  padding-bottom: 1rem;
}

header {
  background-color: var(--forest-green);
  border: 1rem;
  border-color: var(--black);
}

section {  
  padding: 1rem;
  background-color: var(--medium-jungle);
  border-radius: 2rem;
} /* all sections together */

section.why {margin-bottom: 0;} /* last section */

footer {background-color: var(--black-forest); color: var(--white);}

/* ---------------------------------------- COLORS ASSIGN END / ELEMENT ALIGNMENT (PADDING/MARGINS) START ---------------------------------------- */

header {
  margin-bottom: 1rem;
  padding: 1rem 1rem 0.5rem 1rem;
  border-radius: 0px 0 8rem 8rem;
  text-align: center;
}

main {
  margin: 0 1rem;
}
  
section { margin-top: 1rem; margin-bottom: 1rem; } /* all sections together */

section.who { margin-top: 1rem; margin-bottom: 1rem; }

section.what { margin-top: 1rem; margin-bottom: 1rem; }

section.when { margin-top: 1rem; margin-bottom: 1rem; }

section.where { margin-top: 1rem; margin-bottom: 1rem; }

section.how { margin-top: 1rem; margin-bottom: 1rem; }

section.why {margin-bottom: 0;} /* last section */

footer {
  padding: 1rem;
}

picture {
  margin: 0 0 1rem 0;
  display: block;  /* by default picture is inline */
  border-radius: 5rem;
}

img:not(section.how img) {
  border-radius: 5rem;
}

.where img, .how img {
  margin-bottom: 1rem;
}

/* ---------------------------------------- ELEMENT ALIGNMENT (PADDING/MARGINS) END / DESKTOP LAYOUT START ---------------------------------------- */

@media screen and (min-width: 60rem) {


.wrapper {
  max-width: 60rem; /* 960px */
  margin: 0 auto; /* zero top/bottom, centered left/right */
}

#jac-logo {
  width: 30%;
  height: auto;
  display: block;
  margin: 0rem auto;  /* centers the logo */
}

/* START FLEXBOX */

.when .flex-container {
  display: flex;
  /* puts elements side-by-side */
}

.why .flex-container {
  display: flex;
}

.how .flex-container {
  display: flex;
  flex-direction: row-reverse; /* switches content order, picture is second column */
}

.when picture {
  width: 50%; /* adjust as necessary */
}

.why picture {
  width: 50%; /* adjust as necessary */
}

.how picture {
  width: 50%; /* adjust as necessary */
}



/* START FLOATS */

.who .flex-container {
  display: flow-root;  /* wraps float */
}

.what .flex-container {
  display: flow-root;  
}

.where .flex-container {
  display: flow-root;  
}

.who .flex-container picture {
  width: 50%; /* adjust as necessary */
  float: right; /* puts elements side-by-side */
}

.what .flex-container picture {
  width: 50%; 
  float: right;  /* switches content order, picture is second column */
}

.where .flex-container img {
  width: 50%; 
  float: left; 
}

footer {
  background-color: var(--black-forest);
  color: #fff;
  height: 5rem;
  
  display: flex;

  align-items: center;
  /* vertical centering */

  justify-content: center;
  /* horizontal centering */
}

body {
  background-image: url(bgimg/background.jpg);
  background-size: 100%;
  background-repeat: repeat-y;
}

section.what {
  position: relative; /* enables accurate absolute positioning for the pseudo-element */
} 

section.what::before {
  content: " ";
  display: block;
  position: absolute;
  height: 11%;
  width: 7%;
  background-image: url(bgimg/iNaturalistAU-Logomark-green.svg);
  background-repeat: no-repeat;
  top: -12rem;
  left: 47rem;
  background-color: var(--frosted-mint);
  border-radius: 10rem;
}


} /* always comment closing media query */