@import url("https://use.typekit.net/qxr5fdr.css");
 @import url("https://use.typekit.net/mde8fih.css");
 @import url("https://use.typekit.net/qxr5fdr.css");
 @import url("https://use.typekit.net/qxr5fdr.css");

body{
   background-color: #f9fed7
}
.grid-container{
/* background-color: #f9fed7 */
}

.bar {
  width: 1200px;
  height:134px;
}
.thechinesewaterdragon{
  text-align: center;
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.3em;
  text-transform:uppercase;
  margin: 15px;
  letter-spacing: 8px;
  color: #8d9617;
  text-shadow: 2px 1px 1px #333d0b;
}
.bar-container{
  display: flex;
  width: 1200px;
  height:45px;
  padding: 25px 0px 0px 0px;
  margin-left: none;
  padding-left: none;

}
.square-1{
  width: 700px;
  height: 45px;
  position: relative;
  background-color: #6d6d3b;
}
.square-2{
  width:150px;
  height:45px;
  position: relative;
  background: #bde517;
}
.square-3{
  width: 150px;
  height: 45px;
  position: relative;
  background-color: #8d9617;

}
.square-4{
  width: 150px;
  height:45px;
  position: relative;
  background: #bde517;
}
.square-5{
  width: 700px;
  height: 45px;
  position: relative;
  background-color: #6d6d3b;

}

.home-leaf {
  position: absolute;
  top: 16px;
  width: 100px;
  transform: translateX(-10px);

  /* z-index: -1; */
}

.home {
  position: absolute;
  color: #f9fde7;
  z-index: 99;
  font-family: chaparral-pro, serif;
  transform: rotate(-19deg);
  top: 20px;
  left: 20px;
  letter-spacing: 1px;
  text-decoration: none;
}
.photos-leaf {
  position: absolute;
  top: -30px;
  left: 20px;
  transform: rotate(-10deg);
  width: 95px;
}
.photos{
  position:absolute;
  color: #f9fde7;
  z-index: 99;
  transform: rotate(-36deg);
  font-family: chaparral-pro, serif;
  top: -26px;
  left: 30px;
  text-decoration: none;

}
.species-leaf{
  position: absolute;
  top:16px;
  width: 100px;
  left: 15px;
  width: 85px;

}
.species{
  position: absolute;
  color: #f9fde7;
  z-index: 99;
  transform: rotate(43deg);
  font-family: chaparral-pro, serif;
  top: 23px;
  left: 28px;
  text-decoration: none;


}
a{
  text-decoration: none;
  color:#f9fde7;
}
.leaf1-1{
position: absolute;
width: 50px;
z-index: 99;
left: 10px;
top: 30px;
transform: rotate(-120deg);
}
.leaf1-2{
position: absolute;
width: 50px;
left: 240px;
top: -45px;
transform: rotate(90deg);
}
.leaf1-3{
position: absolute;
width: 50px;
z-index: 99;
left: 350px;
top: 28px;
transform: rotate(-100deg);
}
.leaf1-4{
position: absolute;
width: 50px;
z-index: 99;
top: 25px;
left:40px;
transform: rotate(-200deg);
}
.leaf1-5{
position: absolute;
width: 50px;
z-index: 99;
left: 150px;
top: -50px;
}
.leaf1-6{
position: absolute;
width: 50px;
z-index: 99;
top: 25px;
left:350px;
transform: rotate(260deg);

}
.body {
  display: flex;
  width: 1200px;
  height:1000px;
  margin-top: none;
}
.content {
  width: 800px;
  height: 1000px;

}
.paragraphs{
  width: 650px;
  height: 1000px;
  margin: 60px 60px 40px 60px;
  font-family: chaparral-pro, serif;
  color: #6d6d3b;
  line-height: 1.5em;

}
.paragraphs-2{
  width: 800px;
  height: 1200px;
  font-family: chaparral-pro, serif;
  color: #6d6d3b;
  line-height: 1.8em;

}


.facts{
  width: 500px;
  height: 1000px;
  background-color: #6d6d3b;
  position: relative;
}
.waterdragonfacts{
  color: #f9fde7;
  text-align: center;
  padding: 0px 25px 0px 0px;
  font-family: henderson-sans-basic, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: none;
  font-size: .8em;
}
table{
  padding: 0px 0px 10px 60px;
  line-height: 1.4em;
  font-family: canada-type-gibson, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9em;
}
.lizard-top{
  position: absolute;
  z-index: 99;
  width: 250px;
  top: -55px;
  left:10px;
}
.lizard-side{
  position: absolute;
  z-index: 99;
  width: 150px;
  left: -30px;
  top: 100px;
}
.green-side{
  color: #bde517;
  text-align: right;
}
.white-side{
  color: #f9fde7;
  text-align: left;
}
.pic-1{
  float: right;
  width: 200px;
  margin: 10px;
}
.pic-2{
  float: left;
  width: 200px;
  margin: 10px 15px 10px 0px;
}
.pic-3{
  float: right;
  width: 200px;
  margin: 10px;
}
.pic-13{
  float: right;
  width: 150px;
  margin:10px;

}
.pic-11{
  float: left;
  width: 150px;
  margin: 10px;

}
.pic-12{
  float: right;
  width: 240px;
  margin: 10px;
  padding-top: 20px;
}

.photos-container{
 width: 1200;
 height: 1000;
 margin-top: 60px;
 board: black solid 1px;
}
.pictures{
  width: 270px;
  margin: 10px;
  box-shadow: 5px 5px 5px #6d6d3b;

}
.Species-content{
  padding-left: 20px;
  padding-top: 25px;
  width: 1200px;
  height: 1200px;
  display: flex;
  margin-top: 20px;
}
.health{
  border: solid 2px #6d6d3b;
  width:300px;
  height: 600px;
  font-family: chaparral-pro, serif;
  color: #6d6d3b;
  line-height: 1.5em;
  padding: 10px;
  margin: 10px;
  margin-top: 20px;
}
.title{
  font-family: canada-type-gibson, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #8d9617;
  margin-bottom:0px;
}
.subtitle{
  font-family: canada-type-gibson, sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #8d9617;
  margin-bottom: 0px;
  font-size: 1.8em;
}
.lines{
  border-bottom: 1px solid #8d9617;
}
.information{
  margin-top: 10px;
  padding-top: 10px;
}