@import url("https://fonts.googleapis.com/css2?family=Anton&family=Paytone+One&family=Playwrite+VN:wght@100..400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Paytone+One&family=Playwrite+VN:wght@100..400&family=Unbounded:wght@200..900&display=swap");

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  /* Ocupa toda a largura */
}

header {
  text-align: center;
  padding: 20px;
}

section {
  margin: 0 auto;
  /* Centraliza horizontalmente */
  max-width: 100%;
  /* Define uma largura máxima */
  width: 100%;
  /* Faz o elemento ser responsivo */
}

h1 {
  font-family: "Paytone One", serif;
  padding-top: 15px;
  font-size: 40px;
}

.fundo01 {
  padding: 3cqi;
  background-color: rgb(25, 25, 100);
}

.fundo02 {
  background-color: #e09500;
}
.fundo03 {
  background-color: rgb(0, 154, 225);
}
.fundo04 {
  background-color: rgb(1, 41, 59);
}

.logo {
  margin-top: 45px;
  width: 30%;
  max-width: 150px;
  align-items: center;
  border-radius: 2cm;
}

/* Filhotes Diponíveis */
.click {
  width: 100%;
  padding: 4vw;
  text-align: center;
  align-items: center;
}

.click img {
  width: 60vw;
  opacity: 0; /* Começa invisível */
  transform: translateY(-50px); /* Começa acima */
  animation: slideIn 2s ease-out forwards; /* Aplica a animação */
}

@keyframes slideIn {
  from {
    opacity: 0; /*  Começa invisível. */
    transform: translateY(-90px); /* Começa um pouco acima. */
  }
  to {
    opacity: 2; /* Duração de 2 segundo. */
    transform: translateY(0);
  }
}

.click a {
  color: #ffffff;
  font-size: 30px;
  text-decoration: none;
}
.click .rodape {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 13px;
}