@font-face {
  font-family: 'Material';
  font-style: normal;
  font-weight: 400;
  src: url('../Fontes/Material.woff2')  format('woff2');
}

@font-face {
 font-family: Raleway;
 src: url('../Fontes/Raleway.ttf');
}

:root
{
 --principal: #088AC4
}

html
{
 scroll-behavior: smooth;
}

body
{
 margin: 0;
 padding: 0;
 background: #252331;
 font-family: Raleway, sans-serif;
}

i.icone
{
font-family: Material;
font-style: normal;
}

i.icone.grande
{
 font-size: 3rem;
}


::selection
{
 background: var(--principal);
 color: #eee;
}


.navegacao
{
 background: #252331;
 height: 40px;
 color: #ddd;
 display: flex;
 align-items: center;
 padding: 30px;
 box-sizing: border-box;
 font-size: 1.2rem;
 box-shadow: 0 0 30px #00000065;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 1001;
}

.navegacao .hamburguer
{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 25px;
 height: 15px;
 margin-right: 20px;
 position: relative;
}

.navegacao .hamburguer:before
{
 position: absolute;
 top: 0;
 content: '';
 height: 2px;
 width: 100%;
 background: #ddd;
 transition: transform 150ms linear;
}

.navegacao .hamburguer:after
{
 position: absolute;
 bottom: 0;
 content: '';
 height: 2px;
 width: 100%;
 background: #ddd;
 transition: transform 150ms linear;
}

.navegacao .hamburguer.expandido:before
{
 top: 5px;
 transform: rotate(45deg);
}

.navegacao .hamburguer.expandido:after
{
 top: 5px;
 transform: rotate(-45deg);
}



aside
{
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background: #00000095;
 backdrop-filter: blur(30px);
 z-index: 1000;
}

aside.mostrar
{
 display: block;
}


aside .menu
{
 margin: 0;
 padding: 0;
 margin-top: 100px;
}

aside .menu h3
{
 margin: 30px;
 font-size: 1.5rem;
 color: #eee;
 animation: revelar 500ms linear
}

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


aside .menu li
{
 display: none;
 align-items: center;
 height: 30px;
 padding: 10px 30px;
 color: #aaa;
 font-size: 1rem;
 border-bottom: 1px #33333345 solid;
}

aside .menu li:active
{
 backdrop-filter: blur(5px) contrast(50%)
}

aside .menu li.animar
{
 display: flex;
 animation: menu 300ms linear
}

@keyframes menu
{
 from
 {
  opacity: 0;
  margin-top: 50px;
 }
 to
 {
  opacity: 1;
  margin-top: 0;
 }
}

aside .menu li a
{
 text-decoration: none;
 color: inherit;
 height: 100%;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 -webkit-tap-highlight-color: transparent;
 text-transform: uppercase
}



.apresentacao
{
 margin-top: 80px;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 flex-direction: column;
 padding: 30px;
}

@media( min-width : 500px)
{
 .apresentacao
 {
  justify-content: center;
  align-items: center;
 }
 .conteudo
 {
  display: block;
  text-align: center;
 }
 
 .flexbox,
 .biografia
 {
  max-width: 500px;
 }
}

