/* INÍCIO DO SITE */
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.navbar {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1); 
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 
}

/* GERAL */

main{
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  align-items:center;
  justify-content: center;
  color: #276184;
}

/* PARTÍCULAS */
#particles-js {
  position: relative;
  width: 100%;
  z-index: 0;
  top: 0;
  background-color: #15171A;
}
/* MODO DARK */
#particles-js.dark{
  background-color: #fff;
}

footer.dark{
  background-color: #fff;
  color: #15171A;
}

#tableProjects.dark{
  color: #15171A;
  background-color: #f5f5f5;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9);
}

#formulario.dark{
  color: #15171A;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9);
  background-color: #f5f5f5;
}

#final.dark{
  color: #15171A;
}

/* DIV RESPONSÁVEL PELO TEXTO E IMAGEM*/
#sobre-mim {
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 2;
}

/* LADO ESQUERDO */
.texto{
    display: flex;
    text-align: center;

}
.conteudo h2{
  font-size: 3rem;
  font-weight: 800;
}
.conteudo p{
  font-size: 1.5rem;
  font-weight: 600;
  padding: 1rem 0;
}
.cv{
  margin-top: 1rem;
  position: relative;
  line-height: 0;
  padding: 1.2rem 2rem;
  border-radius: 4em;
  transition: 0.5s;
  color: #fff;
  background: #276184;
  font-family: "Nunito", sans-serif;
  text-decoration: none;
  font-size: 20px;
}
.cv:hover{
    box-shadow: 0px 0px 18px rgba(39, 97, 132, 0.6);
}

.imagemPerfil img{
  width: 70%;
  margin-left: 6rem;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.imagemPerfil img:hover{
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  animation: imagemP 2s infinite;
}

@keyframes imagemP {
  0%{
    transform: translateY(0); 
  }
  50% {
    transform: translateY(-50px); 
  }
  100% {
    transform: translateY(0px); 
  }
}

.redes{
  margin-top: 10%;
  border: none;
}
.rede-interna{
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: space-around;
}
.redes img{
  width: 35px;
  filter: invert(100%);
}
#changeColor.dark{
  filter: none;
}
.redes img:hover{
  animation: icons 1s infinite;
}
@keyframes icons {
  0%{
    transform: translateY(0); 
  }
  50% {
    transform: translateY(-10px); 
  }
  100% {
    transform: translateY(0px); 
  }
}


/* DARK MODE */
.checkbox {
  opacity: 0;
  position: absolute;
}

.label {
  background-color: #111;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 5px;
  position: relative;
  height: 26px;
  width: 50px;
  transform: scale(1.5);

}


.label .ball {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 22px;
  width: 22px;
  transform: translateX(0px);
  transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
  transform: translateX(24px);
}

.fa-moon {
  color: #f1c40f;
}

.fa-sun {
  color: #f39c12;
}


/* LADO DIREITO */ 
.imagemPerfil{
 border: none;
}

/* api do github */
footer{
  background-color: #15171A;
  min-width: 100%;
  position: absolute;
}
.table-projects{
  border-radius: 12px;
  color: #fff;
  padding: 25px;
  background-color: #1A1C1F;
  max-width: 80%;
  margin: 0 auto;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.titulo-project{
  text-align: center;
}
.content-main{
  margin: 30px;
}
.project{
  border: 1px solid #30363d;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 6px;
  margin: 20px;
}
.project div{
  display: flex;
  justify-content: space-between;
}
.title{
  color: #47a6f0;
}
.circle{
  display: inline-block;
  border-radius: 50%;
  background-color: #47a6f0;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border: 1px solid #30363d;
}
.data-create{
  color: #8b949e;
  border: 1px solid #8b949e;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.9rem;
}
.project a{
  text-decoration: none;
  color: #8b949e;
}

#final{
  color: #fff;
}

.formulario{
  color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 80%;
  margin: 50px auto;
  padding: 25px;
  background-color: #1A1C1F;
  border-radius: 12px;
}
.formulario h2{
  text-align: center;
}

/* MOBILE */
@media only screen and (max-width: 992px) {
  #sobre-mim {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    flex-direction: column;
  }
  .imagemPerfil img{
    width: 40%;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin-top: 15px;

    margin-left: 0px;
  }
  
  .content-main{
    margin: 0px;
  }
  .table-projects{
    border-radius: 12px;
    color: #fff;
    background-color: #1A1C1F;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
  .project{
    border: 1px solid #30363d;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 6px;
    margin: 0px;
    margin-top: 20px;
    width: 100%;
  }
  .project div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }

  .formulario{
    max-width: 100%;
  }

  .texto{
    display: flex;
    justify-content: center;
  }
  .conteudo{
    text-align: center;
  }

  .imagemPerfil{
    display: flex;
    justify-content: center;

  }
  #particles-js {
    position: relative;
    width: 100%;
    z-index: 0;
    top: 0;
    background-color: #15171A;
  }

}