@import url('https://fonts.googleapis.com/css2?family= Inter:wght@100;200;300 & display=swap') ;


@font-face 

{
    font-family: 'mao';
    src: url('../fontes/brittany_signature/BrittanySignature.ttf') format('truetype');
}
:root{
    --color-fundo: #203645;
    --color-text-titulo:#0CC0DF;
    --color-text-normal:#ffff;
    --color-botao:#000000;
    --cor-principal:#061826;
}
html
{
scroll-behavior: smooth;
}

*
{

    font-family: 'Inter' , sans-serif;
    margin: 0;
    padding: 0;

}
body
{
    overflow-x: hidden;
}
header

{
    background-color: var(--color-fundo);
    box-sizing: 0px 3px 10px ;

}

.nav-bar

{

    display: flex;
    justify-content: space-between;
}

.logo

{
    display: flex;
    justify-content: center;
    padding: 10PX 10px 10px 10PX

}

.logo h1

{
    font-family: 'mao';
    font-size: 2em;
    padding: 10PX 20px 10px 40PX;
    color: var(--color-text-titulo);
}

.nav-lista

{

    display: flex;
    align-items: center;
}

.nav-lista ul

{
    display: flex;

    list-style: none;
}
.nav-item {
    margin: 0 15px;

}
.nav-link

{
    text-decoration: none;
    font-size: 1.15rem;
    color: var(--color-text-normal);

    font-family: 'Inter', sans-serif;
    padding: 2em;
}

.nav-link:hover

{
   color:  var(--color-text-titulo);
}

picture img
{
    width: 100%;
}
.texto-1

{
    text-align: center;
    padding-bottom: 23em; bottom: 20px;
    position: absolute;
    top: 260px;
    width: 40%;
    left: 800px;
    line-height: 1.3;
}
.Titulo-sessao

{
    padding: 50px;
    text-align: center;
    color: var(--color-text-titulo);
    font-size: 3em;
}

.texto-capa
{
    color: var(--color-text-titulo);
    font-size: 50px;
}
.assinatura
{
    font-family: 'mao';
    color: var(--color-text-titulo);
    font-size: 2em;
    position: relative;
    left:  170vh;
    padding: 10px;
}


#nome

{
   color: var(--color-text-normal);
   font-size: 3em;

}

section

{
    min-height: 50vh;
}

#btn-mais

{
    background-color :var(--color-botao);
    color: var(--color-text-normal);
    padding: 8px 50px ;
    text-decoration: none;
    border-radius: 10px;
    height: 35px;
    width: 120px;
    margin: 30px;
    cursor: pointer;


}

#btn-mais:hover

{
  background-color: var(--color-text-titulo);
  color: var(--color-botao);

}
.texto-1 h2 {
    padding: 20px;
}


#linguagem

{
padding: 20px;
color:var(--color-text-normal);
text-align: center;
}

main

{
    background-color: var(--cor-principal);
    padding-bottom: 70px;
    width: 100%;
}


.conterner
{
   padding-top: 30px;
   background-color: #203645;
   height: 30em;
   width: 100%;
 }


@keyframes animacao
{
 from{opacity: 0%;}
 to {opacity: 100%;}
}
#sobre-mim p

{

padding-top: 20px;  
text-align: center;
font-size: 20px;
color: #ffff;
line-height: 2.0;
animation-name: animacao;
animation-duration: 20s;
animation-delay: 35s;
animation-iteration-count: infinite;

}


#texto-destaque

{
    color: var(--color-text-titulo);
    font-weight: bolder;
    font-size: 28px;
}

#sobre-mim h3

{
    font-family: 'Inter';
    font-size: 60px;
    padding-left: 8.5em;

    text-align:left;
    color: #ffff;

}

#sobre-mim img

{
    position: absolute;
    height: 350px;
    width: 350px;
    padding-top: 4em;
    padding-left: 5em;
    animation: fotoanimada 2s ease-in-out infinite ;
}

@keyframes fotoanimada
{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-30PX)
    }
    100%{
        transform: translateY(0);
    }
}

