:root {
  --orange: #f1b33e;
  --darkorange: #ff8102;
  --yellow: #e5c642;
  --purple: #7529e1;
  --darkblue: #2d03ae;
  --lightblue: #48a0d3;
  --pink: #c24c6d;
  --white: #FFFFFF ;
}

body{
  background-color:var(--orange);
  color: var(--pink);
  background-image: url(bgimg/background.png);
  background-repeat: repeat;

}

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


figcaption{
  margin-top: 0.2rem;
}


h1{
  border:outset var(--yellow);
  background-color: var(--orange);
  text-align: center;
  border-width: 0.75rem;
  border-radius: 1rem;
  padding: 1rem;
  }
  
h2{
  margin: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

main{
  margin: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.who{
  background-color: var(--pink);
  color: var(--yellow);
  padding: .75rem;
  margin-top: 0rem;
  margin-bottom: 3rem;
  border: outset var(--purple);
  border-width: 0.75rem;
  border-radius: 1rem;
}

.what{
  background-color: var(--lightblue);
  color: var(--darkblue);
  padding: .75rem;
  margin-top: 0rem;
  margin-bottom: 3rem;
  border: outset var(--darkblue);
  border-width: 0.75rem;
  border-radius: 1rem;
}



.when{
  background-color: var(--purple);
  color: var(--orange);
  padding: .75rem;
  margin-top: 0rem;
  margin-bottom: 3rem ;
  border: outset var(--darkorange);
  border-width: 0.75rem;
  border-radius: 1rem;
}

.where{
  background-color: var(--darkblue);
  color: var(--yellow);
  padding: .75rem;
  margin-top: 0rem;
  margin-bottom: 3rem;
  border: outset var(--yellow);
  border-width: 0.75rem;
  border-radius: 1rem;

}

.how {
  background-color: var(--darkorange);
  color: var(--purple);
  padding: 0.1rem;
  margin-top: 0rem;
  margin-bottom: 3rem;
  border: outset var(--purple);
  border-width: 0.75rem;
  border-radius: 1rem;
}
.how .flex-container{
  margin: 0.75rem;
  padding: 2rem 1rem 2rem 1rem;
  background-color: var(--lightblue);
  border: outset var(--lightblue);
  border-width: 0.75rem;
  border-radius: 1rem;

}

  .how .logos {
        display: flex;  /* places the two anchor tags side by side */
        flex-basis: 50%;
    }

    .how .logos a {
        max-width: 100%; /* set the two anchors to act like two columns of 50% width, inside one of the two boxes above */
        display: block; /* accepts a height and width value */
        margin: 0 auto;
    }

    .android img {
        width: 232px;  /* adjust width of android logo */
        height: auto;
    }

    .ios img {
        height: 63px;  /* adjust height of ios logo */
        width: auto;
        position: relative;
        top: -2px;  /* align vertically */
    }

.why {
  background-color: var(--pink);
  color: var(--orange);
  padding: .75rem;
  margin-top: 0rem;
  margin-bottom: 3rem;
  border: outset var(--yellow);
  border-width: 0.75rem;
  border-radius: 1rem;
}

footer {
  background-image: url(bgimg/GWD-logo-BlkTrans-v3.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 95%;
  background-color: var(--yellow);
  text-align: left;
  border: outset var(--orange);
  border-width: 0.75rem;
  padding: 2rem 1rem 1rem 1rem;
  margin-top: 2rem ;
  margin-bottom: 0rem;
 
  
}

/* LoveHA Rule Starts */
    header a:link {
      color: var(--white);
      text-decoration-line: none;
    }
    header a:visited  {
      color: var(--orange);
    }
    header a:hover  {
      color: var(--darkorange);
      text-decoration-line: underline;
      text-decoration-style:wavy ;
    }
    header a:active {
      color: var(--pink);
    }
    
    main a:link  {
      color: var(--white);
      text-decoration-line: none;
    }
    main a:visited  {
      color: var(--orange);
    }
    main a:hover  {
      color: var(--yellow);
      text-decoration-line: underline;
      text-decoration-style: wavy;
    }
    main a:active  {
      color: var(--pink);
      text-decoration-line:underline;
      text-decoration-style: wavy;
    }

    footer a:link  {
       color: var(--white);
      text-decoration-line: none;
    }
    footer a:visited  {
      color: var(--orange);
    }
    footer a:hover  {
      color: var(--yellow);
      text-decoration-line: underline;
      text-decoration-style: wavy;
    }
    footer a:active  {
      color: var(--pink);
      text-decoration-line:underline;
      text-decoration-style: wavy;
    }

/* LoveHA Rule ends */

/* Font Style for all pages */

h1 {font-size: 2.25em;}
h2 {font-size: 1.9656em;}
h3 {font-size: 1.7171em;}
h4 {font-size: 1.5em;}
h5 {font-size: 1.3104em;}
h6 {font-size: 1.1447em;}
p {font-size: 1em;}
small {font-size: 0.8736em;}
p {margin: 0.8rem 0.2rem 0.5rem 0.2rem;
}

  h1 {
      font-family: "Gravitas One", serif;
      font-weight: 500;
      font-style: normal; 
      margin: 1rem;
      line-height: 1;
      
      /* primary visual branding font choice, must echo art style */
      }

  h2,h3,h4,h5,h6,label,legend {
      font-family:"Passion One", sans-serif;
      font-weight: 200;
      font-style: normal;   /* Must work well with h1 font choice  */
      }

  body {
      font-family: "Combo", system-ui;
      font-weight: 400;
      font-style: normal;    /* must be legible at 16px default font size */
      }


/* End of Font Style for page */


      /* start of Media Query */

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

        .wrapper {
            max-width: 60rem; /* 960px */
            margin: 0 auto; /* zero top/bottom, centered left/right */
        }
        h1{font-size: 4.5em;}
        h2{font-size: 3.5em;}
        h3{font-size: 2.5em;}
        h4{font-size: 2em;}
        h5{font-size: 1.5em;}
        h6{font-size: 1em;}
        p{ font-size: 1.25em;}

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

          #jac-logo{
            width: 100%;
            position: relative;
            background-color: rgba(241, 179, 62, 0.85);
            top: 0;
            z-index: 50;

          }
        
        header h2{
          background: var(--yellow);
          font-size: 1.5rem;
          margin: -5rem;
          padding: 2rem;
          border: outset var(--darkorange);
          border-width: 0.65rem;
          border-radius: 15rem;
          display: flow-root;
          width: 40%;
          float: right;
        }
       
        .who{
          color: var(--purple);
          background-image: url(bgimg/orange-wiggle.png);
          background-repeat: no-repeat;
          background-position: -211px -5px;
          background-size: 135%;
        }


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

        .who figure{
          width: 50%;
          float: left;
          padding-right: 10px;
        }

        
        .what{
          color: var(--yellow);
          background-image: url(bgimg/Purple_Wiggle.png);
          background-repeat: no-repeat;
          background-position: -366px -7px;
          background-size: 137%;

        }

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

        .what figure{
          width: 50%;
          float: right;
          padding-left: 10px;
          
        }

      .when .flex-container{
        display: flex;
        column-gap: 1.5rem;
      }

      

      .when{
        background-image: url(bgimg/orange-wiggle.png), url(bgimg/orange-wiggle.png);
        background-size: 131%, 134%;
        background-repeat: no-repeat;
        background-position: 95px 451px, 374px -161px;
        background-color: var(--purple);
        color: var(--orange);
        padding: 6rem;
        margin-top: 0rem;
        margin-bottom: 3rem ;
        border: outset var(--darkorange);
        border-width: 0.65rem;
        border-radius: 1rem;
      }

      section.when{
        position: relative;
        overflow: hidden;
      }

      section.when::before{
        content:" " ;
        display:block;
        position: absolute;
        height: 9rem;
        width: 16%;
        background-image: url(bgimg/calendar-svgrepo-com.svg);
        background-size: contain;
        background-repeat: no-repeat;
        top: 3rem;
        left: 100px;
        animation: slideInLeft 8s ease-in forwards;
      }

      @keyframes slideInLeft {
        from{
          transform: translateX(580%);
        }
        to {
          transform: translateX(220px);
        }
      }
      .where{ 
        background-image: url(bgimg/blue-purple-wiggle.png);
        background-repeat: no-repeat;
        background-size: 211%;
        background-position: -829px -59px ;
        background-color: var(--darkblue);
        color: var(--yellow);
        padding: 2rem;
        padding-left: 3rem;
        margin-top: 0rem;
        margin-bottom: 3rem ;
        margin-right: 0rem;
        border: outset var(--yellow);
        border-width: 0.75rem;
        border-radius: 1rem;
        
      }
      .where .flex-container{
        display: flow-root;
        
        
      }
     
      .where figure{
        width: 70%;
        float:right;
      }

      .how {
        background-image: url(bgimg/circle-wiggle.png);
        background-repeat: no-repeat;
        background-size: 200%;
        background-position: -112px -300px;
      }

      .how .flex-container{
        display: flex;
        column-gap: 1.5rem;
        background-image: url(bgimg/iNaturalistAU-Logomark-white.svg),url(bgimg/circle-wiggle.png);
        background-repeat: no-repeat;
        background-size: 12%, 167%;
        background-position: 730px 95px, -337px 161px;
      }

      .ios img{
        top : 13px ;
      }

        .why{
          background-image: url(bgimg/GBIF_109px.png),url(bgimg/blue-wiggle.png);
          background-repeat: no-repeat;
          background-size: 20%, 116%;
          background-position: 301.4px 230px, 13px -4px;
        }

        .why .flex-container{
          display: flex;
          column-gap: 1.5rem;
        }

        footer{
          background-image: url(bgimg/GWD-logo-BlkTrans-v3.png);
          background-repeat: no-repeat;
          background-size: 8%;
          background-position: 98%;
          padding: 2rem 1rem 2rem 1rem;
        }
        
    } /* always comment closing media query bracket */