/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Gravitas+One&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Oswald:wght@200..700&display=swap');

/* 

Alan Sans
font-family: "Alan Sans", sans-serif;

Libre Baskerville
font-family: "Libre Baskerville", serif;

Gravitas One
 font-family: "Gravitas One", serif;

Oswald:
font-family: "Oswald", sans-serif;

*/



/* Fontes */
:root {

  --fonte-textos: "Alan Sans", sans-serif;
  --fonte-titulo-h1: "Libre Baskerville", serif;
  --fonte-subtitulo-h2: "Oswald", sans-serif;
  --fonte-subtitulo-h3: "Gravitas One", serif;
}


/* Color -> Dark */
:root,
:root[data-theme="dark"] {
  --cor-fundo: #111217;
  --cor-fundo-secundario: #28292E;

  --cor-text-menu-link: #7b7b7b;
  --cor-borda: #f0f0f0ae;
  --cor-icon-theme: #a0a0a0;

  --cor-titulo: #eaeaea;
  --cor-textos: #cacaca;

  --hover-link: #f0f0f0;
  --cor-link: #626262;

}

/* Color -> Light */
:root,
:root[data-theme="light"] {
  --cor-fundo: #f0f0f0;
  --cor-fundo-secundario: #c7c8c9;
  --cor-text-menu-link: #b3b3b3;
  --cor-borda: #111217;
  --cor-icon-theme: #808080;

  --cor-titulo: #111217;
  --cor-textos: #111217;

  --hover-link: #111217;
  --cor-link: #a3a2a2;

}

html[data-theme="light"] .logo {
  filter: invert(1);
}

/* Aparencia/ Efeito Barra Rolagem */
html {
  scroll-behavior: smooth;
  /* efeito / comportamento */
  scrollbar-width: thin;
  scrollbar-color: var(--cor-fundo-secundario) transparent;
}

/* Reset CSS */
* {
  margin: 0;
  /* Margem Externa */
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-textos);
}

header {
  /* FLEXBOX */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  /* 1 rem = 16 pixels */
  border-bottom: 0.1px solid var(--cor-borda);
  position: fixed;
  z-index: 9999;
  /* CAMADAS */
  background: var(--cor-fundo);
}

.logo {
  width: 5rem;
  /* Comprimento */
  height: auto;
  /* Altura */
}

/* nav */
.menu-desktop {
  display: none;
}

/* ul */
.menu {
  display: flex;
  list-style: none;
  gap: 1.2rem;
}

/* a */
.menu-link {
  text-decoration: none;
}

/* Span dentro do A HREF */
.menu-text {
  text-transform: uppercase;
  color: var(--cor-text-menu-link);
  font-family: var(--fonte-textos);
}

/* Icone Puro */
#toggleTheme {
  color: #a3a2a2;
  font-size: 1.5rem;
  cursor: pointer;
  /* seta-mouse */
}

#toggleTheme:hover {
  color: var(--hover-link);
}

.menu-mobile {
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  background: var(--cor-fundo-secundario);
  width: 35%;
  display: flex;
  flex-direction: column;
  max-width: 320px;
  padding-top: 6rem;
  height: 100vh;
  /* Viewport Height */
  border-left: 1px solid var(--cor-borda);
  align-items: center;
}

.menu-mobile.active {
  transform: translateX(0);
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
}

.btn-menu-mobile {
  background: transparent;
  border: none;
  color: var(--cor-icon-theme);
  font-size: 1.5rem;
  margin-left: 1rem;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0.5rem;
}

.header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item {
  text-align: center;
}

/* Herança */
.menu-link.active .menu-text,
.menu-link:hover .menu-text {
  color: var(--hover-link);
}

/* h1 Base */
h1 {
  font-size: 2.5rem;
  color: var(--cor-titulo);
  font-family: var(--fonte-titulo-h3);
  /* letter-spacing: ; */
}

h2 {
  text-align: center;
  font-size: 2rem;
  font-family: var(--fonte-subtitulo-h2);
  /* font-weight: ; */
  /*   letter-spacing: ; */
  /* color: ; */
}

h3 {
  font-size: 1.55rem;
  font-family: var(--fonte-textos);
  text-transform: uppercase;
}

p {
  color: var(--cor-textos);
}

p,
span,
li {

  font-size: 1.5rem;
}

/* Reaproveitar para as seções */
#home,
.projetos,
.sobre,
.contato {
  padding: 3.5rem 1rem;
}

/* FlexBox da HOME */
#home {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* HERANÇA */
.menu-social i {
  color: var(--cor-link);
  font-size: 1.5rem;
}

.menu-social i:hover {
  color: var(--hover-link);

}

.descricao-video {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem;
  padding: 6.25rem 1rem 2rem;
  background: #626262;
  margin-top: -7.5rem;
}

.video iframe {
  aspect-ratio: 16/9;
  /* width: 100%; */
}

.descricao-video h2 {
  font-size: 2rem;
  text-transform: normal;
  letter-spacing: 2px;
  font-family: var(--fonte-subtitulo-h2);
  text-align: center;
  margin-top: -1rem;
}


/* Projetos */

.projetos {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  scroll-margin-top: 2.5rem;
}

.projetos-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.projeto-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.img-card {
  width: 100%;
  border-radius: 3rem;
  /*  box-shadow: 4px 7px 15px 1px #e8e8e8; */
  pointer-events: none;
  object-fit: cover;
  object-position: center;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;

}

