/* ================ FONTS =============== */

h1 { /* H1 is only for the main topic */
  font-family: "Rye", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 4.50em;
  padding: 2rem;
  text-align: center;
}

h2 { /* H2 to H6 is the breakdown of the structure of the topic ( more important to less important */
  font-family: "Rock Salt", cursive;
  font-weight: 900;
  font-style: normal;
  font-size: 2.0001em;
  padding: 2rem;
  text-align: center;
}

h3, h4, h5, h6{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic ; 
  font-size: 1.7171em;
  padding: 1rem;
  text-align: center;
}

p {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: 1.7em;
  
}
li {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: 100 ;
  font-size: 1.3em;
  padding: 1rem;
}
small {
  font-size: 0.8736em;
}

p {
  margin-bottom: 1rem;
  margin-left: 1.5rem;
}

footer{
  font-family: "Rye", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5em;
  padding: 2rem;
  text-align: center;
}
 /* ==================  COLORS ================= */
 :root{ 
  /* text color */
  --pastel: #f0d07a;
  --lightbrown: #686142;
  --darkengreen:#797656;
  --pastelgreen:#a7b186;
  --darkbrown: #8c5835;

  /* background color*/
  --leafgreen:#8f9067; 
  --lightgray:#dee1dcfa;
  --LIGHTERGRAY:#dee1dcc8;
  

  /* footer color*/
  --mustardyellow:#bcab62;
  --brown:#907143;
  --darkforest:#4d4728;
 }
 
h1{
  color: var(--pastel);
  font-weight: bold;
  line-height: 1.1;
  margin: 2rem 0 1rem 0;
}

h2 {
  color: var(--lightbrown);
  font-weight: normal;
  line-height: 1.1;
  margin: 2rem 0 1rem 0;
  font-size: 2.5rem;
}

h6 {
  color: var(--darkengreen);
  font-weight: bold;
  line-height: 1.1;
  margin: 2rem 0 1rem 0;
}

header {
  background-color: var(--pastelgreen);
}

article {
    border: 1px solid #444;
    padding: 1rem;
    background-color: pink;
}

.sub-header {
  border:#797656;
  background-color: var(--leafgreen);
  margin-top: 4rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
}
section.who { /* JOIN THE JAC COMMUNITY */
  border: 8px solid var(--leafgreen);
  background-color: var(--lightgray);
  position: relative;
}
section.what { /* BIOBLITZ, DISCOVER NATURE FAST */
    
    background-color: var(--LIGHTERGRAY);
}
section.when { /* 4 DAYS IN APRIL */
    border: 8px solid var(--leafgreen);
    background-image: url(bgimg/flowers\ copy.svg);
    margin-top: 1rem;
    background-repeat: no-repeat;
    background-size: 80rem;
  
}
section.where { /* WATERFRONT ADVENTURE */
    
    background-color: var(--LIGHTERGRAY);
}
section.how { /* NATURE IN A FLASH */
    border: 8px solid var(--leafgreen);
    background-color: var(--lightgray);
}
section.why { /* CONTRIBUTE TO THE ECOSYSTEM */
    
    background-color: var(--lightgray);
}
footer {
  background-color: #907143;
  color: var(--darkforest);
  padding: 3rem;
  margin: 1.5rem;
}

aside {border: 4px solid red; padding: 1rem; margin: 2rem 0; background-color: rgb(251, 255, 0);}



/* ============  JAC SCHOOL LOGO ============ */
    #jac-logo {
        width: 100%;
        height: 3rem;
        display: block;
        filter: invert(1);  /* makes the black svg white if necessary */
        margin: 0rem auto;  /* centers the logo */
    }
    .header {
      background-position: 40rem;
    }
    picture { /* make my text and my image work but don't know why */
      display: block;
    }

/* ============= LOGO'S (SECTION HOW) ================ */
    .logos{
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: flex-end;
    }
    
    .android img {
      width: 200px;
      position: relative;
      
      left: 20px;
      max-width: 100%;
      height: auto;
    }

    .ios img {
      width: 70px;
      position: relative;
      top: -10px;
      left: 2px;
      max-width: 100%;
      height: auto;
    }



/* ================= INDEX =============== */

    .index {
      background-image: url(bgimg/64499.jpg);
      background-size:cover ;
      background-attachment: fixed;
      background-repeat: no-repeat;
      
    }

    section.index {
       opacity: 0.5;
    }
    .header{
      height: 2rem;
    }
       
/* ================= FLEX-CONTAINER =============== */

.what picture {
  width: 50%;
  float: right;
  display:flow-root;
}  
    
