/* CSS Document
Desenvolvido por:
	Brunno Arthur Monteiro Soares
	http://brunnosoares.com/
	bs@brunnosoares.com
*/
body {
    font-family: 'Arial', sans-serif; /* Define a fonte padrão */
    background-image: url('images/background.jpg'); /* Define a imagem de fundo */
    background-size: cover; /* Faz a imagem de fundo cobrir toda a área visível */
    background-position: center; /* Centraliza a imagem de fundo */
    margin: 0; /* Remove margens padrão */
    display: flex; /* Usa flexbox para alinhamento */
    flex-direction: column; /* Define a direção dos itens flex como coluna */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
    min-height: 100vh; /* Define a altura mínima como 100% da altura da janela */
    color: #fff; /* Define a cor do texto como branco */
}

.content-wrapper {
    text-align: center; /* Centraliza o texto */
    display: flex; /* Usa flexbox para alinhamento */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    width: 100%; /* Largura total do contêiner */
    flex: 1; /* Permite que o contêiner cresça para ocupar o espaço disponível */
    margin-top: -20vh; /* Move o contêiner 20% para cima */
}

.logo {
    display: block; /* Exibe a logo como um bloco */
    margin: 0 auto 20px; /* Centraliza horizontalmente e adiciona espaço abaixo */
    max-width: 100%; /* Impede que a logo exceda a largura do contêiner */
    height: auto; /* Ajusta a altura automaticamente para manter a proporção */
    width: 367.2px; /* Largura da logo reduzida em 10% */
    height: 104.4px; /* Altura da logo reduzida em 10% */
}

.container {
    background-color: rgba(0, 0, 0, 0.4); /* Fundo preto com 40% de opacidade */
    padding: 20px; /* Espaçamento interno do container */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para profundidade */
    max-width: 500px; /* Largura máxima do container */
    width: 90%; /* Largura do container */
    text-align: center; /* Centraliza o texto dentro do container */
    margin: 0 auto; /* Centraliza o container horizontalmente */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
}

label {
    font-size: 14px; /* Tamanho da fonte dos rótulos */
    color: #ddd; /* Cor do texto dos rótulos */
}

input[type="text"], input[type="password"] {
    width: calc(100% - 20px); /* Largura total menos espaçamento */
    padding: 10px; /* Espaçamento interno dos campos de entrada */
    margin-bottom: 20px; /* Espaçamento abaixo dos campos */
    border: none; /* Remove bordas padrão */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 16px; /* Tamanho da fonte nos campos de entrada */
    background-color: #fff; /* Fundo branco dos campos */
    color: #333; /* Cor do texto dos campos */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
}

input::placeholder {
    color: #999; /* Cor do texto do placeholder */
    font-size: 16px; /* Tamanho da fonte do placeholder */
}

button {
    width: 100%; /* Largura total do botão */
    padding: 10px; /* Espaçamento interno do botão */
    background-color: #004580; /* Cor de fundo do botão */
    color: #fff; /* Cor do texto do botão */
    border: none; /* Remove bordas padrão */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 14px; /* Tamanho da fonte do botão */
    cursor: pointer; /* Cursor de ponteiro ao passar sobre o botão */
    transition: background-color 0.3s; /* Transição suave para a cor de fundo */
}

button:hover {
    background-color: #5a6268; /* Cor de fundo do botão ao passar o mouse */
}

.alert {
    color: red; /* Cor do texto do alerta */
    margin-top: 10px; /* Espaçamento acima do alerta */
    font-size: 12px; /* Tamanho da fonte do alerta */
}

footer {
    text-align: center; /* Centraliza o texto do rodapé */
    padding: 10px; /* Espaçamento interno do rodapé */
    background-color: rgba(0, 0, 0, 0.7); /* Fundo preto com 70% de opacidade */
    color: #fff; /* Cor do texto do rodapé */
    width: 100%; /* Largura total do rodapé */
    font-size: 12px; /* Tamanho da fonte do rodapé */
    position: relative; /* Posiciona o rodapé no final da página */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
}

.remember-me {
    display: flex; /* Exibe como flexbox para alinhamento */
    align-items: center; /* Alinha verticalmente no centro */
    justify-content: center; /* Centraliza horizontalmente */
    margin-bottom: 20px; /* Espaçamento abaixo do checkbox */
}

.remember-me input {
    margin-right: 10px; /* Espaçamento à direita do checkbox */
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        margin-top: 10vh; /* Move o container 10% para baixo em dispositivos móveis */
    }

    .logo {
        width: 90%; /* Reduz a largura da logo em 10% */
        height: auto; /* Mantém a proporção da altura */
    }

    input[type="text"], input[type="password"] {
        width: calc(100% - 20px);
    }

    button {
        font-size: 16px;
    }

    footer {
        margin-bottom: 10vh; /* Ajusta o rodapé para dispositivos móveis */
    }
}