.card-list {
  list-style: none;
}

/* h3 do projeto */
.card-title {
  color: #a35fe2;
  font-size: 2rem;
  font-weight: 400;
}

.card-list .card-item i {
  margin-right: 15px;
}

.card-list .card-item {
  margin-bottom: 10px;
}

.card-list .card-item:hover i {
  color: #1c38c4
}

/* SOBRE */
.sobre {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.sobre-content1,
.sobre-content2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem
}

.sobre-avatar {
  width: 100%;
  border-radius: 50rem;
}

.sobre-descricao {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.25rem
}

.sobre-icones i,
.sobre-skills i {

  font-size: 1.5rem;
}

/* Content */
.sobre-content2 .col1,
.sobre-content2 .col2 {
  display: flex;
  flex-direction: column;
  text-align: justify;
  gap: 2rem;
}

.sobre-content2 .col .formacao,
.sobre-content2 .col .exp {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}



/* ACCORDION */
.accordion-body {
  display: none;
  width: 100%;
}

.accordion-header {
  width: 100%;
  display: flex;
  padding: .75rem 1rem;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 1px solid var(--cor-fundo-secundario);
  cursor: pointer;
}


.accordion-header span,
.accordion-header i {
  color: var(--cor-titulo);
}

/* ACCORDION */
.accordion-body {
  display: none;
  border: 1px solid var(--cor-borda);
  padding: 1.25rem;

}

.accordion-item.active .accordion-body {
  display: flex;
}

.accordion-item.active .bi-caret-down-fill {
  /* abimação fechando */
  transform: rotate(180deg);
  transition: .3s ease-in-out;
}

.bi-caret-down-fill {
  transition: 3s ease-in-out;
}

.accordion-item.active .accordion-body {
  display: flex;
}

.accordion-item.active .accordion-header {
  background: var(--cor-fundo-secundario);
}

/* Botao */

.btn-primario {
  display: flex;
  background: transparent;
  width: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 3rem;
  cursor: pointer;
  padding: .5rem 1.5rem;
  justify-content: center;

}

/* Icone do botao */
.btn-primario i {
font-size: 1.2rem;
}

.btn-primario:hover {
  transform: scale(1.02);
  transition: all 3s ease-in-out;

}

/* Contato */
.contato{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.contato p {
  font-size: 1.5rem;
  text-align: center;
}

.contato .btn-primario {
  gap: 1rem;
}

.contato .email {
  color: var();
text-decoration: none; /* remove Underline */
} 

/* Icone redes sociais */
.contato span:hover span {
  color: var(--cor-link);
}

/*  mwnu link = A HREF */
.contato .menu-link:hover i,
.contato .menu-link:hover span {
  color: var(--cor-textos)
}

.contato-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2rem;
  width:100%;
  margin-top: 3rem;
  }
.contato-formmulario,
.contato-mapa {
  width: 100%;
}

/* Estrutura Forms */
.form-contato {
display: flex;
flex-direction: column;
gap: 1rem
}

.form-contato input,
.form-contato textarea {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-size: 1rem;
  color: var(--cor-titulo);
  background: var(--cor-fundo-secundario);
  border: none;
}

.form-contato input::placeholder, 
.form-contato textarea::placeholder {
  font-size: 1rem;
  font-family: var(--fonte-textos) ;
  color: var(--cor-textos);
  opacity: .3;
}

.form-contato textarea {
  font-size: 1rem;
  font-family: var(--fonte-textos);
  line-height: 1.5;
}

.form-contato button {
  display: flex;
  align-items: center;
  align-self: flex-start
  
}


.btn-primario span,
.btn-primario i {
  color: var(--cor-textos);

}

a {
  text-decoration: none;
}
/* Mapa */
.contato-mapa iframe {
  width:100%;
  height: 100%;
  min-height: 400px;
  border-radius: .75rem;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0, 0.308);
  
}

/* Responsividade */
/* telas Até 768px */
@media (max-width: 768px) {
  #home {
    padding-top: 6rem;
  }
}


/* A partir de 768 voltar tela em flex */
@media (min-width: 768px) {
  #home{
    padding-top:6rem;
  }
.contato-grid {
  grid-template-columns: 100%;
}

  .menu-desktop {
    display: flex;
  }

  .btn-menu-mobile {
    display: none;
  }

  h1 {
    font-size: 5rem;
  }

  h2 {
    font-size: 3rem;
  }

  .header-logo {
    min-width: 30%;
  }

  #home,
  .projetos,
  .sobre {
    padding: 8rem 6rem 4rem 6rem;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .descricao-video {
    padding: 6.25rem 6rem 2rem 6rem;
  }
}

/* Telas 992 */
@media (min-width: 992px) {
  h1 {
    font-size: 6rem;
  }
}

@media (min-width: 1200px) {


  h2 {
    font-size: 5rem;
  }

  .projeto-card {
    flex-direction: row;
  }

  .img-card {
    width: 55%;
  }

  .card-reverse {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .sobre-content1,
  .sobre-content2 {
    display: grid;
    grid-template-columns: 30% 70%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4rem;
  }

  h3 {
    font-size: 2.55rem;
  }


}



/* Telas 1400px */
@media (min-width: 1400px) {
  h1 {
    font-size: 7rem;
  }

  .descricao-video h2 {
    font-size: 4rem;
    text-align: start;
  }
}