@import url('https://fonts.googleapis.com/css2?family=Galada&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jockey+One&display=swap');

:root {
    /*  Fontes   */
    --fonte_principal:  "Galada", cursive;
    --fonte_secundaria: "Jockey One", sans-serif;
    /*  Cores   */
    --primaria: #00A6A6;
    --secundaria: #246EB9;
    --terciaria: #ACCBEE;
    --alternativa: #F39237;
    --clara: #E7F0FD;
    --escura: #1A1A1A;
    --gradiente-fundo-principal: linear-gradient(207deg, #ACCBEE, #E7F0FD, #ACCBEE);
    --gradiente-fundo-secundario: linear-gradient(207deg, #00A6A6, #ACCBEE, #00A6A6);
    --gradiente-fundo-caixa: linear-gradient(207deg, #00A6A6, #77D1D1, #00A6A6);
}

body {
    background-image: var(--gradiente-fundo-principal);
    height: 100vh;

}

/* Cabeçalho */
.cabecalho {
    display: flex;
    justify-content: center;
    height: 100px;
    background-image: var(--gradiente-fundo-secundario);
    border-bottom: 3px var(--secundaria);
}
.espacamentoCabecalho {
    width: 65vw;
}

.tituloCabecalho {
    height: 7rem;
}
/* Principal */

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Seção Apresentação */

.apresentacao {
    display: flex;
    align-items: center;
    max-width: 60vw;
    padding-top: 2rem;
}

.tituloApresentacao {
    font-family: var(--fonte_principal);
    font-size: 4rem;
    color: var(--alternativa);
}

.paragrafoApresentacao {
    font-size: 1.3rem;
    padding-right: 15rem;
    text-align: justify;
    font-family: var(--fonte_secundaria);
}

.logoApresentacao {
    width: 250px;
}

.nomeApresentacao {
    width: 250px;
}

/* Seção Pontos Fortes */

.pontosFortes {
    height: fit-content;
    background-image: var(--gradiente-fundo-secundario);
    width: 100%;
    display: flex;
    justify-content: center;
}

.pontoForte {
    width: 350px;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.tituloPontoForte {
    color: var(--clara);
    font-family: var(--fonte_principal);
    font-size: 2rem;
}

.estrelas {
    display: flex;
    justify-content: center;
    align-items: center;
}

.estrelaM {
    height: 3rem;
}

.estrelaG {
    height: 4rem;
}

.paragrafoPontoForte {
    font-family: var(--fonte_secundaria);
    font-size: 1rem;
}

/* Citacão */

.citacao {
    width: 60vw;
}

.espacamentoCitacao {
    display: flex;
    padding-top: 5rem;
}

.aspas {
    font-size: 5rem;
    font-family: var(--fonte_secundaria);
    color: var(--alternativa);
}

.fraseCitacao {
    font-family: var(--fonte_secundaria);
    text-align: center;
    font-size: 1.1rem;
}

.nomeAutor {
    font-family: var(--fonte_secundaria);
    text-align: right;
    font-size: 1.3rem;
    padding-bottom: 5rem;
}

/* Caixa de Contato */

.caixa {
    width: 45vw;
    height: 250px;
    background-image: var(--gradiente-fundo-caixa);
    margin-bottom: 5rem;
    border: 4px solid var(--alternativa);
    border-radius: 1rem;
    box-shadow: 4px 4px 1px #00000033;
    display: flex;
    padding: 1rem;
    justify-content: space-between;
}

.esquerdaCaixa {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.tituloCaixa {
    font-family: var(--fonte_principal);
    color: var(--clara);
    font-size: 2rem;
}

.paragrafoCaixa {
    font-family: var(--fonte_secundaria);
    color: var(--clara);
}

.direitaCaixa {
    display: flex;
    justify-content: end;
    align-items: center;
}

.formulario {
    display: flex;
    flex-direction: column;
}

.campo {
    box-shadow: -4px -4px 1px #00000033;
}

.campo::placeholder, .botao {
    font-family: var(--fonte_secundaria);
    padding-left: 1rem;
    font-size: 1.5rem;
    color: var(--primaria);
}

.campo, .botao {
    height: 50px;
    width: 16rem;
    border-radius: 1rem;
    border: 2px solid var(--secundaria);
}

.botao {
    background-color: var(--alternativa);
    color: var(--clara);
    margin-top: 1rem;
    width: 16.5rem;
    box-shadow: 4px 4px 1px #00000033;
}

/* Rodapé */

.rodape {
    width: 100%;
    height: 150px;
    background-image: var(--gradiente-fundo-secundario);
    display: flex;
    justify-content: center;
}

.espacamentoRodape {
    display: flex;
    justify-content: space-between;

    width: 60vw;
}
.desenvolvedora {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.textoRodape {
    font-family: var(--fonte_secundaria);
}

.imagemDesenvolvedora {
    height: 50px;
}

.redes {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 16px;
}

.iconesRedes {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.iconesRedes > img {
    height: 50px;
}
.img {
    display: flex;
    flex-direction: row;
}