body {
  position: relative;
  margin: 0; /* Remove margens padrão do body */
  padding: 0;
}

html, body {
	background: #250C51;
	background: linear-gradient(90deg, rgba(37, 12, 81, 1) 0%, rgba(79, 40, 119, 1) 100%);
}

.blococentral {
  display: block;
  width: 90%; /* Ajuste a largura conforme necessário */
  margin: 0 auto; /* Centraliza o bloco horizontalmente */
      /* Mantém o texto à esquerda por padrão */
  max-width: 710px;
}

* {
   text-rendering: optimizeLegibility;
   font-optical-sizing: auto;
   text-align: left;
}

h1 {
  font-family: Menlo, Inconsolata, 'Chivo Mono', monospace;
  font-size: 2.2em;
  font-weight: 700;
  color: white;
}

h2 {
  font-family: Menlo, Inconsolata, 'Chivo Mono', monospace;
  font-size: 1.5em;
  font-weight: 600;
  color: white;
}

h3 {
  font-family: Menlo, Inconsolata, 'Chivo Mono', monospace;
  font-size: 1.3em;
  font-weight: 500;
  color: white;
}

p {
  font-family: Menlo, Inconsolata, 'Chivo Mono', monospace;
  font-size: 1.35em;
  font-weight: normal;
  color: white;
}

a {
  font-family: Menlo, Inconsolata, 'Chivo Mono', monospace;
  font-weight: 800;
}

.quebradelinha {
  display: none; /* Ignora o <br>, transformando-o em um espaço */
}

/* Em telas maiores (ex.: acima de 768px), o <br> é respeitado */
@media (min-width: 768px) {
  .quebradelinha {
    display: inline; /* Permite que o <br> funcione normalmente */
  }
}

a:link { 
    text-decoration: none;
  }

a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

u {
    text-decoration-color: #FFF056;
}

b {
  font-weight: 600;
}

.imgprot {
   max-width: 400px; 
   width: 100%; 
   display: block; 
   margin-right: auto; 
   margin-left: 0;
   border-radius: 8px;
}

.depo {
  max-width: 95%;
  border-radius: 8px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

button {
  font-size: 22pt;
  font-family: Menlo, Inconsolata, 'Chivo Mono', monospace;
  font-weight: bold;
  color: #8b00e0;
  background-color: #f6e2ff;
  padding: 26px;
  border: 2px #afafaf;
  border-radius: 8px;
  box-shadow: 6px 12px 20px rgb(130 0 208);
  cursor: pointer;
  animation: pulse 2s infinite;
}

.azul {
    color: #3399ff;
}
.vermelho {
    color: #ff3535;
}
.roxo {
  color: #ab7eff;
}


/* CSS Global PARA EFEITO TYPING */
body p, body h1, body h2, body h3, body h4, body h5, body h6, body li, body span, body a, body div:not(:has(*)) {
  visibility: hidden; /* Apenas esconde elementos de texto, não imagens ou containers */
}

/* Certifique-se de que imagens estão sempre visíveis */
img, svg, video {
  visibility: visible !important;
}

/* Garantir que elementos com formatação interna também sejam animados corretamente */
b, strong, i, em, u, mark {
  visibility: inherit; /* Herda a visibilidade do pai */
}

.appear {
  visibility: visible !important; /* !important para garantir */
  animation: typewriter 1s linear both;
}

@keyframes typewriter {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Opcional: Cursor de digitação */
.typing::after {
  content: '|';
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}