body {
    font-family: 'Arial', sans-serif;
    /* O fundo do body é o fundo da página, fácil de mudar */
    background-color: #111; 
    color: #ddd; 
    margin: 0;
    padding: 0;
}

#main-container {
    max-width: 1000px;
    margin: 0 auto; 
    background-color: #222; /* Cor de fundo do container (contrasta com o body) */
    min-height: 100vh; 
    border: 4px double #a40000 ; /* Borda dupla magenta */
    box-shadow: 0 0 15px #a40000, 0 0 5px #e30022  inset; /* Brilho neon magenta */
}

.centralizado {
    text-align: center; 
    padding: 40px 20px;
    background-color: #333; 
    border-bottom: 3px dashed #e30022; /* Borda tracejada ciano */
}

.titulo-neon {
    max-width: 800px;
    margin: 0 auto 20px auto;
    font-size: 2.5em;
    color: #00ffff; /* Cor Ciano */
    text-shadow: 0 0 5px #e30022, 0 0 15px #e30022; /* Brilho Neon Ciano */
}

/* Imagem Principal com Borda Neon */
.imagem-principal {
    max-width: 400px;
    height: auto;
}

.borda-neon {
    border: 3px solid #e30022; /* Borda magenta */
    box-shadow: 0 0 10px #e30022, 0 0 20px rgba(255, 0, 255, 0.5); /* Brilho Neon */
    border-radius: 5px;
}

.conteudo-zigzag {
    padding: 40px 20px; 
}

.bloco-conteudo {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
    padding: 10px;
}

/* Borda Decorativa para os Blocos */
.borda-decorativa {
    border: 2px dotted #e30022; /* Borda pontilhada roxa */
    padding: 20px;
    border-radius: 5px;
}

.bloco-conteudo .texto {
    flex: 1;
    padding: 10px;
}

.bloco-conteudo .imagem {
    flex: 1;
    text-align: center;
}

.bloco-conteudo .imagem img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e30022;
    border-radius: 5px;
}

.bloco-conteudo.reverso {
    flex-direction: row-reverse;
}

/* Subtítulos com Efeito Neon */
.subtitulo-neon {
    color: #fff; /* Cor Magenta */
    font-size: 1.5em;
    margin-bottom: 15px;
    text-shadow: 0 0 3px #fff; /* Brilho suave */
}

p {
    line-height: 1.6;
}

/* Estilos para os spans coloridos (mantidos) */
span[style*="color: #dc143c"] { /* Crimson */
    font-weight: bold;
}

span[style*="color: #c71585"] { /* Medium Violet Red */
    font-style: italic;
}

span[style*="color: #b22222"] { /* Firebrick */
    text-decoration: underline;
}

@keyframes piscar {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.pisca-pisca {
    animation: piscar 2s linear infinite; /* Aplica a animação às imagens GIF */
}

@media (max-width: 768px) {
    
    .centralizado {
        padding: 20px 10px;
    }

    .titulo-neon {
        font-size: 1.8em;
    }

    .bloco-conteudo,
    .bloco-conteudo.reverso {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }
    
    .bloco-conteudo .texto,
    .bloco-conteudo .imagem {
        flex: none;
        width: 100%;
    }
}