/* Detalhe - Não é mencionado que todas as declarações CSS devem seguir esse mesmo padrão, onde a linha de classes declaradas segue a ordem das tags, indo da mais externa ("Quem inicia a linha") para a mais interna ("Quem dá o fim para a linha"). Seguindo esse modelo de declaração de classes, todos os elementos se tornam extremamente únicos, minimizando as chances de existir conflitos de classes. */

/* ========================================= Painel dedicado para estilizar os componentes de busca do capítulo 1 =============================================== */

/* Esta linha de classe aponta para a classe painel_Cap e define os alinhamentos principais de toda a estrutura. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap {
    width: 80%;
    height: 74vh;
    padding: 2vw;

    background-color: var(--Cor_Segundaria_5_1);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

/* Esta linha de classe aponta para a classe coluna_1 e define as extensões máximas que devem ser obedecidas, enquanto ajusta os alinhamentos dinâmicos para que o painel se adapte, utilizando o modelo flex. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

/* Esta linha de classe aponta para estilizar um botão que está dentro de insercao_ambiente. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .insercao_ambiente button {
    outline: none;
    border: none;

    width: 7vw;
    height: 6vh;

    background-color: var(--Cor_Segundaria_2_1);
    box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
    color: var(--Matriz);

    cursor: pointer;
}

/* Esta linha de classe aponta para a classe pesquisa e define os limites de extensão, além de alinhar todos os elementos dentro dessas extensões. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa {
    width: 70%;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Esta linha de classe aponta para estilizar um input que está dentro de pesquisa. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa input {
    background: none;
    outline: none;
    border: none;

    width: 13vw;
    height: 4vh;

    background-color: var(--Matriz);
    border: 0.4vw solid var(--Cor_Segundaria_2_1);
    box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);

    padding-left: 1vw;
    padding-right: 1vw;

    font-size: 0.8vw;
    font-family: var(--font_titulo);
    color: var(--Cor_Segundaria_2_1);
}

/* Esta linha de classe aponta para estilizar um botão que está dentro de pesquisa. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa button {
    background: none;
    outline: none;
    border: none;

    width: 4vw;
    height: 6vh;

    background-color: var(--Cor_Segundaria_2_1);
    box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);

    cursor: pointer;
}

/* Esta linha de classe aponta para estilizar uma imagem que está sendo usada como um pequeno detalhe no botão de pesquisa. */
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa img {
    width: 2vw;
    filter: drop-shadow(2px 2px 0px var(--Cor_Segundaria_2_2));
}

/* ========================================= Fechamento do bloco de busca =============================================== */