body {
    font-family: Arial, sans-serif;
    background: #f0f0f0;
    margin: 20px;
    padding: 0;
    color: #333;
}

/* Div que contém a frase dinâmica */
#frase-dinamica {
    background-color: #ffffff; /* Fundo branco */
    padding: 15px;              /* Espaçamento interno */
    border-radius: 8px;         /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center;
    font-size: 20px;
    color: #004080; /* Cor do texto */
    margin: 20px auto;
    max-width: 900px; /* Aumentando a largura máxima */
    width: 100%; /* A div vai ocupar até 100% da largura disponível até o limite de max-width */
    display: block;
}

/* Ajuste para dispositivos móveis (unificando retrato e paisagem) */
@media screen and (max-width: 600px) {
    #frase-dinamica {
        font-size: 18px;        /* Tamanho de fonte ajustado para telas pequenas */
        padding: 12px;          /* Reduz o padding para telas menores */
        max-width: 90%;         /* Aproveita melhor a largura da tela */
        margin-bottom: 20px;    /* Espaçamento abaixo da div */
    }
}

/* No caso de telas maiores (computadores e tablets em modo paisagem) */
@media screen and (min-width: 601px) {
    #frase-dinamica {
        font-size: 20px;         /* Tamanho padrão de fonte */
        max-width: 900px;        /* Largura limitada a 900px em telas grandes */
        margin-bottom: 30px;     /* Espaço maior em telas grandes */
    }
}

/* Adicionando a quebra de linha para o texto "o Nosso Dicionário..." */
#frase-dinamica span {
    display: block;
    margin-top: 10px;
}