body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

h1, h2 {
    color: #333;
    font-size: 1.5em; /* Tamanho da fonte reduzido para dispositivos móveis */
}

input {
    width: 100%;
    padding: 8px; /* Padding reduzido para dispositivos móveis */
    margin: 8px 0; /* Margem reduzida para dispositivos móveis */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 0.9em; /* Tamanho da fonte reduzido para dispositivos móveis */
}

button {
    width: 100%;
    padding: 10px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em; /* Tamanho da fonte ajustado para dispositivos móveis */
    margin-top: 10px; /* Margem superior para separar o botão dos inputs */
}

button:hover {
    background: #218838;
}

.erro {
    color: red;
    font-weight: bold;
    font-size: 0.9em; /* Tamanho da fonte reduzido para dispositivos móveis */
}

/* Media Queries para telas menores */
@media (max-width: 480px) {
    h1, h2 {
        font-size: 1.2em; /* Tamanho da fonte ainda menor para telas muito pequenas */
    }

    input {
        padding: 6px; /* Padding ainda menor para telas muito pequenas */
        margin: 6px 0; /* Margem ainda menor para telas muito pequenas */
        font-size: 0.8em; /* Tamanho da fonte ainda menor para telas muito pequenas */
    }

    button {
        padding: 8px; /* Padding ainda menor para telas muito pequenas */
        font-size: 0.9em; /* Tamanho da fonte ainda menor para telas muito pequenas */
    }

    .erro {
        font-size: 0.8em; /* Tamanho da fonte ainda menor para telas muito pequenas */
    }
}

select {
    width: 100%;
    padding: 8px; /* Padding igual ao dos inputs */
    margin: 8px 0; /* Margem igual aos inputs */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 0.9em; /* Tamanho da fonte igual ao dos inputs */
    background-color: #fff;
    cursor: pointer;
}

/* Media Queries para telas menores */
@media (max-width: 480px) {
    select {
        padding: 6px; /* Padding menor para telas muito pequenas */
        margin: 6px 0; /* Margem menor para telas muito pequenas */
        font-size: 0.8em; /* Tamanho da fonte menor para telas muito pequenas */
    }
}