@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);


body {
  background-color: navy;
  
  position:absolute;
  overflow:hidden;
  left:0px;
  margin:0px;

}

.header {
  position:absolute;
  margin-left: 20px;
  margin-top: 30px;
}

.heading {
  font-family: 'Helvetica', sans-serif;
  background:black;
  color:white;
  width:700px;
  padding:10px; 
  
}

a {text-decoration: none;
  color:white;
}
.divline {
  position:absolute;
  height:1200px;
  width:860px;
  margin-left:800px;
  background:black;
  margin-top: 0px;
  top:-30px;
}

#content {
  position:absolute;
  font-family: 'Helvetica', sans-serif;
  
  width:450px;
  margin-top: 200px;
  margin-left: 100px;
}

#conthead {

  position:absolute;
  font-family: 'Helvetica', sans-serif;
  font-size: 16px;
  color:white;

}

#conthead p {

  position:absolute;
  font-family: 'Helvetica', sans-serif;
  font-size: 12px;
  color:gray;
  top: 30px;

}

#body {
  position:absolute;
  font-size: 14px;
  margin-top: 80px;
  margin-left: 100px;
  left:180px;
  width:355px;
  color:white;
  
}

#projdesc {
  position: absolute;
  margin-top: 520px;
  font-size: 16px;
  color:white;
  width:570px;
  
}

.img {
  position: absolute;
  margin-top: 100px;
}
.img p {
  width:255px;
  font-family: 'Helvetica', serif;
  font-size: 10px;
  color:gray;
}

#nextpage {
  position: absolute;
  margin-left: 900px;
  margin-top: 750px;
  left:600px;
  font-family: 'Helvetica', sans-serif;
  font-size: 16px;
  color:white;
  width:100px;
  padding:10px;
  animation-name: movingtext;
  animation-duration: 10s;
  animation-iteration-count: 20;
}

.shape {
  position: absolute;
  left:1050px;
  top:200px;
  width: 400px;
  height: 400px;
  background-color: white;
  -webkit-animation: squareToCircle 2s 1s infinite alternate;
}

@-webkit-keyframes squareToCircle {
    0% {
      border-radius: 0 0 0 0;
      background: white;
      transform: rotate(0deg);
    }
    25% {
      border-radius: 50% 0 0 0;
      background: white;
      transform: rotate(45deg);
    }
    50% {
      border-radius: 50% 50% 0 0;
      background: white;
      transform: rotate(90deg);
    }
    75% {
      border-radius: 50% 50% 50% 0;
      background: white;
      transform: rotate(135deg);
    }
    100% {
      border-radius: 50% 50% 50% 50%;
      background: white;
      transform: rotate(180deg);
    }
}

#lastpage {
  position: absolute;
  font-family: 'Helvetica', sans-serif;
  font-size: 16px;
  left:900px;
  top:760px;
}