header {
	background-image: url(img/forest1.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 89vw;
	background-position-x: center;
	background-position-y: top;
	position: relative;
	/* bottom: 0; */
	border: solid 1px red;
}

div .bunny1{
width: 100px;
height: 100px;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: infinite;
background-image: url(img/bunny1.svg);

}
@keyframes example {

0% {left: 0px; top:0;}
70% {left: 200px; top: 50px;}
100% {left: 100px; top: 0px;}


}



header h2 {
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;


}

.child {

margin:0 auto;

}

/*header::after {
  background-image: url(img/green-bar.svg);
  content: " ";
  position: absolute;
  z-index: 2;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  height: 10rem;
  bottom: -81px;
  left: -2px;
  width: 105%;
  background-position-x: center;
}*/

img {
  max-width: 100%;
  height: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.what img {
  width: 300px;
  height: auto;
  display: block;
  margin: auto;
}

body {
  font-family: "Albert Sans", sans-serif;
  background-color: #fffffa;
}

body {
  background-color: #fffffa;
}

h1 {
	font-family: "Limelight", sans-serif;
	font-size:9vw;
	color: white;
	/* padding-left: 23px; */
	text-align: center;
}

h1 span {
  color: #81b467;
}

h1 div {
	/* padding-left: 81px; */
	/* padding-right: 111px; */
	width: fit-content;
	margin: 0 auto;
}

footer {
  background-color: #00490e;
  border: 1px solid #00490e;
  padding: 30px;
}

/* Element | file:///Users/2483332/Library/CloudStorage/OneDrive-JohnAbbottCollege/Winter%202025/Responsive%20Design/bioblitz-2025/index.html */

#jac-logo {
	margin: .5rem auto 0.5rem auto;
	width: 50%;
	display: block;
	max-width: 300px;
}

section {
  width: 90vw;
  margin: 2rem auto;
  padding: 1rem;
  border: 2px solid rgb(5, 46, 6);
  background-color: #c8e0bc;
}

.what h2 {
	font-size: 1.7411em;
	margin-top: 39px;
	margin-bottom: 25px;
	font-weight: bold;
	padding-left: 1.5rem;
}

.when h2 {
	font-size: 1.7em;
	margin: 1rem;
	font-weight: bold;
	padding-left: -0.2rem;
}

.where h2 {
	font-size: 1.7411em;
	margin: 1rem;
	font-weight: bold;
	padding-left: 1.rem;
}

.how h2 {
	font-size: 1.7411em;
	margin: 1rem;
	font-weight: bold;
	padding-left: 1.9rem;
}

.why h2 {
	font-size: 1.7411em;
	margin: 1rem;
	font-weight: bold;
	padding-left: 1.rem;
}

body h2 {
	color: white;
	background-color: #00490e;
	padding-bottom: 0.6rem;
	border: solid 3px #00490e;
	border-radius: 1.2rem;
	padding-top: 0.6rem;
  margin-top:30px;

  padding-left: 0.5rem;
  margin-left: 16px;
  margin-right: 16px;
  
}

body img {
	/* margin: 1rem; */
	/* margin-bottom: 0rem; */
	width: 18rem;
	border-radius: 3.5rem;
}

p {
  margin: 1rem 0 1rem 1rem;

}

.when p {
	margin: 1.5rem 0px 2rem 0rem;
	text-align: center;
}

.how h3 {
	margin: 1rem 0 1rem 1rem;
	font-size: 28px;
}

.how h4{
    margin: 1rem 0 1rem 1rem;
}



header a:link {
}
header a:visited {
}
header a:hover {
}
header a:active {
}

.ios-android a:link {
	font-size: 28px;
    /* margin-top: 0px; */
    margin: 1rem 0 1rem 1rem;
    line-height: 2rem;
  
}

.ios-android1 a:link {
	font-size: 28px;
    /* margin-top: 0px; */
    margin: 1rem 0 1rem 1rem;
    line-height: 4rem;
  
}

footer{
text-align: center;
color: white;

}

main a:visited {
}
main a:hover {
}
main a:active {
}

footer a:hover {
}
footer a:active {
}
footer a:hover {
}
footer a:active {
}

@media screen and (min-width: 39.25rem) {
header{
background-image: url(img/forest.jpg);

}
}

@media screen and (min-width: 626rem) {
  header{
  background-image: url(img/forest.jpg);
  
  }


}

@media screen and (min-width: 60rem) {
  .flex-container {
    display: flex;
    max-width: 60rem;
    margin: 0 auto;
  }

  .where p {
	font-size: 3rem;
}

.when p {
	font-size: 3rem;
}

.what p {
	font-size: 28px;
}

.why p {
	font-size: 28px;
}

.how h3 {
    margin-top: 17px;
}

.slogan {
	font-size: 28px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 28px;
}

  .why .flex-container .who .flex-container,
  .how .flex-container {
    flex-direction: row-reverse;
  }

  section {
    width: 60rem;
    /* use the width you prefer for the design, but no wider than the min-width set above */

    margin: 3rem auto;
    /* adjust vertical spacing with the first value, 
            center the section tag with auto left/right margins */
  }

  .flex-container {
    display: flex;
    /* creates two columns */

    column-gap: 1rem;
    /* space between the columns */
  }

  .flex-container picture,
  .flex-container > p,
  .flex-container > div {
    flex-basis: 50%;
    /* makes each column 50% wide */

    /* > means "direct child of", meaning first level descendent: child, not grandchildren */
    /* see https://www.w3schools.com/cssref/css_ref_combinators.php */
  }

  .when .flex-container,
  .how .flex-container {
    /*  select "every other" section tag,
            ex: first and third */

    flex-direction: row-reverse;
    /* swap left and right columns */
  }


  /*This is how the header changes sizes*/
  header {

    height: 678px;
    background-position-x: center;
    background-position-y: top;
    position: relative;
    /* bottom: 0; */
  }


} /* always comment the closing media query tag
             so you don't delete it by accident */