body { background-color: #FFFBFB; font-family: "Poppins", sans-serif; } /* Estilo para o container inicial */ .inicio { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; max-width: 600px; margin: 0 auto; font-family: 'Arial', sans-serif; } /* Estilo para o logo */ #logo_grande { width: 200px; /* Reduzindo o tamanho para melhor proporção */ height: auto; /* Mantém a proporção da imagem */ margin-bottom: 20px; } /* Estilo para o título */ h1 { font-size: 2.5rem; /* Tamanho grande para o título */ color: #333; /* Cor escura para contraste */ margin-bottom: 10px; font-weight: bold; } /* Estilo para a descrição */ .descricao { font-size: 1.2rem; /* Tamanho médio para a descrição */ color: #555; /* Cor mais suave */ margin-bottom: 30px; line-height: 1.6; /* Espaçamento entre linhas */ } /* Estilo para o botão */ .btn-inicio { padding: 15px 30px; border-radius: 30px; /* Bordas mais arredondadas */ border: none; background: linear-gradient(45deg, #ff0000, #ff6666, #6e0404); background-size: 200% 200%; color: white; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Efeito ao passar o mouse no botão */ .btn-inicio:hover { animation: gradientAnimation 5s ease infinite; font-size: 1.2rem; box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); } /* Animação do gradiente */ @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }