/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

@font-face {
 font-family: 'Poppins';
 src: url('../fonts/Poppins-Regular.ttf');
}

@font-face {
 font-family: 'KronaOne';
 src: url('../fonts/KronaOne-Regular.ttf');
}





:root{
 --cor-principal:  #1B41C2;
 --cor-de-titulo: #eee;
 --cor-de-texto: #E7E7E7;
 --medida: calc((100vw + 100vh) / 100);
 --texto-pequeno: clamp(.75rem, var(--medida) , 0.95rem);
 --texto-normal: clamp( .85rem, calc(var(--medida) * 1.2), 1rem);
 --texto-medio: clamp( 1.3rem, calc(var(--medida) * 2.2), 1.8rem);
 --texto-grande: clamp( 2rem, calc(var(--medida) * 3) , 2.5rem);
 --margem: 30px;
 scroll-behavior: smooth;}


::selection{
 color: var(--cor-de-texto);
 background-color: var(--cor-principal);}


*:after,
*:before{
 -webkit-box-sizing: border-box;
 box-sizing: border-box;}



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




*.ripple{
 position: relative!important;
 overflow: hidden!important;}


*.ripple .bolha{
 position: absolute!important;
 display: block!important;
 background: #ffffff45!important;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-border-radius: var(--diametro);
 border-radius: var(--diametro);
 animation: bolha 300ms linear}



.titulo-sublinhado{
 margin: 100px auto;
 width: max-content;
 font-size: var(--texto-medio);
 text-align: center;
 border-bottom: 5px solid var(--cor-principal);
 font-family: 'KronaOne', sans-serif;
 font-weight: 100;
 text-transform: uppercase
}


@-webkit-keyframes bolha {
 from {
  width: 0;
  height: 0;
  opacity: 1;
 }

 to {
  width: var(--diametro);
  height: var(--diametro);
  opacity: 0.3;
 }
}

@-o-keyframes bolha {
 from {
  width: 0;
  height: 0;
  opacity: 1;
 }

 to {
  width: var(--diametro);
  height: var(--diametro);
  opacity: 0.3;
 }
}

@-moz-keyframes bolha {
 from {
  width: 0;
  height: 0;
  opacity: 1;
 }

 to {
  width: var(--diametro);
  height: var(--diametro);
  opacity: 0.3;
 }
}

@keyframes bolha {
 from {
  width: 0;
  height: 0;
  opacity: 1;
 }

 to {
  width: var(--diametro);
  height: var(--diametro);
  opacity: 0.3;
 }
}


@-webkit-keyframes subir-revelar{
 from{
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
 }

 to{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
   
 }
}


@-o-keyframes subir-revelar{
 from{
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
 }

 to{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);}
}

@-moz-keyframes subir-revelar{
 from{
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
 }

 to{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);}
}

@keyframes subir-revelar{
 from{
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
 }

 to{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);}

}

@-webkit-keyframes revelar {
 from {
  opacity: 0;
  
 }

 to {
  opacity: 1;
  
 }
}

@-o-keyframes revelar {
 from {
  opacity: 0;
  
 }

 to {
  opacity: 1;
  
 }
}
@-moz-keyframes revelar {
 from {
  opacity: 0;
  
 }

 to {
  opacity: 1;
 }
}

@keyframes revelar {
 from {
  opacity: 0;
  
 }

 to {
  opacity: 1;
  
 }

}

