/*================= Fonts ==========*/
/*== Option1 ==*/
.goldman-regular {
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.goldman-bold {
  font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
} /*leadings*/

.geostar-regular {
  font-family: "Geostar", serif;
  font-weight: 400;
  font-style: normal;
} /*headings*/

/* ===================== Colors ==================== */
:root{
  --purple: #880055;
  --green: #5B8E7D;
  --orange: #f4a159d4;
  --tangerine: #f4a159;
   --navy: #01091d;
}
  /* to apply color, use color: var (color name) */



/* ===================== typography ==================== */
h1 {
  font-size: 1.9656em;
  font-family: "Geostar", sans-serif, system-ui;
  font-weight: 400;
  font-style: normal;
  margin: 2rem;
  padding: 1rem;
  color: black
}
h2 {
  font-size: 1.9656em;
  font-family: "Geostar", serif;
  font-weight: 400;
  font-style: normal;
  margin: 2rem;
  padding: 1rem;
  color: black
}

h3 {
  font-size: 1.7171em;
    font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 2rem;
  padding: 0.5rem;
  color: black
}
h4 {
  font-size: 1.5em;
    font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
margin: 1rem;
padding-left: 0.75rem;
color: black
}

h5 {
  font-size: 1.3104em;
    font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
  padding-left: 1.5rem;
  color: black
}

h6 {
  font-size: 1.1447em;
    font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
  color: black
}
p {
  font-size: 1em;
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 1rem;
  line-height: 140%;
}
small {
  font-size: 0.8736em;
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 1rem;
  color: black
}

li {
  font-size: 1em;
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 1rem;
  color: black
}

h1,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: 1.1;
  margin: 2rem 0 1rem 0;
}

h2 {
  font-weight: normal;
  line-height: 1.1;
  margin: 2rem 0 1rem 0;
}

/* ===================== index ==================== */
  .index{
            background-image:url(bgimg/bkg-imgsvg.svg);
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }

article section img {display: block;}

img {
  height: auto;
  margin: 2rem; /*centers the img*/
  padding-right: 1rem;
}

strong {font-weight: bolder;}

article {
    border: 1px solid #880055;
    padding: 1rem;
    background-color: var(--orange);
}

section {
    border: 2px solid #880055;
    background-color: var(--orange);
}

aside {
  border: 4px solid #880055; 
  padding: 1rem; 
  margin: 2rem 0; 
  }


footer {
  background-color: var(--tangerine);
  color: #000000;
  padding: 1rem;
  border:4px solid #880055;
  border-radius: 25px;
}

/* ===================== header ==================== */

header {
  background-color: var(--tangerine);
  border-radius: 25px;
  border: 6px solid var(--purple) ;
  margin-top: 0.5rem;
}
.intro-para{
   font-size: 1.3104em;
    font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
  padding-left: 0.5rem;
}

.jac-logo {
  width: auto;
  height: 60px;
  margin: 0.5rem; /*centers the img*/
}

article section img {display: block;}

strong {font-weight: bolder;}

/* ===================== who ==================== */
.who{
  padding-right: 3rem;
}

