/* Fundo da página */ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: url('https://i.imgur.com/0EJhrlT.jpg') no-repeat center center fixed; background-size: cover; } /* Container do login */ .login-container { background-color: rgba(9, 19, 48, 0.9); /* Aumentei o padding-top para dar espaço para a logo dentro da caixa */ padding: 80px 30px 40px; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); position: relative; width: 450px; text-align: center; backdrop-filter: blur(10px); /* Removi o margin-top: 20px; para confiar na centralização do */ margin-top: 0; } /* Substitui a palavra 'login' pela imagem */ .login-container::before { content: ""; display: block; /* Tamanho da área da logo */ width: 300px; height: 150px; background: url('https://imgur.com/tluAf3x.png') no-repeat center center; background-size: contain; /* Removi a margem negativa. A logo agora fica dentro do padding-top. */ /* Ajustei a margem inferior para criar o espaçamento entre a logo e o campo de usuário */ margin: -50px auto 40px; } /* Título */ h2 { margin-top: 0; margin-bottom: 15px; color: #333; } /* Labels */ label { display: block; margin-bottom: 8px; font-weight: bold; color: #fffdfd; text-align: left; } /* Estilo dos campos de input (usuário e senha) */ input { width: 100%; padding: 12px 15px; margin-bottom: 15px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 16px; background-color: #f9f9f9; transition: border 0.3s ease-in-out; } /* Efeito visual no foco (quando o campo é selecionado) */ input:focus { border: 2px solid #4CAF50; background-color: #fff; box-shadow: 0 0 8px rgba(12, 17, 162, 0.5); /* Sombra verde suave */ outline: none; } /* Estilo do botão */ button { width: 100%; padding: 12px; background-color: #096d92; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } /* Mensagem de erro */ #erro { text-align: center; font-size: 14px; color: #e74c3c; margin-top: 15px; display: none; /* Inicialmente oculta */ }