html{
 background: #000;}


body{
  margin: 0;
  background-color: #0E0E0E;
  background-image: url('../img/Matrix.webp');
  -webkit-background-size: 720px 1280px;
  background-size: 720px 1280px;
  font-family: 'Poppins', sans-serif;
  color: var(--cor-de-texto);
 -webkit-animation: revelar 1s linear;
 animation: revelar 1s linear;}


.pagina{
  padding: 30px var(--margem);}



.barra-de-navegacao{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  padding: 0 var(--margem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--cor-de-texto);
  border-bottom: 1px solid #333;
  z-index: 1000;
  background: #0F0F0Fa5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'KronaOne', sans-serif;
}


.barra-de-navegacao .titulo{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 15px;
 font-size: var(--texto-normal);
 width: max-content;
 text-transform: uppercase;}


.barra-de-navegacao .navegacao{
  position: absolute;
  left: 100%;
  top: 100%;
  margin: 0;
  width: 100%;
  height: 100vh;
  -webkit-transition: 250ms ease;
  transition: 250ms ease;
  z-index: 100;
  -webkit-user-select: none;
  user-select: none;
  background: #000000DB;
}


.barra-de-navegacao .navegacao.abrir{
 left: 0;}


.navegacao menu{
 display: flex;
 flex-direction: column;
 gap: 10px 0;
 margin-left: 60px;
 padding: 30px;
 width: calc(100% - 60px);
 height: 100%;
 list-style: none;
 font-size: var(--texto-normal);
 -webkit-box-shadow:  -5px 0 10px #22222245;
 box-shadow:  -5px 0 10px #22222245;
 border-left: 1px solid #023CFF45;
 overflow: hidden;
 background: -webkit-linear-gradient(#000000, red, #000000);
 background: -moz-linear-gradient(#000000, red, #000000);
 background: -o-linear-gradient(#000000, red, #000000);
 background: linear-gradient(#000000, red, #000000);
}


.navegacao menu h3{
  margin-bottom: 30px;
  text-transform: uppercase;
  font-size: var(--texto-medio);}


.navegacao menu li{
 display: flex;
 align-items: center;
 width: max-content;
 width: 100%;
 height: 40px;
 opacity: 0;
 -webkit-transform: translateY(40px);
 transform: translateY(40px);
 -webkit-transition: .2s linear;
 transition: .2s linear;
 display: inline-flex;
}



.navegacao.abrir menu li
{
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
 -webkit-transition-delay: var(--d);
 transition-delay: var(--d);
  
}


.navegacao a{
 display: inline-flex;
 align-items: center;
 gap: 0 5px;
 height: 100%;
 text-decoration: none;
 font-weight: bold;
 color: var(--cor-de-texto);
 -webkit-tap-highlight-color: transparent;
 border-bottom: 3px solid transparent;
 -webkit-transition: 150ms ease;
 transition: 150ms ease;
 text-transform: uppercase;
 pointer-events: none;
 cursor: pointer;
}

.navegacao a.bx{
  font-family: 'Poppins'!important;
  text-transform: uppercase
}


.navegacao a:before{
  font-weight: normal;
  font-family: 'boxicons'!important;
}


.navegacao menu li.ativar a{
 border-bottom-color: var(--cor-principal);
  
}



.navegacao.abrir menu li:hover a{
  background: #ffffff25;
  padding: 0 10px;
  -webkit-border-radius: 2rem;
  border-radius: 2rem;
  margin-left: -10px;}



.barra-de-navegacao .hamburguer{
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px 0;
 width: 20px;
 height: 20px}


.barra-de-navegacao .hamburguer.fechar{
 gap: 0}


.barra-de-navegacao .hamburguer::before,
.barra-de-navegacao .hamburguer::after{
 content: '';
 display: inline-block;
 width: 100%;
 height: 3px;
 background: #fff;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -webkit-transition: 250ms ease;
 transition: 250ms ease;}


.barra-de-navegacao .hamburguer.fechar::before{
 -webkit-transform: rotate(45deg) translate(1px);
 transform: rotate(45deg) translate(1px);}


.barra-de-navegacao .hamburguer.fechar::after {
 -webkit-transform: rotate(-45deg) translate(2px, -2px);
 transform: rotate(-45deg) translate(2px, -2px);}


.inicio{
 margin-top: 60px;}


.inicio .grid{
 display: grid;
 place-items: center;
 gap: 50px;
 grid-template-columns: 1fr 1fr 1fr 2fr;
 grid-template-areas: "apresentacao apresentacao apresentacao apresentacao""sociais blob blob blob"}


.inicio .apresentacao{
 grid-area: apresentacao;
 width: 100%;
}


.inicio .apresentacao .titulo{
 display: flex;
 flex-direction: column;
 width: 100%;
 font-size: var(--texto-grande);
 -webkit-animation: subir-revelar .4s ease-in-out;
 animation: subir-revelar .4s ease-in-out;
 font-family: 'Poppins', sans-serif;
 word-spacing: 2px;
 line-height: calc( var(--texto-grande) * 1.35);
 font-weight: bold;
}


.inicio .apresentacao .texto-destaque{
 color: #6185FF;}



.inicio .apresentacao button,
.projetos .card a.btn
{
 margin-top: 30px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0 5px;
 padding: 15px 20px;
 width: max-content;
 height: max-content;
 border: none;
 font-size: var(--texto-pequeno);
 -webkit-user-select: none;
 user-select: none;
 color: var(--cor-de-texto); 
 text-transform: uppercase;
 -webkit-border-radius: 1.5rem;
 border-radius: 1.5rem;
 -webkit-box-shadow: 0 2px 15px #2D3EFF;
 box-shadow: 0 10px 15px #00000045;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 text-decoration: none;
 background: -webkit-linear-gradient(bottom left, #000000, #1B41C2, #000000);
 background: -moz-linear-gradient(bottom left, #000000, #1B41C2, #000000);
 background: -o-linear-gradient(bottom left, #000000, #1B41C2, #000000);
 background: linear-gradient(to top right, #000000, #1B41C2, #000000);
  border: 1px solid #023CFF;}


.inicio .apresentacao button:active,
.projetos .card a.btn:active{
  -webkit-filter: grayscale(30%);
 filter: grayscale(30%);
 -webkit-transform: scale(.95);
 transform: scale(.95);}


.inicio .apresentacao button *,
.projetos .card a.btn *{
 pointer-events: none;}


.inicio .blob{
 display: flex;
 align-items: flex-end;
 justify-content: center;
 width: 100%;
 height: 100%;
 top: calc(100% + 30px);
 grid-area: blob;}


.inicio .blob svg{
 max-width: 350px;}


.inicio .blob image{
  width: 85%;}


.inicio .redes-sociais{
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-direction: column;
 grid-area: sociais;
 width: 100%;
 height: max-content;
 gap: 10px}


.redes-sociais a{
 width: calc(var(--texto-normal) * 2.5);
 height: calc(var(--texto-normal) * 2.5);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-style: normal;
 font-size: calc(var(--texto-normal) * 1.7);
 text-decoration: none;
 background: #333;
 color: var(--cor-de-texto);
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-tap-highlight-color: transparent;}



.sobre .biografia{
 padding-top: 70px;
 display: grid;
 place-items: center;
 grid-template-columns: 1fr;
 align-items: flex-start;
 gap: 20px;
}


.biografia .imagem{
 height: clamp(180px, 180px + 20vw, 250px);
 width: clamp(180px, 180px + 20vw, 250px);
 overflow: hidden;
 display: inline-flex;
 align-items: flex-end;
 justify-content: center;
 -webkit-border-radius: .7rem;
 border-radius: .7rem;
 -webkit-border-radius: 200px;
 border-radius: 200px;
 overflow: hidden;
 -webkit-transition: .3s ease-in;
 transition: .3s ease-in;
 background: -webkit-linear-gradient(bottom left, #000000, #1B41C2, #000000);
 background: -moz-linear-gradient(bottom left, #000000, #1B41C2, #000000);
 background: -o-linear-gradient(bottom left, #000000, #1B41C2, #000000);
 background: linear-gradient(to top right, #000000, #1B41C2, #000000);
 border: 1px solid #023CFF;}


.biografia .imagem img{
 height: clamp(190px, 190px + 20vw, 250px);
 width: clamp(190px, 190px + 20vw, 250px);
 -webkit-transform: translateY(20px);
 transform: translateY(20px);
 object-fit: cover;
 object-position: 10px 0}


.biografia .imagem:hover{
 -webkit-border-radius: 1rem;
 border-radius: 1rem;}


.biografia .titulo{
 font-size: calc(var(--texto-medio) * 0.8);
 text-align: center;
 margin-bottom: 20px;
  font-family: 'KronaOne', sans-serif;
  text-transform: uppercase
}


.biografia p{
 font-size: calc(var(--texto-normal) * 1.2);
 text-align: justify;
 text-justify: inter-word;
 text-indent: 1rem;}


.conhecimentos p,
.projetos p.paragrafo{
 font-size: calc(var(--texto-normal) * 1.2);
 margin-bottom: 100px;
 text-align: center;}


.conhecimentos .grid{
 display: grid;
 place-items: center;
 gap: 60px 20px;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}


.conhecimentos .barra-de-progresso{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 20px;
 padding: 30px 20px;
 width: 100%;
 max-width: 400px;
 height: calc(100% + 30px);
 -webkit-border-radius: .7rem;
 border-radius: .7rem;
 position: relative;
 background: -webkit-linear-gradient(#000000, red, #000000);
 background: -moz-linear-gradient(#000000, red, #000000);
 background: -o-linear-gradient(#000000, red, #000000);
 background: linear-gradient(#000000, red, #000000);
 -webkit-box-shadow: 0 10px 50px #023CFF25;
 box-shadow: 0 10px 50px #023CFF25;
 border: 1px solid #023CFF;}


.barra-de-progresso .nome{
 font-size: calc(var(--texto-medio) * 0.8);
 display: inline-flex;
 align-items: center;
 justify-content: center;
  font-family: 'KronaOne', sans-serif;
  text-transform: uppercase
}


.barra-de-progresso i{
 font-size: var(--texto-grande);
 margin-right: 10px;
}


.barra-de-progresso-circular{
 display: flex;
 align-items: center;
 justify-content: center;
 width: max-content;
 position: relative;;}



.barra-de-progresso-circular svg circle{
 stroke-dasharray: 312;}


.barra-de-progresso-circular svg circle:nth-child(2){
  stroke-dashoffset: calc( 312 - (312 * var(--porcentagem)) / 100);}



.barra-de-progresso-circular span{
 position: absolute;
 font-size: var(--texto-medio);
  font-family: 'KronaOne', sans-serif!important;
}

.barra-de-progresso-circular span sup{
  font-size: var(--texto-pequeno);
}

/* ====== PROJETOS =====*/


.projetos .grid{
 display: grid;
 grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr));
 place-items: center;
 gap: 40px 20px}



.projetos .grid .card{
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 width: 100%;
 max-width: 400px;
 height: 100%;
 padding: 20px;
 background: -webkit-linear-gradient(#000000, red, #000000);
 background: -moz-linear-gradient(#000000, red, #000000);
 background: -o-linear-gradient(#000000, red, #000000);
 background: linear-gradient(#000000, red, #000000);
 -webkit-border-radius: 20px;
 border-radius: 20px;
 overflow: hidden;
 gap:15px;
 -webkit-box-shadow: 0 10px 50px #023CFF65;
 box-shadow: 0 10px 50px #023CFF65;
 border: 1px solid #023CFF;
}


.projetos .grid .card:hover{
  transform: rotate(45deg);}


.projetos .grid .card.novo::after{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  content: 'NOVO';
  font-size: var(--texto-pequeno);
  right: 5px;
  top: 5px;
  background: var(--cor-principal);
  color: var(--cor-de-texto);
  -webkit-border-radius: .3rem;
  border-radius: 2rem;}


.projetos .card img{
 width: 80px;
 height: 80px;
 -webkit-border-radius: 1rem;
 border-radius: 1rem;
 object-fit: cover;
 -webkit-filter: drop-shadow(0 0 10px #00000045);
 filter: drop-shadow(0 0 10px #00000045);}


.projetos .card h3{
 font-size: calc(var(--texto-medio) * 0.8);
 text-align: center;
 text-transform: uppercase;
 font-family: 'KronaOne', sans-serif;
}


.projetos .card p{
 font-size: calc( var(--texto-normal) * 1.2);
 text-align: center;}



.projetos .card .acoes{
 display: flex;
 align-items: center;
 justify-content: center; 
 place-items: center;
 width: 100%;
 gap: 0 10px;}


.projetos .card a.btn{
 width: 100%;
 -webkit-border-radius: 3rem;
 border-radius: 3rem;}


.projetos .card a.btn.secundario{
 background-image: linear-gradient(45deg, #000, #333, #000);
 -webkit-box-shadow: none;
 box-shadow: none;
 border-color: #555;}


.projetos .card a.btn i{
  font-size: var(--texto-normal);}


footer{
 border-top-left-radius: 1.5rem;
 border-top-right-radius: 1.5rem;
 padding: 30px;
 padding-bottom: 60px;
 margin-top: 200px;
 width: 100%;
 background: -webkit-linear-gradient(#000000, red, #000000);
 background: -moz-linear-gradient(#000000, red, #000000);
 background: -o-linear-gradient(#000000, red, #000000);
 background: linear-gradient(#000000, red, #000000);
 overflow: hidden;
 height: 500px;
 border: 1px solid  #1B41C2;
}


footer section{
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 flex-direction: column;
 height: 100%;
 gap: 30px;}

footer .titulo{
 font-size: var(--texto-grande);}


footer .redes-sociais{
 gap: 15px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
  
}


footer .redes-sociais a
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
 width: calc(var(--texto-grande) * 1.45);
 height: calc(var(--texto-grande) * 1.45);
 font-size: var(--texto-grande);
 gap: 10px;
 overflow: hidden;
 color: var(--cor-de-texto);
 transition: .15s linear;
 flex-direction: column;
 border-radius: 1.2rem;
 -webkit-box-shadow: 0 2px 15px #2D3EFF;
 box-shadow: 0 10px 15px #00000045;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 text-decoration: none;
 background: #e7e8ee44;
 }


footer .redes-sociais a.link.instagram:hover{
  --cor-de-fundo: #CD0864
}

footer .redes-sociais a.link.facebook:hover{
  --cor-de-fundo: #235DFA}

footer .redes-sociais a.link.whatsapp:hover{
  --cor-de-fundo: #2B9305}

footer .redes-sociais a.link.telegram:hover{
  --cor-de-fundo: #1A9FD5}



footer .redes-sociais a:hover{
 padding: 10px;
 color: #eee;
 gap: 0 5px;
 width: max-content;
 height: max-content;
 background: var(--cor-de-fundo);
}


footer .redes-sociais a span{
  font-size: var(--texto-pequeno);
  display: none;
}


footer .redes-sociais a:hover span{
  display: inline-block;
  
}


a.email{
 color: var(--cor-de-texto);
 font-size: var(--texto-normal);
 text-decoration: none;
 -webkit-tap-highlight-color: transparent;
 border-bottom: 2px solid transparent;
 padding: 5px 10px;
 -webkit-border-radius: .2rem;
 border-radius: .2rem;}


a.email:active{
 border-bottom-color: var(--cor-principal);
 background: var(--cor-principal);
 color: var(--cor-de-texto);}


a.email:hover{
 text-decoration: underline;}



@media screen and (min-width : 768px){
  
.barra-de-navegacao .navegacao{
 position: static;
 height: 100%;
 left: 0;
 margin: 0;
 padding: 0;
 background: transparent;}


.navegacao menu{
 flex-direction: row;
 align-items: center;
 justify-content: end;
 gap: 0 20px;
 padding: 0;
 margin: 0;
 background: transparent;
 border-left: none;
  
}


.navegacao menu h3{
  display: none;}


.navegacao menu li
{
 width: max-content;
 opacity: 1;
 -webkit-transform: none;
 transform: none;}


.navegacao a:before{
  display: none;}


.barra-de-navegacao .hamburguer{
 display: none;}


.inicio .grid{
 grid-template-areas: "apresentacao apresentacao blob blob""sociais sociais blob blob"}


.inicio .blob{
 justify-content: flex-end;}


.inicio .redes-sociais{
 flex-direction: row;
 justify-content: flex-start;}


.sobre .biografia{
 grid-template-columns: 1fr 2fr}



.projetos .grid{
 grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr));
 }

 
 footer section{
  height: 400px;
  align-items: center;
  justify-content: space-evenly;
  }
 }

@media screen and (min-width: 1025px){
  :root{
    --margem: calc((100vw - 1024px)/2)
  }
}
.popup{
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   padding: 30px;
   background: #000000e5;
   backdrop-filter: blur(10px);
   }


.popup dialog{
 all: unset;
 -webkit-border-radius: .5rem;
 border-radius: .5rem;
 padding: 30px;
 background: #22222285;
 border: 1px solid #222;
 backdrop-filter: blur(5px);
 max-width: 500px;}


.popup dialog h3{
 font-size: var(--texto-medio);
 color: #9B7A02;}


.popup dialog p{
 font-size: var(--texto-normal);
 color: #BCB085;}


.popup dialog h1,
.popup dialog p{
 -webkit-animation: subir-revelar .4s ease-in-out;
 animation: subir-revelar .4s ease-in-out;
}