section.who{ 
  border-radius: 25px;
  border: 6px solid var(--purple) ;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* ===================== what ==================== */
.what{
padding-right: 3rem;
}

section.what{ 
  border-radius: 25px;
  border: 6px solid var(--purple) ;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* ===================== when ==================== */
.when{
padding-right: 3rem;
}

section.when{ 
  border: 6px solid var(--purple) ;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.april-24{
  font-weight: bold;
}


/* ===================== where ==================== */
.where{
  padding-right: 3rem;
}

section.where{ 
  border-radius: 25px;
  border: 6px solid var(--purple) ;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* ===================== contributions to science ==================== */
.why{
 padding-right: 3rem;
}

section.why{ 
  border-radius: 25px;
  border: 6px solid var(--purple) ;
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* ===================== iNaturalist ==================== */
.how{
 padding-right: 3rem;
}

.nat-picture{
  width: 250px;
}

section.how{ 
  border-radius: 25px;
  border: 6px solid var(--purple) ;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.three-step{
  font-size: 1.1447em;
    font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
}

.logos{
display: flex;
justify-content: space-evenly;
padding-left: 2rem;
}

.logos h4 {
  margin: 0;
  padding: 0;
}

.android img{
  width: 200px;
  position: relative;
  top: 0px;
  left: -55px;
  max-width: 100%;
  height: auto;
}
.ios img{
  width: 90px;
  position: relative;
  top: 0px;
  left: -55px;
  max-width: 100%;
  height: auto;
}


/* ==========================================  footer ========================================= */
/* ========================================== media quiery ========================================= */

/*add a media query so that when the screen size grows, design can evolve */
/*media query always goes at very bottom of page*/
    @media screen and (min-width: 582px) {
     /* css rules go here */
    .slogan {
        margin-right: 1rem;
        } /*at 582px and above, logo image moves up to be inline with company name*/
   
        .navigation li {
        margin-right: 1rem;
        } /*at 582px and above, nav list is inline (home, page 2, page 3, page 4, contact)*/

    section img {
        margin: 1rem;
        }/*at 582px and above, images are in columns (number of columns depends on screen size */

    aside img { 
        margin: 0 0 1rem 1rem;  /* top right bottom left */
        } /*moves img 9 to be inline on the right of the text*/

        .index{
            background-image:url(bgimg/bkg-imgsvg.svg);
        }

        
/*==================== header ====================*/


/*==================== who ====================*/

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

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

/*==================== what ====================*/
.what .flex-container{
  display: flex;
}

/*====================when ====================*/
.when .flex-container{
  display: flow-root;
}

.when-picture{
  width: 50%;
  float: right;
  padding-right: 1rem;
}
/*==================== how ====================*/
.where .flex-container{
  display: flex;
}
/*== why ==*/
.why .flex-container{
  display: flow-root;
}

.why-picture{
  width: 50%;
  float: right;
  padding-right: 1rem;
}
/*== how ==*/
.how .flex-container{
  display: flow-root;
}

.how-picture{
  width: 50%;
  float: right;
  padding-right: 1rem;
}

.logos{
display: flex;
justify-content: space-evenly;
padding-left: 1rem;
}

.logos h4 {
  margin: 0;
  padding: 0;
}

.android img{
  width: 200px;
  position: relative;
  top: 0px;
  left: -55px;
  max-width: 100%;
  height: auto;
}
.ios img{
  width: 90px;
  position: relative;
  top: 0px;
  left: -55px;
  max-width: 100%;
  height: auto;
}
   /*==================== media quiery (max) ====================*/

 }  /* always comment the closing bracket of the media query so you don't confuse the closing bracket of the last CSS rule with the closing bracket of the media query */
    
 @media screen and (min-width: 886px) {
    
    main {
        max-width: 886px; /* wide enough for three columns, tells the site to stop growing to the dimensions of the screen at x size */
        padding: 1rem;
        margin: 0 auto;
        overflow: auto; /* wraps the article float */
    }

        article {
    width: 70%;
    float: left;
    }

    aside {
    width: 25%;
    display: inline-block;
    }

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

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

     section.who::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 6rem; /* use any size you need */
        width: 6rem; /* use any size you need */
        background-image: url(bgimg/beetle.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 19rem;
        left: 40rem;
    }  

    section.when::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 10rem; /* use any size you need */
        width: 10rem; /* use any size you need */
        background-image: url(bgimg/butterfly.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 95rem;
        left: 42rem;
    }  

    section.where::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 8rem; /* use any size you need */
        width: 8rem; /* use any size you need */
        background-image: url(bgimg/flower.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 125rem;
        left: 80rem;
    }  
    
    }  /* media query closing bracket */