* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
  background-color: rgb(206, 174, 125);
  margin: 0;
}
/* welcome to the (not) most basic css! Done by yours truely*/
/* i am very eepy heheheheheheheheh- */
/* ( ͡°( ͡° ͜ʖ( ͡° ͜ʖ ͡°)ʖ ͡°) ͡°) */

#container {
  display: grid;
  grid-template: auto / 33% 33% 33%;
  grid-template-areas: 
  "h1 h1 h1"
  "intro intro taxonomy"
  "environment environment environment"
  "anatomical anatomical anatomical"
  "social reproduction reproduction"
  "feeding reproduction reproduction"
  "adaptive sources sources"
  ;
  width: 80%;
  margin: auto;
  background-color: white;
  box-shadow: 0 0 20px 5px rgb(88, 50, 22)
}

/* tags */
h1 {
  grid-area: h1;
  text-align: center;
  font-size: 60px;
  border-bottom: 3px solid black;
}
h2 {
  margin: 0;
  margin-bottom: 5px;
}
table, th, td {
  margin: 0;
  border: 2px solid black;
  border-collapse: collapse;
} 
th, td {
  padding: 5px;
}


/* ---------- content ---------- */
#intro {
  grid-area: intro;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#daBird {
  transform: rotate(0deg);
  animation-name: turnDaBird;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  max-height: 85%
}
#bird1 {
  position: absolute;
  top: 20px;
  right: 20px;
  max-width: 200px;

  animation-name: turnDaBird;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

}

@keyframes turnDaBird {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

/* Taxonomy */
#taxonomy {
  grid-area: taxonomy;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 10px;
  border: 2px solid black;
}
#taxonomy ul{
  margin: 0;
}
#taxonomy p {
  margin: 9px 0 5px;
  font-weight: bold;
  text-align: center;
}

/* Environment */
#environment {
  grid-area: environment;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
  padding-top: 10px; 
  padding-bottom: 10px;
}
#environmentGallery {
  display: grid;
  grid-template: 100% / 33% 33% 33%;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
#environmentGallery img {
  height: 90%;
  max-height: 200px;
  transition: height 500ms;
}
#environmentGallery img:hover {
  height: 100%;
}
#environmentGallery img:active {
  height: 80%;
}

/* adaptive */
#adaptive {
  grid-area: adaptive;
}

#reproduction {
  grid-area: reproduction;
  border-left: 5px solid black;
  padding: 10px
}

#anatomical {
  grid-area: anatomical;
  border-bottom: 5px solid black;
  display: flex;
  flex-flow: column;
  align-items: center;
}
#anatomical h3, #anatomical h2 {
  width: 100%
}
#anatomical img {
  max-width: 100%;
}

#social {
  grid-area: social;
}

#feeding {
  grid-area: feeding;
}

body div {
  margin: 10px;
}
hr {
  border: 5px solid black
}

#sources {
  grid-area: sources;
  border-left: 5px solid black;
  padding-left: 5px;
}
#sources p {
  text-indent: -50px;
  margin-left: 50px;
}