@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
  }
  html {
    height: 100%;
    width: 100%;
    background-color: black;
  }
  body{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #000 !important;
  }
  .principal {
    height: 100%;
    width: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 50px;
  }
  .titulos {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .titulo1{
    font-family: "Poppins", sans-serif;
    color: whitesmoke;
    font-size: 100px;
  }
  .titulo2{
    width:1000px;
    height: 100px;
  }
/* Animação titulo */
  section {
    display: flex;
    background: #000;
    min-height: 150px;
    align-items: center;
    justify-content: center;
  }
  
  .content {
    position: relative;
    font-family: "Poppins", sans-serif;

  }
  
  .content h2 {
    color: #fff;
    font-size: 150px;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  
  .content h2:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px #dc3545;
  }
  
  .content h2:nth-child(2) {
    color: #dc3545;
    animation: animate 4s ease-in-out infinite;
  }
  
  @keyframes animate {
    0%,
    100% {
      clip-path: polygon(
        0% 45%,
        16% 44%,
        33% 50%,
        54% 60%,
        70% 61%,
        84% 59%,
        100% 52%,
        100% 100%,
        0% 100%
      );
    }
  
    50% {
      clip-path: polygon(
        0% 60%,
        15% 65%,
        34% 66%,
        51% 62%,
        67% 50%,
        84% 45%,
        100% 46%,
        100% 100%,
        0% 100%
      );
    }
  }
/* Animação texto */


.typewriter .h1 {
  color: #fff;
  font-size: 50px;
  font-family: 'Amatic SC', cursive;
  overflow: hidden; 
  border-right: .15em solid orange; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
    background-color: #000;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color:whitesmoke}
}
/* Enemas */

.principal-tutorial {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conteudo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.voltar {
  height: 100%;
  padding-top: 50px;
  padding-left: 50px;
}
.imagem {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
}