.apresentacao .blob
{
 display: flex;
 align-items: flex-end;
 justify-content: center;
 height: 200px;
 width: 200px;
 background: linear-gradient(45deg, #000, var(--principal), #000);
 overflow: hidden;
 border: 1px #aaaaaa45 solid;
 animation: blob 3s linear both alternate infinite;
}

@keyframes blob
{
 0%
 {
  border-radius: 40%;
 }
 20%
 {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
 }
 50%
 {
  border-radius: 39% 61% 33% 67% / 62% 38% 62% 38% ;
 }
 100%
 {
  border-radius: 40%
 }
}

.apresentacao .blob img
{
 height: 190px;
}

.apresentacao h1
{
 display: flex;
 justify-content: center;
 flex-direction: column;
 gap: 10px 0;
 color: #ddd;
 font-size: 1.5rem;
 margin-top: 40px;
}

.apresentacao h1 span.destaque
{
 background: linear-gradient(to left, var(--principal), #555);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.biografia
{
 background: linear-gradient(45deg,#00000095, #444, #00000095);
 box-sizing: border-box;
 margin: 250px 15px;
 color: #aaa;
 border-radius: 25px;
 opacity: 0;
 transition: 500ms linear;
 transform: translateY(100px) scale(0.5);
 border: 1px var(--principal) solid;
 padding: 30px;
}

.biografia.scroll
{
 opacity: 1;
 transform: translateY(0px) scale(1)
}

.biografia img
{
 width: 100px;
 height: 100px;
 object-fit: cover;
 border-radius: 200px;
 background: #000;
 border: 2px var(--principal) solid;
}

.biografia h3.titulo
{
 font-size: 1.3rem;
 color: #eee;
}

.biografia p
{
 margin: 0;
 padding: 0;
 font-size: 1rem;
 line-height: 1.5rem;
 text-align: justify;
}

h1.titulo
{
 text-align: center;
 font-size: 2rem;
 color: #eee;
 margin-bottom: 250px;
}

.flexbox
{
 margin: auto;
 background: #00000045;
 background: linear-gradient(45deg,#00000095, #444, #00000095);
 border-radius: 20px;
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 padding: 60px 30px;
 box-sizing: border-box;
 width: 90%;
 box-shadow: 0 7.5px 15px #00000077;
 opacity: 0;
 transition: 500ms linear
}

.flexbox.scroll
{
 opacity: 1;
}

.grafico
{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 height: 300px;
 width: 40px;
 position: relative;
 z-index: 1;
 margin: 0;
 padding: 0;
}

.grafico .progresso
{
 position: absolute;
 z-index: 1;
 width: 100%;
 height: 100%;
 background: #aaa;
 border-radius: 5px;
}

.grafico .progresso:after,
.grafico .progresso::after
{
 position: absolute;
 content: '';
 width: 100%;
 height: var(--progresso);
 bottom: 0;
 left: 0;
 background: var(--principal);
 
 background: linear-gradient(45deg, #000, var(--principal), #000);
 border-radius: 5px;
 transition: 300ms linear;
}

.flexbox.scroll .grafico .progresso:after,
.flexbox.scroll .grafico .progresso::after
{
  animation: grafico 3s ease-in-out
}

@keyframes grafico
{
 from
 {
  height: 0;
 }
 to
 {
  height: var(--progresso);
 }
}


.grafico .valor
{
 position: absolute;
 bottom: calc( var(--progresso) - 25px);
 color: #eee;
 z-index: 2;
}


.grafico .nome
{
 position: absolute;
 bottom: -30px;
 font-size: 0.8rem;
 color: #aaa;
}

#projetos .titulo
{
 margin: 250px 0;
}

.grid
{
 display: grid;
 place-items: center;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 padding: 30px;
 box-sizing: border-box;
 margin-bottom: 250px;
 gap: 20px
}

.card
{
 background: linear-gradient(45deg,#00000095, #444, #00000095);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 color: #eee;
 padding: 15px;
 width: 100%;
 box-sizing: border-box;
 min-height: 150px;
 border-radius: 10px;
 border: 1px var(--principal) solid;
 user-select: none;
 opacity: 0;
 transition: 500ms linear
}

.card.scroll
{
 opacity: 1;
}

.card span.nome
{
 display: block;
 text-align: center;
 width: 100%;
}

.card button
{
 border: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 40px;
 width: 100%;
 margin-top: 15px;
 background: linear-gradient(45deg, #000, var(--principal), #000);
 border: 1px #aaaaaa45 solid;
 font-size: 0.9rem;
 border-radius: 30px;
 word-spacing: 5px;
 color: inherit;
}

.card button i.icone
{
 font-size: 1.2rem;
}

.card button span
{
 text-transform: uppercase
}


.ripple
{
 position: relative;
 overflow: hidden;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.ripple i.bolha
{
 position: absolute;
 display: inline-block;
 border-radius: 100%;
 left: 0;
 top: 0;
 z-index: 200;
 opacity: 0.5;
 background: #fff;
 animation:  ripple 500ms linear;
 transform: translate(-50%, -50%)
}

@keyframes ripple
{
 from
 {
  opacity: 0.7;
  height: 0;
  width: 0;
 }
 to
 {
  opacity: 0.1;
 }
}



footer
{
 background: linear-gradient(45deg, #00000045, var(--principal), #00000045);
 height: 400px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 gap: 30px 0;
 font-size: 1rem;
 color: #fff;
 user-select: none;
}

footer .telefone,
footer .email
{
 text-decoration: none;
 -webkit-tap-highlight-color: transparent;
 color: inherit;
}

footer h1
{
font-size: 2rem;
}

footer .redes-sociais
{
 display: inline-flex;
 align-items: center;
 justify-content: space-between;
 width: 230px;
}

footer .redes-sociais a
{
 -webkit-tap-highlight-color: transparent;
 transition: 150ms ease-in-out
}

footer .redes-sociais a:active
{
 transform: scale(0.9)
}

footer .redes-sociais img
{
 width: 30px;
 filter: invert(100%);
}