/* --------- ESTILOS DA SEÇÃO 'PROJETOS' --------- */

/* Definindo que a seção que contém os cards dos projetos será um flexbox com gap de 5em entre seus itens e alinhamento horizontal central */
.projetos_display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em;
    padding: 0 1em;
    margin-top: min(2.5em, 4vw);
}

/* Definições para o card que exibe um projeto */
.card_projeto {
    background-color: #252525;
    border-radius: 10px;
    border: 3px solid #252525;
    width: 25em;
    display: flex;
    flex-direction: column;
    color: #fff;
}

/* Div que separa a parte de informações do card da imagem. Essa div é uma flexbox em direção de coluna que garante que todos os elementos terão a mesma posição */
.card_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
    padding: 1em;
}

/* Garantindo que a imagem do projeto tome 100% de width do card e tenha um border radius de 8px para os cantos superiores e 0 para os cantos inferiores*/
.projeto_cover {
    width: 100%;
    border-radius: 8px 8px 0 0;
}

/* Definindo margem inferior de 5px para o nome do projeto */
.card_projeto_header h3 {
    margin-bottom: 5px;
}

/* Definindo as sub-seções de body e footer do card como flexboxes */
.card_projeto_body, .card_projeto_footer {
    display: flex;
    flex-wrap: wrap;
}

/* Os itens do flexbox do body do card terão gap de 1em */
.card_projeto_body {
    gap: 10px;
}

/* Definições para os itens P do body do card, que mostram as tecnologias utilizadas no projeto */
.card_projeto_body p {
    background-color: #5a5a5a;
    padding: 10px;
    border-radius: 10px;
}

/* Definindo que os itens do footer serão jogados para o canto do flexbox */
.card_projeto_footer {
    justify-content: space-between;
}

/* Cor para o link do footer */
.card_projeto_footer a {
    color: #fff;
}

/* Definindo que o link que carrega um ícone e o nome do projeto seja um flexbox com alinhamento vertical central */
.link_deploy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Width de 3em para os ícones de link e do github */
.link_projeto_icon {
    width: 3em;
}