/*importing the reset CSS*/
@import url('reset.css');


body
{
   background-color: #f7f7eb;
   padding: 0px;
   margin: 0px;
 }

#gradient
{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#introduction
{
  width: 600px;
  height: auto;
  color: #fff;
  font-family: "droid-serif", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 38px;
  margin: auto;
  margin-top: 100px;
  padding: 50px;
}

#enterlink
{
  width: 100px;
  height: auto;
  margin: auto;
  margin-top: 30px;
  padding: 20px;
  font-family: "source-sans-pro";
  font-size: 20px;
  letter-spacing: 2px;
  border: 2px #fff solid;
  font-weight: 700;
  text-align: center;
}

#enterlink a
{
  text-decoration: none;
  color: #fff;
}


#bodytext
{
  background-color: #fff;
  width: 550px;
  height: auto;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 100px;
  padding: 50px;
}

#bodytextexit
{
  width: 550px;
  height: auto;
  margin: auto;
  margin-bottom: 80px;
  padding-top: 36px;
}

.bodyimagery
{
    position: fixed;
    top: 98px;
    left: 20px;
    height: auto;
    padding: 20px;
}

.bodyimagery img
{
    width: 62%;
}

#backlink
{
  width: 100px;
  height: auto;
  margin: auto;
  margin-top: 40px;
  padding: 10px;
  font-family: "source-sans-pro";
  font-size: 14px;
  letter-spacing: 0.8px;
  border: 2px #333 solid;
  font-weight: 700;
  text-align: center;
}

#backlink a
{
  text-decoration: none;
  color: #333;
}

#exitlink
{
  position: absolute;
  top: 95%;
  left: 45%;
  width: 100px;
  height: auto;
  font-family: "source-sans-pro";
  font-size: 15px;
  letter-spacing: 0.8px;
  font-weight: 700;
  text-align: center;
}

#exitlink a
{
  text-decoration: line-through;
  color: #000;
}


#container
{
    width: auto;
    height: auto;
    margin: auto;
}

.metamorphosis
{
    position: absolute;
    top: 3%;
    left: 8%;
    width: 250px;
    height: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

.metamorphosis img
{
    width: 190px;
    height: 143px;
    margin-bottom: 20px;
}

.burrow
{
    position: absolute;
    top: 54%;
    left: 15%;
    width: 250px;
    height: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

.burrow img
{
    width: 190px;
    height: 143px;
    margin-bottom: 20px;
}

.poseidon
{
    position: absolute;
    top: 24%;
    left: 39%;
    width: 250px;
    height: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

.poseidon img
{
    width: 190px;
    height: 143px;
    margin-bottom: 20px;
}


.investigations
{
    position: absolute;
    top: 10%;
    left: 73%;
    width: 250px;
    height: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

.investigations img
{
    width: 190px;
    height: 143px;
    margin-bottom: 20px;
}

.colony
{
    position: absolute;
    top: 60%;
    left: 65%;
    width: 250px;
    height: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

.colony img
{
    width: 190px;
    height: 143px;
    margin-bottom: 20px;
}

.conclusion
{
    position: absolute;
    top: 155%;
    left: 39%;
    width: 250px;
    height: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

h1
{
    color: #000;
    font-family: "source-sans-pro";
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    letter-spacing: 0.6px;
}

h2
{
    color: #333;
    font-family: "source-sans-pro";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.conclusion h2
{
    margin-bottom: 100px;
}

h4
{
    color: #000;
    font-family: "droid-serif", serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
}

p
{
    text-indent: 30px;
}