/* IMAGEM FIXA NA TELA */
 body{
    background-image: url('./assets/img/tabela_bichos.png'); /* Caminho para a imagem */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    background-position: center center; /* Centraliza a imagem */
    background-attachment: fixed; /* Deixa a imagem fixa */
    background-size: cover; /* Faz a imagem cobrir todo o fundo */
}
/* Estilização básica do menu */
.menu-principal ul {
    /* Remove a formatação padrão da lista */
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    /* Coloca os itens na mesma linha usando Flexbox */
    display: flex;
    gap: 15px; /* Adiciona um espaçamento de 15px entre os itens */
}

/* Estilo para os links, transformando-os em botões */
.menu-principal a {
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: white; /* Cor do texto */
    background-color: #007BFF; /* Cor de fundo do botão */
    padding: 10px 20px; /* Preenchimento interno para dar a aparência de botão */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background-color 0.3s ease; /* Efeito de transição suave */
    display: block; /* Ocupa todo o espaço do <li> */
}

/* Efeito de hover (quando o mouse passa por cima) */
.menu-principal a:hover {
    background-color: #0056b3; /* Cor mais escura ao passar o mouse */
}
/* Container que adiciona a perspectiva 3D */
.sphere-container {
    width: 200px;
    height: 200px;
    perspective: 800px; /* Adiciona profundidade à cena 3D */
    margin: 5px left; /* Centraliza o container */
}

/* Estilização da imagem para se tornar uma esfera */
.sphere-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha a área */
    border-radius: 50%; /* Transforma a imagem em um círculo */
    transform-style: preserve-3d; /* Mantém a imagem em um espaço 3D */
    animation: spin 10s infinite linear; /* Aplica a animação de rotação */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra para dar mais profundidade */
}

/* Definição da animação de rotação */
@keyframes spin {
    from {
        transform: rotateY(0deg); /* Início da rotação */
    }
    to {
        transform: rotateY(360deg); /* Fim da rotação (360 graus) */
    }
}
.Cor_Azul  {
    color: blue; /* Pode usar nome da cor ou código hexadecimal (#0000FF) */
    background-color: white;
    padding: 2px 2px; /* Preenchimento interno para dar a aparência de botão */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background-color 0.3s ease; /* Efeito de transição suave */
    display: block; /* Ocupa todo o espaço */
}
.box-frase {
    /* Tamanho do box */
    width: 300px;           
    height: 150px;          
    box-sizing: border-box; 

    /* Fundo Transparente */
    background-color: transparent; 
    /* Você também pode simplesmente remover a linha background-color inteira */
    
    /* Estilos visuais */
    border: 2px solid #333;    /* A borda ajuda a ver onde o box está */
    padding: 20px;             
    margin: 20px;              
    
    /* Centralização do texto */
    display: flex;             
    align-items: center;       
    justify-content: center;   
    text-align: center;        
}
.box-texto-centralizado {
    text-align: center; /* Centraliza todo o texto dentro da div */
    width: 100%;        /* Opcional: Garante que ocupe toda a largura disponível */
    margin-top: 20px;   /* Adiciona um espaço acima do bloco, se necessário */
}

/* Opcional: Estilo para que os parágrafos fiquem com um tamanho de fonte parecido com um h3 */
.box-texto-centralizado p {
    font-size: 1.17em; /* Este é o tamanho padrão de um h3 no navegador */
    margin: 0;         /* Remove margens padrão dos parágrafos para ficarem mais juntos */
    line-height: 1.4;  /* Espaçamento entre linhas */
}