header {
  text-align: center;
  background-image: url("leafs2.png");
  padding: 10px;
  border: 1px;
  border-radius: 5px;
}

header img {
  max-width: 100px;
  
}

header h1 {
  margin-top: 10px;
}
body {
  background-image: url("leafs2.png");
}
/* Navigation */ 
#nav {
  display: block;
  justify-content: space-between;
  text-align: center;
  background-color: #7DCEA0;
  padding: 5px;
  border-radius: 5px;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 250px;
  z-index: 1;
  background-color: floralwhite;
}

.dropdown button {
  padding: 10px;
  background-color: #7DCEA0;
  color: black;
  border: none;
  cursor: pointer;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Log in */
.login {
  display: flex;
  justify-content: right;
  text-align: center;
}


.login input[type="text"],
.login input[type="password"] {
    padding: 5px;
    margin-right: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.login button {
    padding: 5px 10px;
    background-color: #cea07d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login button:hover {
    background-color: white;
}

/* Index page styling */

#news {
  display: flex;
  justify-content: center;
  background-color: #a2c4c6;
  margin-top: 20px;
}
#news article {
  flex: 1 1 auto;
  margin: 20px;
  margin-top: 30px;
  text-align: center;
  max-width: 300px;
}
#news h3 {
  margin: 10px;
  text-decoration: underline;
  font-size: 200%;
}
#news h2 {
  margin-top: 10px;
  font-size: 120%;
}
#news article img {
  display: block;
  margin: 0 auto;
}

#content {
  display: flex; 
  justify-content: center;
  flex-wrap: wrap;
}

#fun-facts,
#animal-of-the-week,
#questionnaire {
  flex: 1;
  text-align: center;
  border: 1px solid white;
  background-color: #D9C2BD;
  margin-top: 20px;
  max-width: 300px;
}

#fun-facts {
  display: inline-block;
  text-align: center;
  border: 1px solid white;
  background-color: #F0CA8C;
  margin-right: 20px;
  margin-top: 20px;
  max-width: 300px;
  max-height: 600px;
}

#fun-facts video {
  width: 100%;
}

#animal-of-the-week {
  display: inline-block;
  text-align: center;
  border: 1px solid white;
  background-color: white;
  margin-left: 20px;
  margin-top: 20px;
}

#questionnaire {
    text-align: center;
    margin-top: 20px;
}

#quiz-form {
    display: inline-block;
    padding: 20px;
    background-color: #D9C2BD;
    border-radius: 10px;
}

.question {
    margin-bottom: 20px;
}

.question p {
    font-weight: bold;
}

input[type="radio"] {
    margin-right: 10px;
}

button {
    padding: 10px 20px;
    background-color: #7DCEA0;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

button:hover {
    background-color: #6DBB8F;
}

footer {
  display: flex;
  justify-content: center; 
  flex-wrap: wrap;
  margin-top: 20px; 
}

/* Styling for Insects page */ 

#Insect-banner {
  display: block;
  max-width: 1307px;
  max-height: 302px;
  width: auto;
  height: auto;
  object-fit: cover;
  margin: 0 auto;
  margin-top: 5px;
}


/* Image gallery */

#Insect-gallery {
  text-align: center;
  margin-top: 10px;
}

.box {
  display: inline-block;
  width: 30%;
  margin: 10px;
  background-color: #D9C2BD;
  text-align: center;
  position: relative;
}

.box img {
  width: 95%;
  height: auto;
  margin: 10px;
}

/* Styling for "See More" section */
#see-more {
  text-align: center;
  margin-top: 70px;
}

.animal-box {
  display: inline-block;
  width: 30%;
  margin: 10px;
  background-color: #F0CA8C;
  text-align: center;
  position: relative;
}
.animal-box img {
  width: 100%;
  height: auto;
}

/* Styling for the Animals page */

#Animal-banner {
  display: block;
  max-width: 1307px;
  max-height: 302px;
  width: 1307;
  height: 301;
  object-fit: cover;
  margin: 0 auto;
}

.A-video-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  text-align: center;
}

.A-video-text h1 {
  font-size: 4em;
  margin: 0;
  padding: 0;
}

.A-video-text p {
  font-size: 2em;
  margin-top: 0;
  padding: 0;
}

.A-video-text a {
  display: inline-block;
  border: 2px solid #fff;
  padding: 10px 20px;
  font-size: 1.5em;
  margin-top: 20px;
  color: #fff;
}
/* Styling for beetles page */ 
#Beetle-banner {
  display: block;
  max-width: 1307px;
  max-height: 300px;
  width: 1307;
  object-fit: cover;
  margin: 5px auto;
  aspect-ratio: 4.34;
}

.B-video-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  text-align: center;
}

.B-video-text h1 {
  font-size: 4em;
  margin: 0;
  padding: 0;
}

.B-video-text p {
  font-size: 2em;
  margin-top: 0;
  padding: 0;
}

.B-video-text a {
  display: inline-block;
  border: 2px solid #fff;
  padding: 10px 20px;
  font-size: 1.5em;
  margin-top: 20px;
  color: #fff;
}

.video-player {
  width: 480px;
  margin: 25%;
  margin-top: 20px;
}

.video-player p {
  margin: 5px;
}

#fact-file {
  display: inline-flex;
  border: 1px;
  border-radius: 1px;
  margin: 10px;
  margin-left: 60%;
  padding: 10px;
  background-color: #F0CA8C;
  width: 25%;
  position: absolute;
  text-align: center;
}
#Shark-banner {
  display: block;
  max-width: 1307px;
  max-height: 300px;
  width: 1307;
  object-fit: cover;
  margin: 5px auto;
  aspect-ratio: 4.34;
}