body {
  margin: 0;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* HEADER */


.lista-header {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
}

.lista-header a {
  color:var(--cor-0);
}

.container {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* HOME */
.section-home {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}


.container-home span {
  background-color: var(--cor-4);
  color: var(--cor-1);
  padding: 2px 15px;
  border-radius: 5px;
  margin-right: 5px;
}

.container-home p {
  font-size: 20px;
  margin-bottom: 15px;
}

.container-home h2 {
  line-height: 1;
}

.link-fale-comigo {
  padding: 16px 26px;
  border-radius: 5px;
  background: var(--cor-4);
  margin-right: 60px;
}

.contact-section {
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.contact-section img {
  background-color: var(--cor-4);
  padding: 10px;
  border-radius: 100%;
  margin-right: 15px;
}
.contact-trabalho{
  display: flex;
  align-items: center;
  flex-wrap: wrap;

}
@media (max-width: 600px){
  .contact-trabalho{
    display: none;
  
  } 
  
}



/* SOBRE MIM  */

.container-sobre {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(0, 0, 0, 0.2) url('/Assets/background.jpg');
  background-size: cover;
  background-blend-mode: overlay;
  width: 100%;
  height: 100vh;
  flex-wrap: wrap;
  padding-left: 100px;
  padding-right: 100px;

}

.outer-border {
  position: relative;
  display: inline-block;
}

.sobre-img {
  display: block;
  max-width: 100%;
  max-height: 400px;
  border-radius: 20px;
  z-index: 1;
  box-shadow: var(--cor-4) 0px 5px 15px;
}

.sobre h1 span {
  color: var(--cor-4);
}

.sobre li {
  margin-top: 10px;
  list-style-type: circle;
}

.sobre ul {
  margin-top: 15px;
}

.icons {
  display: flex;
  margin-top: 25px;
}

.icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom, #005200, #0649C4);
  border-radius: 50%;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  animation: moveIcon 2.5s infinite ease-in-out;
}

.icon2 {
  width: 55px;
  height: 55px;
  background: linear-gradient(to bottom, #ECECEC, #868686);
  border-radius: 50%;
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon2 img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  animation: moveIcon 2.5s infinite ease-in-out;
}

@keyframes moveIcon {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}
@media (max-width:800px){
  .container-sobre{
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
  }

  .sobre-img{
    height: 250px;
  }

  
  .sobre  {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sobre h2.sobre ul{
    max-width: 50ch;
  
 
  }
}

/* HISTORICO ACADEMICO */
.container-experiencia {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: url('/Assets/background.jpg');
  background-size: cover;
  width: 100%;
  min-height: 100vh; 
  flex-direction: column;
  box-sizing: border-box;
}

.container-experiencia header h1 span {
  color: var(--cor-4);
}

.experiencia {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1152px;
  margin: 10px auto;
  box-sizing: border-box;
}

.experiencia-img img {
  background: linear-gradient(to bottom, #ECECEC, #868686);
  padding: 10px;
  border-radius: 50%;
  animation: moveExperiencia 2s infinite ease-in-out;
}

@keyframes moveExperiencia {
  0% {
    transform: translate(0);
  }

  50% {
    transform: translate(-5px);
  }

  100% {
    transform: translate(0);
  }
}

.detalhes-experiencia {
  background: var(--cor-2);
  width: 100%;
  height: 160px;
  padding: 20px;
  border-radius: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.detalhes-experiencia time {
  color: #03235E;
}

.detalhes-experiencia time span {
  color: #005200;
}

.detalhes-experiencia h2 span {
  color: #005200;
}
.detalhes-experiencia p span {
  color: #005200;
}
@media (max-width: 800px){

 .container-experiencia{
  padding-left: 20px;
  padding-right: 20px;
  
  
  
 }

 .experiencia{
  flex-direction: column;
 }

 .experiencia-img{
  margin-bottom: 2rem;
 }

 .experiencia-img img {
  height: 70px;
 }
 .experiencia-img img{
display: none;
 }
}

/* portifolio */
.container-portifolio {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: rgba(0, 0, 0, 0.2) url('/Assets/background.jpg');
  background-size: cover;
  background-blend-mode: overlay;
  width: 100%;
  flex-direction: column;
  box-sizing: border-box;

}

.container-portifolio header {
  width: 100%;
}



.container-portifolio header h2 {
  text-align: center;
  margin: 3rem 0rem;
}

.container-portifolio header h2 span {
  color: var(--cor-4);
}

.projetos-todos {
  display: grid;
  width: 100%;
  gap: 9rem;
  margin-bottom: 5rem;
}

.projeto-item {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;

}

.projeto-img img {
  max-height: 500px;
  animation: moveIconPortifolio 4s infinite ease-in-out;
}

@keyframes moveIconPortifolio {

  0%,
  100% {
    transform: translateX(0) rotate(-1deg);
  }

  50% {
    transform: translateX(10px) rotate(1deg);
  }
}




.projeto-content h3{
  margin-bottom: 20px;
  margin-top: 10px;
}


.projeto-content p {
  max-width: 50ch;
  word-break: break-word;
  margin-bottom: 10px;
}

.projeto-content-02 p {
  max-width: 30ch;
  word-break: break-word;
  margin-bottom: 20px;
}

.projeto-links {
  display: flex;
  align-items: center;
}


.projeto-links div {
  display: flex;
}


.projeto-links-visitar a {
  color: var(--cor-1);
  font-size: 14px;
  background-color: var(--cor-4);
  padding: 10px 10px 10px 25px;
  border-radius: 5px;
  margin-right: 2rem;
  position: relative;
}

.projeto-links-visitar a::before {
  content: "";
  position: absolute;
  background-image: url("/Assets/seta.svg");
  width: 16px;
  height: 16px;
  left: 5px;
}

.projeto-links-git a {
  border: 1px solid var(--cor-0);
  padding: 10px 10px 10px 30px;
  border-radius: 5px;
  background: var(--cor-1);
  color: var(--cor-0);
  position: relative;
}

.projeto-links-git a::before {
  content: "";
  position: absolute;
  background-image: url("/Assets/gitlink.svg");
  width: 16px;
  height: 16px;
  left: 8px;
  top: 8px;
}

@media (max-width: 900px){

  .projetos-todos{
    gap: 3rem;
  }
  .projeto-img img {
    max-height: 200px;
    animation: moveIconPortifolio 4s infinite ease-in-out;
  }
  .projeto-content h3{
    text-align: center;
  }
  .projeto-links{
    justify-content: center;
      }
      .icons {
        justify-content: center;
      }
  
}


/* hard skills */

.container-hard-skills {
  width: 100%;
  background: url('/Assets/background.jpg');
}

.container-hard-skills header h1 {
  text-align: center;
  padding-bottom: 4rem;
  padding-top: 4rem;
}

.container-hard-skills header h1 span {
  color: var(--cor-4);
}

.flex-hard-skills {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6rem;
  justify-content: center;
  padding-left: 100px;
  padding-right: 100px;
}

.hard-skills {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(28% - 2rem); 
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ECECEC 35%, #929292);
  margin-bottom: 4rem;
  position: relative;
}

@media (max-width: 800px) {

  .container-hard-skills{
    height: 50vh;
    display:flex ;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 20px;
    padding-right: 20px;
  }
  .flex-hard-skills {
    display: flex;
    flex-wrap: nowrap; 
    overflow-y: hidden;
    column-gap: 2rem; 
    padding-left: 0px;
    padding-right: 0px;
    justify-content: normal;
    margin-bottom: 1rem;
  }

  .hard-skills {
    width: calc(47% - 2rem);
    min-width: 50%;
    height: 120px;
  }

  .barraRolagem {
    scrollbar-color: #FFF;
    scrollbar-width: thin;
  }

  .barraRolagem--amarelo {
    scrollbar-color: #FFF;
  }

  .barraRolagem::-webkit-scrollbar {
    width: 3px;
  }

  .barraRolagem::-webkit-scrollbar-track {
    background-color: #ffffff;
  }

  .barraRolagem::-webkit-scrollbar-thumb {
    background-color: #054AAE;
    border-radius: 10px;
  }
}


@media (max-width: 600px){
  .hard-skills{
    width: calc(100% - 2rem);
  }
  
}



/* Soft skills */

.container-soft-skilss {
  width: 100%;
  background: rgba(0, 0, 0, 0.2) url('/Assets/background.jpg');
  background-size: cover;
  background-blend-mode: overlay;
}

.container-soft-skilss header h1 {
  text-align: center;
  padding-bottom: 4rem;
  padding-top: 4rem;
}

.container-soft-skilss header h1 span {
  color: var(--cor-4);
}

.flex-soft-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem; 
  justify-content: center;
}

.soft-skills {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(24% - 2rem); 
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ECECEC 35%, #929292);
  margin-bottom: 4rem;
  position: relative;
}

@media (max-width: 800px) {

  .container-soft-skilss{
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  
    padding-left:20px ;
    padding-right:20px ;
  }
  .flex-soft-skills {
    flex-wrap: nowrap; 
    overflow-y: hidden;
    gap: 2rem; 
    justify-content: normal;
    padding-left:0px ;
    padding-right:0px ;
    margin-bottom: 1rem;
  }

  .soft-skills {
    width: calc(35% - 2rem); 
    min-width: 40%;
    height: 120px;
  }

  .soft-skills-before {
    display: none;
  }
}

.soft-skills-before {
  position: absolute;
  background: var(--cor-3);
  width: 80px;
  height: 16px;
  right: -80px;
}
.soft-skills p {
  text-align: center;
}



/* FORMULARIO */

.contato-container{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background:url('/Assets/background.jpg');
}

.contato-left{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}



.contato-left-title hr {
  border: none;
  width: 120px;
  height: 10px;
  background: linear-gradient(270deg,#03235E,#005200);
  border-radius: 10px;
  margin-bottom: 20px;
}

.contato-inputs {
  width: 400px;
  height: 50px;
  border: none;
  outline: none;
  padding-left: 25px;
  font-weight: 500;
  color: var(--cor-0);
  border-radius: 50px;
}

.contato-left textarea{
  height: 140px;
  padding-top: 15px;
  border-radius: 20px;
}

.contato-inputs:focus{
  border: 2px solid var(--cor-3);
}

.contato-inputs::placeholder{
  color: #868686;
}

.contato-left button{
  display: flex;
  align-items: center;
  padding: 15px 30px;
  font-size: 16px;
  color: var(--cor-2);
  gap: 10px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(270deg,#03235E,#005200);
  cursor: pointer;
}

.contato-left button img {
  height: 15px;
}

.contato-right img {
  width: 600px;

}

@media (max-width: 800px){
  .contato-container{
    padding-right: 20px;
    padding-left: 20px;
  }

  .contato-right img {
    display: none;
  }
}

@media (max-width: 450px){
 
  .contato-inputs{
    width: 250px;
  }
}

/* ---- reset ---- */
body {
  font: normal 75% Arial, Helvetica, sans-serif;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */
#particles-js {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('/Assets/background.jpg');

}



/* ---- stats.js ---- */
.count-particles {
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  font-size: 0.8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}