@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Garante que o body cubra pelo menos a altura da tela */
    background-image: url(bg.jpg);
    background-repeat: no-repeat no-repeat;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho do elemento */
}

.container {
    background-color: white;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 85%;
    max-width: 600px;
    min-height: 100vh; /* Garante que o contêiner tenha pelo menos a altura da tela */
    box-sizing: border-box;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
}

/* Estilo personalizado para o select */
.input-group select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none; /* Remove a aparência padrão do sistema */
    -webkit-appearance: none; /* Para compatibilidade com navegadores WebKit (Safari, Chrome) */
    background-color: #f8f8f8; /* Cor de fundo do select */
    background-image: url('arrow-down.png'); /* Ícone de seta para baixo */
    background-position: calc(100% - 10px) center; /* Posição do ícone de seta */
    background-repeat: no-repeat; /* Evita repetição do ícone */
    cursor: pointer;
}

.input-group select:hover {
    border-color: #999; /* Cor da borda ao passar o mouse */
}

.input-group select:focus {
    outline: none; /* Remove a borda de foco padrão */
    border-color: #66afe9; /* Cor da borda ao focar */
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); /* Sombra ao focar */
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 95%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #000000;
    color: rgb(255, 0, 0);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold; /* Adiciona negrito ao texto do botão */
}

button:hover {
    background-color: #383a38;
}

.result-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.result-box {
    background-color: #00FF00; /* Verde florescente */
    padding: 10px;
    border-radius: 10px;
    border: 2px solid rgb(49, 49, 49);
    width: 45%;
    text-align: center;
}

.result-box p {
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adiciona sombra ao texto */
}

.image-container {
    margin-top: 20px;
    text-align: center;
}

.image-container img {
    width: 100%;
    max-width: 800px; /* Aumentar o limite de largura */
    border: 3px solid #333; /* Adiciona borda à imagem */
    border-radius: 8px; /* Adiciona bordas arredondadas */
}

.table-container {
    margin-top: 20px;
    overflow-y: auto; /* Adiciona barra de rolagem vertical */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 7px;
    border: 1px solid #ff0000;
    text-align: center;
    font-size: 13px;
}

thead {
    background-color: #000000;
    color: rgb(255, 0, 0);
}