@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* Declarando as Variáveis (CORES)*/

:root {
    --cor1:rgb(251, 155, 65);    /* Cor Secundária */
    --cor2:rgb(3, 42, 78);       /* Cor principal  */
    --cor3:rgb(192, 202, 166);
    --cor4:blue;
    --cor5:white;
    --cor6:rgba(0, 0, 0, 0.400); /* Preto com transparência 0.400 */

}



body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    background-color: var(--cor3);
    height: 100vh;
    width: 100vw;
        
}



header {     /* Main (AZUL) do cabeçalho */
    background-color: var(--cor2);
    color: white;
    padding: 15px;
    border-radius: 0px 0px 0px 0px;
    box-shadow: 10px 10px 15px  var(--cor6);

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;   
}




 /* Currículo Virtual*/

#cv {
    /*background-color: rgb(81, 79, 79);*/
    margin: 10px -5px 20px;
    padding: 10px;
}

header > #cv h1 > a { /* Currículo Virtual*/
    color:white;  
    text-decoration: none; 
}

header > #cv > h1 > a:hover {/* Currículo Virtual : hover */
    color:var(--cor1);
}





/* Botões do Menu de Navegação */

header > nav {
    border: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;    
}

header > nav > a {
    background-color: white;
    color:var(--cor2);    
    padding: 5px 5px 5px 5px;
    margin: 5px;
    border-radius: 5px;
    
    font-family: Verdana, Geneva, Tahoma, sans-serif, Courier, monospace;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

header > nav > a:hover {
    background-color: var(--cor1);
    color:var(--cor2);
    
    transition: background-color .3s;    
}

/* FIM  ****   Botões do Menu de Navegação *****/





main {
    background-color: rgb(22, 28, 99);
    margin: auto;
    padding: 0px;
    max-width: 85vw;
    border-radius: 12px;
}

section > div {/* DIV - Instituições onde estudei e Contato*/
    background-color: rgb(255, 255, 255);
    width: 100vw;
    height: 40px;
    text-align: center;
}

main > section.conteudo > div.curriculo > p {  /* Parágrafos com os nomes dos projetos */
            color: var(--cor2);
            margin: 5px;
            
            text-decoration: none;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-weight: bold;
            font-size: 1em;
            text-shadow: 2px 2px 3px var(--cor6);
        }

section.conteudo { /* Área das DIVs da Section Conteúdo (DIVS QUADRADAS) */
    background-color: rgb(255, 255, 255);
    padding: 10px;
    margin: 0px;
    border-radius: 0px 0px 12px 12px;
    box-shadow: 10px 10px 15px  lab(0% 0 0 / 0.400);

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}


main > section > p {    
    color: white;
    text-align: justify;
    text-indent: 20px;
}

/* Montando a Versão Mobile First */

  #h1 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: var(--cor2);
            margin: 5px 0px 20px 12px;
            padding: 5px;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.485);
        }


main > section.conteudo > div.curriculo {
    background-color: var(--cor1);    /*var(--cor1)*/
    padding: 2px;
    margin: 10px;
    width: 195px;
    height: 295px;
    border-radius: 5%;
    box-shadow:3px 3px 8px var(--cor6);

    display: flex;
    flex-flow: row wrap;
    justify-content: first center;
}


main > section.conteudo > div.curriculo > picture > a > img  {
    width: 185px;
    height: 230px;
    margin: 5px 0px 20px 3px;
    border-radius: 5%;
      
}

main > section.conteudo > div.curriculo > picture > a > img:hover {

    transform: translate3d(-5px, -5px, -5px);
    transition-duration: .4s;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.621);
    
}



/* Relatório de Personalidade */

#download {
    background-color: rgba(127, 255, 212, 0);    
    text-align: center;
    margin-top: 50px;
    padding: 5px;
    box-sizing: border-box;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

#download > ol {
    background-color: rgba(255, 255, 255, 0);
    width: 100vw;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

#download > h3 { /* Texto do h3 "RELATÓRIO DE PERSONALIDE  */
    background-color: rgba(255, 255, 255, 0);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    height: 40px;
    margin: 10px;
    padding: 10px;
    color: var(--cor2);
    text-align: right;
    border-radius: 10px;
    box-shadow: 2px 2px 10px 2px var(--cor6);
}

#download > ol > li {  /* Botões de DOWNLOAD do PDF e do ZIP */
 background-color: var(--cor1);
 width: 150px;
 height: 40px;
 margin: 10px;
 padding: 5px;
 padding-top: 10px;
 text-align: center;

 border-radius: 10px;
 box-shadow: 2px 2px 2px var(--cor6); 
 box-sizing: border-box;
 list-style-position: inside;
 list-style-type: none;
}

#download > ol > li > a {    /* Links de DOWNLOAD do PDF e do ZIP */
    color: var(--cor2);
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 1em;
    text-shadow: 2px 2px 3px var(--cor6);
}

#download > ol > li > a:hover {  /* HOVER dos Botões de DOWNLOAD do PDF e do ZIP */
    color: var(--cor3);
    transition-duration: .3s;
}

/* FIM -- Relatório de Personalidade */



section#redes-sociais { /* Alinhando as Redes Sociais no Centro*/
    position: relative;
    top: 100px;
    background-color: rgba(255, 255, 255, 0);
    width: 100vw;
    text-align: center;
    margin-top: 100px;
    padding: 0px;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
 }


section#redes-sociais img {
    width: 30px;
    margin: 10px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.580);
    box-sizing: border-box;
}
section#redes-sociais img:hover {
    border: 1px solid rgb(82, 254, 2);
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.580);
    transition: transform 0.2s, border .2s;
}






/* |||||||||||||||||       Início do FOOTER        |||||||||||||||||||||||||||||*/



footer {
    background-color:var(--cor2);
    color: rgb(255, 255, 255);
    width: 100vw;
    height: 120px;
    padding: 15px;
    margin: 100px 0px;
    text-align: center;
    font-size: 1em;       
}

footer > p {
    font-family: 'Courier New', Courier, monospace;
    margin: auto;
    font-size: .8em;
    text-align: center;
    padding-top: 25px;
}

   

footer > p > a {         /*Link que está dentro do parágrafo do footer*/                    
    color:var(--cor1);    

}

footer > p > a:hover {   /*Hover do link dentro do footer */

    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:var(--cor1);   
}