#sobre-mim h4
{
    font-family: 'mao';
    color: var(--color-text-titulo);
    font-size: 2em;
    position: absolute;
    left:  170vh;
    padding: 10px;
}

#btn-cv
 {
    padding: 10px;
    position: absolute;
    left: 39em;
    margin-top: 400px;
    height: 20px;
    border-radius: 10px;
    color: var(--color-text-normal);
    background-color: var(--color-text-titulo);
    text-decoration: none;
 }

 #btn-cv:hover
 {
   background-color: var(--color-botao);
   color: var(--color-text-normal)
 }

 #projeto img

{
     height: 200px;
     width: 200px;
}
#projeto .conterner{
    height:auto;
}
.card-jogo

{
    background-color:var(--color-text-titulo);
    font-size: 13px;
    height: 370px;
    width: 300px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;


}
.card-jogo:hover
{
    background-color: orangered;
    color: var(--color-text-titulo);
    width: 320px;
    font-size: 18px;
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s; 
}

.card-jogo P
 {
    font-family: 'Inter';

    padding: 20px;
 }

.card-portifolio1

{
    background-color:var(--color-text-titulo);
    height: 370px;
    font-size: 13px;
    width: 300px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;


}
.card-portifolio1:hover
{
    background-color: rgb(63, 63, 70);
    color: var(--color-text-titulo);
    font-size: 18px;
    width: 320px;
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;


}
.card-portifolio1 p 
{
  padding: 20px;
  font-family: 'Inter';
  font-weight: 300;

}


.card-cronometro

{
    background-color:var(--color-text-titulo);
    height: 370px;
    font-size: 13px;
    width: 300px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;


}
.card-cronometro:hover
{
    background-color: rgb(63, 22, 29);
    color: var(--color-text-titulo);
    font-size: 18px;
    width: 320px;
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;


} 
.card-cronometro p 
{
  padding: 20px;
  font-family: 'Inter';
  font-weight: 300;

} #falar .conterner{
    height: auto;
}
.card-cep

{
    background-color:var(    --color-text-titulo);
    height: 370px;
    font-size: 13px;
    width: 300px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;


}
.card-cep:hover
{
    background-color: rgb(63, 63, 70);
    color: var(    --color-text-titulo);
    font-size: 18px;
    width: 320px;
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;


}
.card-cep p 
{
  padding: 20px;
  font-family: 'Inter';
  font-weight: 300;

}


.card-senha

{
    background-color:var(    --color-text-titulo);
    height: 370px;
    font-size: 13px;
    width: 300px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;


}
.card-senha:hover
{
    background-color: rgb(63, 63, 70);
    color: var(--color-text-titulo);
    font-size: 18px;
    width: 320px;
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;


}
.card-senha p 
{
  padding: 20px;
  font-family: 'Inter';
  font-weight: 300;

}

.card-facilit

{
    background-color:var(--color-text-titulo);
    height: 370px;
    font-size: 13px;
    width: 300px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;


}
.card-facilit:hover
{
    background-color: rgb(63, 63, 70);
    color: var(--color-text-titulo);
    font-size: 18px;
    width: 320px;
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;


}
.card-facilit p 
{
  padding: 20px;
  font-family: 'Inter';
  font-weight: 300;

}



.cards-projeto 
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 50px;
    justify-content: center;
    padding: 20px;
    margin: 0 auto;
    width: 90%;
}

