body{
   
  background-image:url(recifes.jpg); width:100%;
  image-rendering: auto;
  margin: 1.0em;
   height:0.7em;
     padding-right: 0.15em;
   border-width:0.1em;
   border-right: 5.0em #290d1e;
   padding-left:0.1em;
   animation-name:initial;
   animation-duration: 3s;
   color: aliceblue;
   text-align: justify;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #062949;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 1em 0.5em;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #ed5656;
}

.projetos{
   
   text-decoration: double;
   font-stretch: condensed;
   font-size:1em;
 align-items: center;
   font-family:Jazz LET, fantasy; 
   margin-left: 20%;
}






   .inicial{
    align-items: center;
       text-align: center; 
       font-family: calibri; 
       font-size: 0.7em;
       background:rgb(51, 88, 184);
       width: 100%;
       height: 50%;

   }
   
  

.principal{
  background-color: #070004;
  width: 100%;
  padding-bottom:  3%;;
}
.icone1{
  background-image: url(imagemtopo.jpg);
  animation-duration: 3s;
animation-name: slidein;
align-items: center;
color:white;

}
  

@keyframes slidein {
from {
  margin-left:100%;
  width: 300%;
}

to {
  margin-left: 0%;
  width: 100%;
}
}



.videogif
{
     background-image: url(gif.gif);
     align-items: right;
     box-sizing: border-box;
     border-radius: 0.1em 0.15em 0.25em;
     width: 100%
     background-color: aqua;
     padding-right: 1.0em;
      
}




.icone2{

  animation-duration: 3s;
animation-name: slidein;
margin-left:33.5%;
}
.icone3{

 
  animation-duration: 3s;
animation-name: slidein;
margin-left:33.5%;
}

@keyframes slidein {
from {
  margin-left: 100%;
  width: 300%;
}

to {
  margin-left: 0%;
  width: 100%;
}
}


.h{
padding-bottom: 0.5em;
}

.formulario{
  background-image: url(bolinhas.gif);
  background-color:white;
  margin-left: 20%;
  text-align: center;
 background-size:20%;
 margin
 background-repeat: no-repeat;
    border-bottom:0.2em;
    border-radius: 3.0em;
      color: #754d87;
      width: 50%;
      height: 50%;
      text-align: center;
      padding-bottom: 0.2em;
    
      }


.Creditos{
background-position:30%;
background-image: url(aquario.gif);
background-color: #7a2c2c;
background-repeat: no-repeat;
width: 40%;
height:50%;
align-items:normal;
 border-width: 100%;
 margin-right: 100%;
   margin-left: -25%;
   padding-left: 50%;
 animation-direction: alternate-reverse;
color: rgb(215, 175, 93);
 text-align: center;
 text-size-adjust:2.0em;
 font-size: 100%;

 }


 ul{
 list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;


  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 0.14em 0.16em;
    text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #7a2c2c;
  }
}


.apresentacao{
background-size: contain;
border-style: dotted;
margin-left: 25%;
margin-right: 30%;
background-repeat: no-repeat;
padding: 1em 6.1em 0.9em 1em;
background-color: rgb(85, 59, 91);
width: 30%;
font-family: cursive;
font-size: 100%;

}






   h3{
    background-color: #1955;
    text-align: center;
   }


.texto3{
  background-color: #290d1e;
  width: 100%;

  }
.h2{
  background-color: green;
}
.lixopraia{
  background-color: #ed5656;

}

div.video{
  float: center;
  width: 50%;
  height: 40%;
}