.Content-display{
    
    border-style: solid;
    border-width: 1px; /* Largura da borda */
    border-color: #03C988; /* Cor da borda */
    
    width: 60%;
    height: 70%;
    margin-top: 2rem;
    margin-left: 20%;

    display: flex; /* Usar flexbox para layout */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Alinha os itens em coluna */
    padding: 20px; /* Espaçamento interno */
    background-color: #00337C; /* Cor de fundo */
    color: white; /* Cor do texto */

    
}


#descricao{
    margin-top: 5px;
    width: 60%;
    font-size: 1.2rem; /* Tamanho da fonte */
    text-align: justify; /* Centraliza o texto */
    color: white; /* Cor do texto */

    border-color: #03C988;
    border-style: solid; /* Estilo da borda */
    border-width: 1px; /* Largura da borda */
}

#voltar-link{
   font-size: 1.2rem;
    color: white;
}
#pagina-simulador{
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

#titulo {
    margin-bottom: 10px; /* Reduz a margem inferior do título */
    color: white;
}

#campos-de-entrada {
    margin-top: 5px; /* Reduz a margem superior dos campos */
}



/* Ajuste para os campos de entrada */
#campos-de-entrada {
    display: grid; /* Usar grid para organizar os campos */
    grid-template-columns: 1fr 1fr; /* Duas colunas de tamanhos iguais */
    gap: 10px; /* Espaçamento entre os campos */
    width: 100%; /* Garantir que ocupe toda a largura disponível */
}

#campos-de-entrada input {
    flex: 1; /* Tamanho proporcional para todos os campos */
    min-width: 150px; /* Largura mínima para evitar campos muito pequenos */
    max-width: 300px; /* Largura máxima para evitar campos muito grandes */
    padding: 5px;
    background: #00337C;
    color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Ajuste individual para campos específicos */
#ValorInicial {
    flex: 2; /* Maior proporção para o valor inicial */
}

#Taxa, #Tempo, #Aportacao {
    flex: 1; /* Proporção menor para os outros campos */
}

/* Ajuste individual para os campos */
#ValorInicial, #Aportacao, #Taxa, #Tempo {
    width: 100%; /* Garantir que os campos ocupem toda a largura da célula */
    padding: 5px;
    background: #00337C;
    color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#resultado {
    margin-top: 2px;
    font-weight: bold;
    font-size: medium;
}

#Valor-final {
    margin-top: -10px;
    font-size: 20px;
    font-weight: bold;
}

#Diferenca{
    font-size: small;
}
#TipoInvestimento {
    background: #00337C;
    color: white;
}
#TipoInvestimento option {
    background: rgb(0, 0, 0);
    font-display: swap;
    color: rgb(255, 255, 255);
}

#Valorinicial {
    width: 30%;
}
#Aportacao {
    width: 30%;
}


#Calcular {
    width: 15%;
    padding: 10px; /* Mantido o maior valor de padding */
    border-color: black;
    border-style: solid;
    border-width: 1px;
    grid-column: span 2; /* O botão ocupa duas colunas */
    background: #03C988; /* Cor de fundo do botão */
    color: white;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}

#resultado {
    text-align: center; /* Centraliza o texto dos resultados */
    font-size: 1.5rem; /* Aumenta o tamanho da fonte dos resultados */
}

#Juros-Simples, #Juros-Compostos {
    color: #00ffaa; /* Cor verde para juros simples */
}


#resultado {
    color: white;
    margin-top: 20px;
    font-weight: bold;
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    /* Ajusta o layout principal */
    .Content-display {
        flex-direction: column; /* Alinha os elementos verticalmente */
        padding: 10px; /* Reduz o padding */
        width: 90%; /* Ajusta a largura para caber melhor */
        margin: 0 auto; /* Centraliza o conteúdo */
    }

    #titulo {
        font-size: 1.5rem; /* Reduz o tamanho do título */
        text-align: center; /* Centraliza o título */
        margin-bottom: 10px; /* Ajusta o espaçamento inferior */
    }

    #campos-de-entrada {
        grid-template-columns: 1fr; /* Uma única coluna em telas menores */
        gap: 10px; /* Espaçamento entre os campos */
        width: 100%; /* Garante que ocupe toda a largura disponível */
    }

    #campos-de-entrada input {
        max-width: 100%; /* Garante que os campos ocupem toda a largura */
        width: 100%; /* Ajusta a largura */
        font-size: 1rem; /* Ajusta o tamanho da fonte */
    }

    #Calcular {
        width: 100%; /* Botão ocupa toda a largura */
        padding: 15px; /* Aumenta o padding para melhor usabilidade */
        font-size: 1rem; /* Ajusta o tamanho da fonte */
    }

    #resultado {
        margin-top: 20px; /* Adiciona espaçamento acima dos resultados */
        text-align: center; /* Centraliza os resultados */
        font-size: 1.2rem; /* Ajusta o tamanho da fonte */
    }

    #menu {
        width: 100%; /* O menu ocupa toda a largura */
        margin-bottom: 15px; /* Ajusta o espaçamento inferior */
    }

    .flex-box {
        flex-direction: column; /* Alinha os itens verticalmente */
        gap: 10px; /* Espaçamento entre os itens */
    }

    #simuladordisplay a {
        font-size: 1rem; /* Ajusta o tamanho da fonte */
        margin-left: 0; /* Remove a margem lateral */
    }

    #descricao {
        margin-top: 20px; /* Adiciona espaçamento acima */
        width: 95%; /* Ajusta a largura para ocupar toda a tela */
        text-align: center; /* Centraliza o texto */
        font-size: 1rem; /* Ajusta o tamanho da fonte */
        padding: 10px; /* Adiciona padding para melhor espaçamento */
        order: 2; /* Move o #descricao para depois do display dos cálculos */
    }

    .Content-display {
        flex-direction: column; /* Alinha os itens verticalmente */
        width: 100%; /* Ajusta a largura */
        padding: 10px; /* Reduz o padding */
    }

    .Content-display-investimentos {
        order: 1; /* Garante que o display dos cálculos fique antes */
    }
}

/* Estilos para dispositivos muito pequenos (ex.: smartphones) */
@media (max-width: 480px) {
    #titulo {
        font-size: 1.2rem; /* Reduz ainda mais o tamanho do título */
        margin-bottom: 5px; /* Ajusta o espaçamento inferior */
    }

    #Calcular {
        font-size: 0.9rem; /* Ajusta o tamanho da fonte do botão */
        padding: 10px; /* Reduz o padding */
    }

    #campos-de-entrada input {
        font-size: 0.9rem; /* Ajusta o tamanho da fonte dos campos */
    }

    #resultado {
        font-size: 1rem; /* Ajusta o tamanho da fonte dos resultados */
    }

    .about-container a {
        font-size: 0.9rem; /* Reduz o tamanho da fonte para caber melhor */
    }

    .Content-display {
        width: 95%; /* Ajusta a largura para telas muito pequenas */
        padding: 10px; /* Reduz o padding */
    }
}

/* Ajustes gerais para links */
.about-container a {
    color: #4CAF50; /* Cor verde para links */
    text-decoration: none; /* Remove o sublinhado */
    word-wrap: break-word; /* Permite que o link quebre a linha */
    word-break: break-word; /* Garante que palavras longas sejam quebradas */
    display: inline-block; /* Garante que o link respeite o tamanho do contêiner */
    max-width: 100%; /* Limita a largura do link ao tamanho do contêiner */
}

.about-container a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}