body {
  margin: 0;
  height: 100vh;
  overflow-x: hidden;
    color: white;


/*    background: linear-gradient(270deg, #000000, #0a0a2a, #1c1c7a, #3a3abf, #5f5fff, #3a3abf, #1c1c7a, #0a0a2a, #000000);*/

background: linear-gradient(270deg,
    #000000,
    #050515,
    #0a0a2a,
    #14143f,
    #1e1e5c,
    #2a2a7a,
    #1e1e5c,
    #14143f,
    #0a0a2a,
    #050515,
    #000000
  );  background-size: 1800% 1800%;

  animation: colorShift 30s ease-in-out infinite;
  scroll-snap-type: y mandatory; /* Eixo vertical, snap obrigatório */  /* <------------------ */
  overflow-y: scroll; /* <------------------ */
  height: 100%;  /* <------------------ */
}

 

.secao {
  scroll-snap-align: start;
  height: 100vh;
}





/*--------------------------------  menu ----------------------------------------------*/

.menu_fixo {
 
    background-color: rgba(0, 0, 0, 0.9);  
    height: 7vh;
    width: 100vw;
    display: flex;
    position: fixed;
    top: 0;
    z-index: 1;  
}

.btnMenu {
    margin-top: 0px;
    margin-left: 2px;
    display: flex;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    height: 100%;
    width: 5%;
    color: white;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    text-decoration: none;  
}

.btnMenu:hover {
    background: #1e1e7f;
}

.btnMenu a {
    color: white;  
    text-decoration: none;  
}

.btnMenu a:hover {
    color: white;  
}

/* */

/*-------------------------- INICIO --------------------------------*/
.conteiner1 {
    width: 100vw;   
    height: 100vh;  
    display: flex;

     background-image: url("../imagens/img.png"), linear-gradient(to right,  #646464 50%, blueviolet 50%);
   
    background-position: center;  
    background-repeat: no-repeat; 
          animation: animacao1  5s;
 
}



.icone {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
   background-repeat: no-repeat;
    cursor: pointer;
}

.in {
  bottom: 20px;
  right: 42%;
  background-image: url("../imagens/in.png");
}

.mail {
  bottom: 20px;
  right: 46%;
  background-image: url("../imagens/mail.png");
}

.git {
  bottom: 20px;
  right: 50%;
  background-image: url("../imagens/git.png");
}


.descricao1 {
  position: absolute;  
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);    
  display: flex;
  color: white;
  animation: typing 10s steps(40, end) infinite;
  white-space: nowrap;        
  overflow: hidden;           
  border-right: 5px solid white;  
}
 


/*----------------------------------------------------------*/


.conteinerPadrao{
    width: 100vw;   
    height: 100vh;  
    display: flex; 

}

.apoidoTexto{
    width: 50vw;   
    height: 50vh;
    padding: 5%;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
     
/*  transform: translate(-50%, -50%);    */

    position: absolute;


}


.margin1{
      margin-top: 10%;
      left: 20%;
 }
.margin1.animar {
    animation: animacao1 15s forwards;
}


.margin2{
      margin-top: 5%;
      left: 20%;
       background-color: rgba(0, 0, 0, 0);
 }
.margin2.animar {
    animation: animacao1 15s forwards;
}


 .margin3{
    margin-top : 30%;
/*    margin-left: 25%;*/
   }


.op{

  height: 5%;
  width: 100%;
  display: flex;
  background-color:rgba(0, 0, 0, 0.2) ;
  padding: 2%;
  border-radius: 0;
   cursor: pointer;
}
.op:hover{
  background-color: blueviolet ;
}

.opEscondido{
  display:  none;
}

/*================= slide =====================================*/

.mySlides {
  background: rgba(0, 0, 0, 0.66);
  margin-top: 4%;
  display: none; 
  width: 100%;
  max-width: 100%;
  height: auto;
}

.w3-button {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

.w3-display-left {
  left: 10px;
}

.w3-display-right {
  right: 10px;
}

.w3-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.w3-content {
  position: relative;
  max-width: 950px;
  margin: auto;
}




/*===============================================================*/
 
/*animcao */

@keyframes colorShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }+
}


@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 25ch;  
  }
}


@keyframes animacao1 {

      0% {
        opacity: 0;  
/*          font-size: 10%;*/

      }
      100% {
        opacity: 1; 
/*        font-size: 100%;*/
}


}


/*===============================================================*/

/* Ajustes para Celulares */


@media (max-width: 550px) {


    .in {
      bottom: 20px;
      right: 15%;
      background-image: url("../imagens/in.png");
    }

    .mail {
      bottom: 20px;
      right: 33%;
      background-image: url("../imagens/mail.png");
    }

    .git {
      bottom: 20px;
      right: 52%;
      background-image: url("../imagens/git.png");
    }

    .descricao1 {
      top : 25%;
      border-right: 2px solid white;  

    }

    .menu_fixo {
      display:  none ;
      
    }

    .margin1{
      margin-top: 10%;
      left: 5%;
      font-size: 10px ;
        width: 80vw;   
    height: 70vh;
   }


    .margin2{
      margin-top: 10%;
      left: 5%;
/*      font-size: 10px ;*/
        width: 80vw;   
    height: 70vh;
   }

    


  .margin3{
    margin-top: -10%;
    top : -10% ;
  }

    h1 {
      font-size: 20px ;
  }

  p{
    font-size: 10px ;
  }



.op{
    margin-top: -12%;
    font-size: 10px ;
    height: 5%;

}


.opEscondido{
    font-size: 8px ;

}


    @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 15ch;  
    }
  }


}

/*  Ajustes para Tablets */
@media (min-width: 550) and (max-width: 1024px) {
  /* estilos aqui */
}

/*  Ajustes para PC */
@media (min-width: 1024px) {
  /* estilos aqui */
}