.link-usuario
 {
     text-decoration: none;
     color: white;
     background-color: #061826; 
     height: 50px 50px;
     width: 50px;
     padding: 8px 50px ;
     border-radius: 15px;
  }


  .link-falar
  {
    display: flex;
    text-decoration: none;
    color: white;
    background-color: #061826; 
    height: 50px 50px;
    width: 50px;
    padding: 8px 50px ;
    border-radius: 15px;
  }
  #certificado img
 {
    height: 200px;
    width: 200px;
 }

 #card-git
 {
    background-color:var(--color-text-titulo);
    height: 360px;
    width: 250px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;
    display: flex; 
}

 #card-git:hover
 {
    width: 280px;
    background-color: rgb(33, 156, 115);
     transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;

 }
 #card-equipes
 {
    background-color:var(    --color-text-titulo);
    height: 360px;
    width: 250px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;

 }

 #card-equipes:hover
 {
    width: 280px;
    background-color: rgb(44, 109, 73);
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;

 }

 #card-linux
 {
    background-color:var(    --color-text-titulo);
    height: 360px;
    width: 250px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;

 }

    #card-linux:hover
    {
     width: 280px;
    background-color: rgb(3, 49, 49);
    transition-property: all;
    transition-duration: 1.4s ;
    transition-delay: 0.1s;
    }

    #card-pensamento
    {
        background-color:var(    --color-text-titulo);
        height: 360px;
        width: 250px;
        padding: 20px 35px;
        border-radius: 30px;
        text-align: center;
    }

    #card-pensamento:hover
    {
      width: 280px;
     background-color: rgb(59, 6, 6);
     transition-property: all;
     transition-duration: 1.4s ;
     transition-delay: 0.1s;
    }

 .cards-certificado
 {
    display: flex;

    justify-content: space-around;

 }
 .cards-contato
 {
    display: flex;

    justify-content: space-around;

 }

 .Titulo-certificado
 {
    color: #ffff;
    font-size: 24px;
    padding-bottom: 10px;
 }


 .btns-certificado
 {

 background-color: #203645;
 color: #ffff;
 padding: 10px;
 border-radius: 15px;
 border: none;

 }
.cards-habilidades{
   display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 50px;
  justify-content: center;
  padding: 20px;
  margin: 0 auto;
  width: 90%
}
 #card-sql,#card-html,
 #card-css, #card-js
 ,#card-nodejs,#card-csharp
 ,#card-react, #card-native,
  #card-api, #card-bootstrap,
  #card-nextjs,#card-gith

 {   

    background-color:var(--color-text-titulo);
    height: 100px;
    width: 250px;
    padding: 20px 35px;
    border-radius: 30px;
    text-align: center;

 } 
 #habilidade p
 {


    color:  var(--color-text-normal);
    padding-top: 15px;
    text-align: center;
}


 #habilidade .conterner
 {
    height: auto
 }

 #habilidade i{
    font-size: 2.5rem;
  }

  #falar i
  {
    font-size: 2.5rem;
  }
  #falar p
  {
    color:  var(--color-text-titulo);
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}
 .btns-certificado:hover
 {
    background-color: #c4cbcf;
    color: #000000;
 }

  .redes
  {
    display: flex;
    justify-content: center; 
    gap: 20px; 
  }
