*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* border: 1px solid rgba(0, 0, 0, 0.479); */
}
@font-face {
    font-family: firacode;
    src: url(/Fonts/FiraCode-Bold.ttf);
}

/* Variáveis: */
:root{
    --blue: #135feb;
    --cinza: #b6b6b649;
    --gradiante: linear-gradient(45deg,#e40fa4,#df8dc6);

    --Navy: #0a192f;
    --Light-Navy:	#112240;
    --Lightest-Navy: #000080;
    --Slate: #8892b0;
    --Light-Slate: #a8b2d1;
    --white: #e6f1ff;
    --green: #64ffda;
}
.listlateral{
   background-color: var(--blue);
   backdrop-filter: blur(10px);
    color: black;
}
.listlateral li a:hover{
   background-color: #bf79f8;
   color: black;
 }
svg{
    fill: var(--blue);
}
.menuhamburger{
   display: none;
}
.paraEscuro{
    width: 20px;
    height: 20px;
    fill: var(--blue);
}
.paraClaro{
   display: none;
}
body{
    background-image: linear-gradient( 45deg, white,rgb(209, 209, 209));
    color: rgba(0, 0, 0, 0.911); 
}
.hidden{
   opacity: 0;
   filter: blur(6px);
   transition: all 1s;
   transform: scale(0);
   transform: translateX(-50%);
}
.show{
   opacity: 1;
   filter: blur(0);
   transition: all 1s;
   transform: translateX(0%);
   transform: scale(1);
}
.flex {
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
 header{
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 100%;
   height: 80px;
   cursor: pointer;

    position: fixed;
    transition: .2s;
    top: 0;
    left: 0;
    z-index: 999;
 }
 .headerScroll svg{
    fill: white;
 }
 .headerScroll{
   background-color: var(--blue);
   transition: .2s;
   backdrop-filter: blur(10px);
 }
 .headerScroll h1{
   color: #fff;
 }
 .headerScroll nav li a{
   color: #fff;
   font-weight: lighter;
   transition: .2s;
  
 }
 .headerScroll nav li a:hover{
   color: #000000f1;
   transition: .2s;
 }
 header h1{
    font-family: firacode;
    font-weight: 800;
    font-size: 18pt;
    color: var(--blue);
 }
 nav ul{
    list-style-type: none;
 }
 nav ul {
    display: flex;
    gap: 50px;
 }
 nav ul li a{
    text-decoration: none;
    color: var(--blue);
    font-family: Arial, Helvetica, sans-serif, Geneva, Tahoma, sans-serif;
    font-weight: 500;
    font-size: 12pt;
}
nav ul li a:hover{
   color: var(--blue);
}
 section{
    width: 100vw;
    height: 100vh;
 }

 section.inicio{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
 }
 h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20pt;
 }
 section.inicio h1 span{
    color: var(--blue);
    font-family: firacode;
    font-size: 75pt;
 }
.texto h3{
   font-size: 35pt;
}
.texto p{
   font-size: 12pt;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.initIMG{
   display: flex;
   gap: 17px;
   align-items: center;
   justify-content: center;
}
.initIMG div img{
   width: 30px;
   padding: 0;
   align-items: center;
   justify-content: center;

   margin-top: 10px;
}
 section.inicio button{
    padding: 12px 40px;
    margin-top: 16px;
    /* background-color: var(--blue); */
    background-image: var(--gradiante);
    font-weight: 600;
    transition: .2s;
    color: #fff;
    border: none;
 }

 section.inicio button:hover{
   /* background-color: transparent; */
   background-image: linear-gradient(45deg,#8a13eb00,#d3aff000);
   border: 2px solid var(--blue);
   transition: .2s;
   color: black;
  
 }

 /* Section Sobre Mim */
 section.sobremim{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }

 section.sobremim h1{
    text-align: center;
 }
 section.sobremim h1 span{
    color: var(--blue);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35pt;
 }
 .itensSobremim{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--cinza);
    padding: 49px;
    border-radius: 10px;
    transition: .2s;
    }
    .itensSobremim:hover{
      background-color: #97edaa00;
      transition: .2s;
      border: 1px solid var(--blue);
    }
.eu{
    margin-top: 40px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
 }
 .iconsSobremim{
    margin-top: 80px;
    display: flex;
    gap: 60px;
 }
 .textosobremim{
   line-height: 22px;
   font-weight: lighter;
   font-family: Arial, Helvetica, sans-serif;
 }
 .itenTexto p{
    margin-top: -10px;
    font-family: firacode;
 }
 h4{
    text-align: center;
    font-family: firacode;
 }


 /* Projectos */
 section.contaonerProjectos{
   margin: 0 auto;
 }
 section.contaonerProjectos h1{
    color: var(--blue);
    font-family: firacode;
    font-size: 35pt;
    text-align: center;
    margin-bottom: 30px;
 }
 section.projectos{
    display: grid;
    grid-template-columns: repeat(2, 500px);
    grid-auto-rows: 290px;
    gap: 50px;
    justify-content: center;
 }

 .projetosCards{
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
 }
 .cardimagem{
    width:100%;
    height: 210px;
    background-color: var(--cinza);
    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #ffffff21;
    border-radius: 5px;
 }
 .cardimagem span{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15pt;
    color: var(--blue);
 }
 .cardtexto{
    display: flex;
    flex-direction: column;
    gap: 10px;
 }
 .cardtexto h3{
    margin-top: 10px;
 }
 .cardbotao{
    display: flex;
    gap: 14px;
   
 }
 .cardbotao button{
    padding: 6px 35px;
    font-family: firacode;
    font-weight: 400;
    cursor: pointer;
 }
 .btnCor{
    /* background-color: var(--blue); */
    background-image: var(--gradiante);
    border: none;
 }
 .btnBorda{
    background-color: #97edaa00;
    border: 1px solid var(--blue);
    color: var(--blue);
 }

 /* Serviços */
 section.Serviços{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   font-family: firacode;
 }
 section.Serviços h1{
   color: var(--blue);
   font-family: firacode;
   font-size: 35pt;
   text-align: center;
   margin-bottom: 30px;
 }
 .containerServicos{
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   gap: 20px;

 }
 .cardServicos{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   cursor: pointer;
   scale: 1;

   width: 400px;
   height: 300px;
   border: 1px solid var(--blue);
   border-radius: 8px;
   background-color: #ffffff10;
   transition: .2s;
 }
 .cardServicos:hover{
   transform: scale(1.1);
   background-color: var(--blue);
   position: relative;
   
   transition: .2s;
   color: #000000f1;
 }
 .cardServicos:hover svg{
   fill: #000000f1;
 }

 .cardServicoTexto h2{
   text-align: center;
 }

 /* Habilidades */
 section.habilidades{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   font-family: firacode;
 }
 section.habilidades h1{
   color: var(--blue);
   font-family: firacode;
   font-size: 35pt;
   text-align: center;
   margin-bottom: 30px;
 }
 
 .containerHabilidades{
   display: grid;
   grid-template-columns: repeat(2, 400px);
   justify-content: center;
   gap: 20px;
   padding: 20px;
   background-color: #ffffff07;
 }
 .cardHabilidades{
   display: flex; 
   justify-content: center;
   align-items: center;
   flex-direction: column;
  

   width: 400px;
   height: 200px;
   border: 1px solid var(--blue);
   border-radius: 8px;
   background-color: #ffffff10;
 }
 .cardHabilidades svg{
    fill: var(--blue);
 }

 /* Contacto */