@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --cor-um: #464646;
    --cor-dois: #EAF2FD;
    --cor-tres: #EDEDED;
    --cor-quatro: #FFFFFF;
    --cor-cinco: #2A7AE4;
    --cor-hover-um: #D4E4FA;
    --cor-hover-dois: #5595E9;

    --fonte-primaria: 'Raleway', sans-serif;
}

/*CABECALHO*/

.cabecalho {
    background-color: #F5F5F5;
}

/*MENU*/

.menu {
    background-color: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(1rem);
}

.logo__nome {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cor-um);
}

.botoes__botao {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
    transition: 0.5s;
}

.botoes__botao:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: var(--cor-um);
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.contatos {
    font-weight: 700;
}

/*APRESENTACAO*/

.apresentacao__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 3.25rem;
    color: var(--cor-um);
}

.apresentacao__paragrafo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.375rem;
    color: var(--cor-um);
}

.redes-sociais__botoes {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
    transition: 0.5s;
}

.apresentacao__imagem {
    /*background: linear-gradient(to right, #8A35C8, #18C063, #00EEA2);
    background-size: 180% 180%; 
    animation: gradient-animation 5s ease infinite;*/
    background-color: var(--cor-um);
    transition: 0.5s;
}



/*SOBRE MIM*/

.sobre-mim {
    background-color: var(--cor-dois);
}

.sobre-mim__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cor-um);
}

.sobre-mim__paragrafo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1rem;
    color: var(--cor-um);
}

/*SKILLS-HOBBIES*/

.skills__hobbies {
    background-color: var(--cor-tres);
}

/*SKILLS*/

.skills__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cor-um);
}

.skills__skil {
    background-color: var(--cor-quatro);
    transition: 0.5s;
}

.skills__span {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cor-um);
}

/*HOBBIES*/

.hobbies__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cor-um);
}

.hobbies__hobby {
    background-color: var(--cor-quatro);
    transition: 0.5s;
}

.hobbies__span {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cor-um);
}

/*FORMACAO-ACADEMICA*/

.formacoes {
    background-color: var(--cor-dois);
}

.formacoes__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 2em;
    color: var(--cor-um);
}

.formacao__imagem__container {
    background-color: var(--cor-quatro);
}

.formacao__imagem {
    background-color: var(--cor-quatro);
    filter: grayscale(100%);
    transition: all 0.5s ease-out;
}

.formacao__nome {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--cor-um);
}

.formacao__span {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
}

/*EXPERIENCIA*/

.experiencia {
    background-color: var(--cor-tres);
}

.experiencia__imagem {
    border: solid 0.1rem var(--cor-um);
    filter: grayscale(100%);
    transition: all 0.5s ease-out;
}

.experiencia__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cor-um);
}

.projeto__nome {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--cor-um);
}

.projeto__lugar {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
}

.projeto__botao1 {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1rem;
    color: var(--cor-cinco);
    border: solid 0.0625rem var(--cor-cinco);
}

.projeto__botao2 {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1rem;
    color: var(--cor-quatro);
    background-color: var(--cor-cinco);
    border: solid 0.0625rem var(--cor-cinco);
}



/*CONTATO*/

.contato {
    background-color: var(--cor-dois);
}

.contato__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cor-um);
}

.contato__paragrafo {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
}

.contato__botao {
    color: var(--cor-quatro);
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1rem;
    background-color: var(--cor-cinco);
    border: solid 0.0625rem var(--cor-cinco);
}



/*RODAPE*/

.rodape {
    background-color: var(--cor-quatro);
}

.rodape__texto {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
}

.rodape__span {
    font-family: var(--fonte-primaria);
    font-weight: 500;
    font-size: 1rem;
    color: var(--cor-um);
}

/*HOVER*/

:hover.projeto__botao1 {
    background-color: var(--cor-hover-um);
}

:hover.projeto__botao2{
    background-color: var(--cor-hover-dois);
}

:hover.contato__botao{
    background-color: var(--cor-hover-dois);
}

.botoes__botao:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}  

:hover.botoes__botao {
    transition: 0.5s;
    transform: scale(1.1)
}

:hover.redes-sociais__botoes {
    transition: 0.5s;
    transform: scale(1.1)
}

:hover.formacao__imagem {
    transition: all 0.5s ease-out;
    transform: scale(1.1);
    filter: grayscale(0%);
}

:hover.experiencia__imagem {
    transition: all 0.5s ease-out;
    transform: scale(1.1);
    filter: grayscale(0%);
}

:hover.skills__skil {
    transition: 0.5s;
    transform: scale(1.1)
}

:hover.hobbies__hobby {
    transition: 0.5s;
    transform: scale(1.1)
}

:hover.apresentacao__imagem {
    transition: 0.5s;
    transform: scale(1.1)
}

@media (max-width: 1300px) {

    .apresentacao__titulo {
        font-size: 1.375rem;
    }

    .apresentacao__paragrafo {
        font-size: 1rem;
    }

    .redes-sociais__botoes {
        font-size: 1rem;
    }

    .apresentacao__imagem {
        max-width: 9.125rem;
        max-height: 9.125rem;
    }

    .apresentacao {
        width: 18.5rem;
    }

    .apresentacao__informacoes {
        width: 18.5rem;
    }

    .sobre-mim__titulo {
        font-size: 1.375rem;
    }

    .sobre-mim__paragrafo {
        font-size: 0.875rem;
        max-width: 37.5rem;
    }
    
    .formacao__imagem {
        filter: grayscale(0%);
    }

    .experiencia__imagem {
        filter: grayscale(0%);
    }
}