.redes .contato i
{
    font-size: 1.5rem;

}
.redes .contato
{


    justify-content: center;
    display: flex;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #2b6666;
    border-radius: 50%;
    border:#144e7a solid;
    text-decoration: none;
    background-color: #0f3238;



}
.falar{

    background-color:#262536;
    height: 100px;
    width: 250px;
    padding: 20px 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.redes .contato:hover

{ 
    color: #ffff;
    background-color: var(    --color-text-titulo);
}
#topo
 {

     padding-top: 20px;
     left: 30px;

     position:absolute
 }

 #btn-topo
 {
    height: 48px;
    width: 116px;
    cursor: pointer;
    border-radius: 20px;
    background-color: var(    --color-text-titulo);
    color: #ffffffc9;
    transition: all;
    transition-duration: 0.9;
 }

footer{
    width: 100%;
    color:var(    --color-text-titulo);

 }
 #footer-contener
 {

    background-color: #203645;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 3rem 3.5rem;
 }

 #footer-contatos h1
 {
    margin-bottom: 0.75rem;
    font-family: 'mao' sans-serif;
 }

 #footer-redes
 {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
 }

 #footer-redes .footer-link{
    justify-content: center;
    display: flex;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #060707;
    border-radius: 50%;
    border:#07243a solid;
    text-decoration: none;
    background-color: #0f3238;

 }
  #footer-redes .footer-link:hover{
    background-color: var(    --color-text-titulo);
 }
 #footer-redes .footer-link i{
    font-size: 1.5rem;
 }

 .footer-lista
 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none; 
 }

 .footer-lista .footer-link
 {
    color: #c4cbcf;
    text-decoration: none; 
 }

 .footer-link:hover
 {
    transition: all;
    transition-duration: 1.5s;
    color: var(    --color-text-titulo)
 }
 #footer-copy
 {

    padding-bottom: 5px;
    color: #ffffffc9;
    font-size: 12px;
    background-color:#203645;
    align-items: center;
    text-align: center;
 }
 .icone-menu-mobile
 {
    display: none;
 }
 .mobile-menu
 {
    display: none;
 }

 @media screen and (max-width:730px ) 
 {
    .nav-bar
    {
        padding: 1.5rem 4rem;
    }
    .nav-item
    {
        display: none;
    }
    .icone-menu-mobile
    {
        display: block;
    }
    .icone-menu-mobile button
    {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
.mobile-menu ul
{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 1rem;
}
.mobile-menu .nav-item{
    display: block;
    padding-top: 1.2rem;

}
.abrir
{

    display: block;
}

.texto-1{
    display: none;
}

 }
 @media only screen and (max-width: 426px) {

    body{
        overflow-x: hidden;
    }

    .nav-bar {
        padding: 0.5rem;
    }

    .nav-item {
        display: none;
    }

    .icone-menu-mobile
    {
        display: block;
    }
    .icone-menu-mobile button
    {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
.mobile-menu ul
{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 1rem;
}
.mobile-menu .nav-item{
    display: block;
    padding-top: 1.2rem;

}
.abrir
{

    display: block;
}

    .conterner 
    {
        height: auto;
        padding-top: 15px;

    }
    .texto-1{
        display: nome;
    }
    .Titulo-certificado{
        padding-top: 50%;
    }
    #sobre-mim img {
        position: static;
        height: auto;
        width: 90%;
        margin: 0 auto;
        padding-top: 2em;
        padding-left: 0;
    }



    #sobre-mim h3 
    {
        font-size: 24px;
        padding-left: 0;
    }

    #sobre-mim h4 
    {
        position: static;
        padding: 10px;
        text-align: center;
        left: auto;
    }
    #sobre-mim h3
    {
        padding: 30px;
     font-size: 40px;
    }
  #texto-sobre{
    padding: 40px;
  }  


    #sobre-mim .assinatura 
    {
    left: 55%;
    padding-top: 66px;
    }

    #projeto .assinatura
    {
        display: none;
    }

    #habilidade .assinatura
    {
        display: none;
    }
    #certificado .assinatura{
        display: none;
    }
    #falar .assinatura {display: none;}
    #btn-cv 
    {
        position: relative;
        left: 63%; 
    }

    #btn-cv:hover
    {
     background-color: #000000;
    }

    .cards-projeto 
    {
        flex-direction: column;
        align-items: center;
    }
    .cards-contato{
        flex-direction: column;
        align-items: center;
    }
    .falar
    {

        width: 80%;
        margin-bottom: 30px;

    }

    #projeto .conterner{
        height: auto;
    }
    #habilidade .conterner{
        height: auto;
    }


    .card-jogo,
    .card-portifolio1,
    .card-cronometro,
    .card-cep,
    .card-facilit,
    .card-senha{

        width: 90%;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
        height: 100%;
    }


    .card-jogo:hover,
    .card-portifolio1:hover,
    .card-cronometro:hover,
    .card-cep:hover,
    .card-senha:hover, 
    .card-facilit 
    {
        height: 450px;

    }


    .card-jogo p,
    .card-portifolio1 p,
    .card-cronometro p,
    .card-cep, 
    .card-facilit {
        padding: 20px;
    }



    #card-git,
    #card-equipes,
    #card-linux,
    #card-pensamento 
    {

        width: 80%;
        margin-bottom: 30px;

    }
    .redes{
        display: none;
    }

    #card-git h2,
    #card-equipes h2 ,
    #card-linux h2,
    #card-pensamento h2
    {
        padding: 20px;

    } 
    .cards-certificado 
    {
        flex-direction: column;
        align-items: center;
    }

    #topo 
    {
        left: 5px;

    }

    #footer-contener {
        grid-template-columns: repeat(1, 1fr);
        padding: 3rem 1rem;
    }
}