/* ============== MEDIA QUERY =============== */
/* add Media Query */
/* media query always goes at the bottom of the css */ 

     /* 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 */ 


     /* always comment the closing bracket */

    @media screen and (min-width: 60rem) {
      
        .how picture{
           transform: perspective(900px) rotateY(20deg);
           box-shadow: 25px 25px 50px rgba(0,0,0,0.4);
           width: 1500px;
          }
        .h1{
          font-family: "Rye", serif;
          font-weight: 500;
          font-style: normal;
          font-size: 4.35em;
          padding: 2rem;
          text-align: center;
        }
        .wrapper {
            max-width: 60rem; /* 960px */
            margin: 0 auto; /* zero top/bottom, centered left/right */
        }

        .flex-container {
        flex-direction: row;
        }

        .section_where {
          border:#4d4728;
          position: relative;
        }

        .section_{
          font-size: 0rem;
        }
        
        /* START FLEXBOX */

        .when .flex-container { /* 4 days in april */
                display: flex;
                justify-content: center;
                align-items: center;
                /* puts elements side-by-side */
            }

        .why .flex-container { /* Contribute to the ecosystem */
                display: flex;
                column-gap: 1rem;
            }

        .how .flex-container { /* Nature in a flash */
                display: flex;
                flex-direction: row-reverse; 
                /* switches content order, picture is second column */
                align-items: flex-start;
                
            }

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

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

        
        /* START FLOATS */

        .who .flex-container { /* join the jac community */
                display: flow-root;  /* wraps float */
                padding: 2rem;
            }
        .h2 {
          height: 20rem;
        }

        .what .flex-container { /* BioBlitz, discover nature fast */
                display: flow-root;  
            }

        .where .flex-container { /* Waterfront Adventure */
                display: flow-root;  
              
            }

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

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

        .where .flex-container picture {
            width: 45%; 
            float: left; 
            
            }

        /* Pseudo-Element */

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

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

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

    

    section.why::before {
        content: "";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 70rem; /* use any size you need */
        width: 100%; /* use any size you need */
        background-image: url(bgimg/birds\ copy.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: 30rem;
        background-repeat: no-repeat;
        top: 266rem;
        left: -11rem;
    }
    section.how::after {
        content: "";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 57rem; /* use any size you need */
        width: 100%; /* use any size you need */
        background-image: url(bgimg/iNaturalistAU-Logomark-green.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: 32rem;
        background-repeat: no-repeat;
        top: 253rem;
        left: 54rem;
    }

    section.who{
  width:900px;
  height:1000px;
  position:relative; /* important */
}

/* snail */
.who::after{
  content:"🐌";
  position:absolute;
  font-size:100px;
  /* start outside the corner */
  top:-60px;
  left:-60px;
  animation: snailMove 35s linear infinite;
}

@keyframes snailMove{
  /* top edge */
  0%{transform: translate(0,0) rotate(0deg);}
  25%{transform: translate(900px,0) rotate(0deg);}
  /* right side */
  26%{transform: translate(900px,0) rotate(90deg);}
  50%{transform: translate(900px,1000px) rotate(90deg);}
  /* bottom edge */
  51%{transform: translate(900px,1000px) rotate(180deg);}
  75%{transform: translate(0,1000px) rotate(180deg);}
  /* left side */
  76%{transform: translate(0,1000px) rotate(270deg);}
  100%{transform: translate(0,0) rotate(270deg);}
}


.what::before{
  content:"🍃     🍃";
  position:absolute;
  right:164px;
  top:1963px;
  font-size:141px;
  animation: swirl 7.5s linear infinite;
}

@keyframes swirl{
  0%{transform: translate(0px,0px) rotate(0deg);}
  20%{transform: translate(60px,100px) rotate(90deg);}
  40%{transform: translate(-40px,220px) rotate(180deg);}
  60%{transform: translate(80px,350px) rotate(270deg);}
  80%{transform: translate(-30px,500px) rotate(320deg);}
  100%{transform: translate(50px,650px) rotate(360deg);}
}

.where-picture{
  width:500px;
  transform: perspective(900px) rotateY(20deg);
  box-shadow: 25px 25px 50px rgba(0,0,0,0.4);
}

section.where p{
  display:flex;
  align-items:center;
  gap:52px; /* space between image and text */
  margin: 94px;
  font-size: 3.5rem;
}

.why-picture{
  width:400px;
  transform: perspective(900px) rotateY(20deg);
  box-shadow: 25px 25px 50px rgba(0,0,0,0.4);
}

section.why p{
  float:right;
  width:45%;      /* gives space for the image */
  margin:1rem;
  font-size:1.5rem;
  padding:12px;
  align-items: center;
gap: 52px;

}
.text{
  max-width:400px;
}



  } /* always comment closing media query */




 @media (max-width: 3040px){

  section.who p{ font-size: 45px;}
  section.who h2{font-size: 50px;}
}
    



    /*
    .when picture{
  width: 80%;
  float: right;
  display:flow-root; 


  .where picture {
  width: 45%;
  float: right;
  display:flow-root;  
}
   */