body {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/2bim/imagens/abstract.png');
    background-repeat: repeat;
    background-size: 400px 500px;
    min-height: 100vh; /* Faz o body ter pelo menos a altura total da janela*/
    margin: 0; /* Remove a margem padrão do navegador*/
}

h1 {
    color: rgb(255, 255, 255);
    font-size: clamp(2rem, 5vw + 1rem, 60px); /* Tamanho responsivo entre 2rem e 60px */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);

    text-align: center;
    margin-top: 5vh;
    padding: 0 20px;
    
    animation: deslizarh1 4s cubic-bezier(0.25, 1, 0.5, 1) forwards; /*Executa a animação do título durante 4 segundos*/
}
  
@keyframes deslizarh1 {
    from {
      transform: translateY(-300px); /*Começa 300px acima da posição original*/
      opacity: 0; /*Começa invisível*/
    }
    to {
      transform: translateY(0); /*Termina na posição normal*/
      opacity: 1; /*Termina totalmente visível*/
    }
}

/*paragrafo 1*/
.container-p1 {
    color: rgb(255, 255, 255);
    font-size: clamp(1.2rem, 3vw + 1rem, 40px); /*Tamanho responsivo do texto*/
    text-shadow: 0 0 10px rgba(255, 255, 255, 1);

    max-width: 900px;
    width: 90%; /*Ocupa 90% da largura disponível*/
    margin: auto; /*Centraliza o bloco horizontalmente*/

    text-align: center;
    margin-top: 5vh;
    margin-bottom: -3vh;
    
    animation: deslizarP1 6s cubic-bezier(0.25, 1, 0.5, 1) forwards; /*Animação de entrada durante 6 segundos*/
}
  
@keyframes deslizarP1 {
    from {
      transform: translateY(-300px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

/*paragrafo 2*/
.container-p2 {
    color: rgb(255, 255, 255);
    font-size: clamp(1.2rem, 3vw + 1rem, 40px); /*Tamanho responsivo*/
    text-shadow: 0 0 10px rgba(255, 255, 255, 1);

    max-width: 900px;
    width: 90%; /*Usa 90% do espaço disponível*/
    margin: auto; /*Centraliza horizontalmente*/

    text-align: center;
    margin-top: 2vh;
    
    animation: deslizarP2 7s cubic-bezier(0.25, 1, 0.5, 1) forwards; /*Animação durante 7 segundos*/
}
  
@keyframes deslizarP2 {
    from {
      transform: translateY(-300px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

/*botão*/
.botao-voltar {
  display: flex;
  justify-content: center; /*Centraliza horizontalmente o conteúdo interno*/
  align-items: center; /*Centraliza verticalmente o conteúdo interno*/
  height: 11vh;
  width: max-content;
  margin: 0 auto;

  opacity: 0;
  transition: opacity 0.7s ease 4s; /*Transição de opacidade com duração de 0,7s e atraso de 4s*/
}

.botao-voltar.visivel {
  opacity: 1; /*Quando a classe visivel é adicionada, o botão aparece*/
}

.voltar {
  width: 16vh;
  max-width: 120px;
  transition: 0.2s; /*Anima mudanças em 0,2 segundos*/
}

.voltar:hover {
  filter: brightness(1.3);
  transform: scale(1.1);
}