@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");

:root {
  --background: #1f2023;
  --bg-buttons: #5f4983;
  --text-buttons: #f8faff;
  --socials-buttons: rgb(168, 172, 179);
  --texto: rgb(232, 234, 237);
  --texto-secundario: rgb(154, 160, 166);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  list-style: none;
  border: none;
  scroll-behavior: smooth;
}

body {
  cursor: default;
}

/* Barra Scroll */
body::-webkit-scrollbar {
  background-color: hsl(180, 2%, 25%);
  width: 14px;
}

body::-webkit-scrollbar-thumb {
  background: hsl(180, 3%, 41%);
}

body::-webkit-scrollbar-thumb:hover {
  background: hsl(180, 3%, 49%);
}

body {
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  width: min(100%, 1350px);
  margin: auto;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
  background-color: #1f2023;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

}

/*div con Gaby y iconos resp lado izquierdo*/
.divLeft {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 18px;
}

.gaby {
  color: var(--texto);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  cursor: pointer;
  transition: 0.3s;
}

.gaby:hover {
  transform: scale(1.2);
}

/* div contenedor del nav y los iconos de modo oscuro/claro*/
.divNavYmode {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* ***************************************** MENU HAMBURGUESA Ocultar en Desktop *********************************** */
/*icono menu resp*/
.fa-bars {
  display: none;
  color: var(--texto);
  font-size: 2rem;
}

/*icono cerrar menu resp*/
.fa-xmark {
  display: none;
  color: var(--texto);
  font-size: 25px;
}

/*div contenedor del icono sol y el icono luna*/
.divClaroOscuro {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  width: 35px;
}

/*ocultar luna*/
.fa-moon {
  display: none;
}

/*icono luna y sol */
.fa-moon-active {
  display: flex;
  position: absolute;
  color: var(--texto-secundario);
  font-size: 22px;
  padding: 9px 13px;
  border-radius: 50%;
}

/*ocultar icono sol clase en html predeterminada*/
.fa-sun {
  display: none;
}

/* clase agregada con JS para mostrarlo*/
.fa-sun-active {
  display: flex;
  position: absolute;
  font-size: 22px;
  padding: 9px 10px;
  border-radius: 50%;
  color: #9eff49;
}

.fa-moon:hover,
.fa-sun:hover {
  background-color: hsl(0, 0%, 50%, 0.1);
}

.navbar-list {
  display: flex;
  height: 100%;
}

nav a {
  height: 100%;
  cursor: pointer;
  color: var(--texto);
  font-size: 17px;
  letter-spacing: 2px;
  font-weight: 300;
  font-family: sans-serif;
  padding: 22px 7px;
}

nav a:hover {
  background-color: hsl(0, 0%, 50%, 0.1);
}

/*  *******************************************     GLASMORPHISM:   *********************************************

  Fondo semitransparente que
  añade un difuminado al fondo del div en el que se aplique. En este caso, lo usamos para que al abrir el menú
  hamburguesa lo demás de la página se vea borroso abajo de este div de clase overlay.
  */

.overlay {
  position: absolute;
  top: 65px;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 1;
  /*Para que quede por encima del resto de las cosas*/

  /*Efecto de Glassmorphismo*/
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: none;
}

/*Toggle para el overlay (para que funcione unicamente cuando abrimos menu hamburguesa.
    Aclarar que funciona porque son elementos hermanos y overlay esta debajo en el código.*/
.show-overlay {
  display: block;
}

/*****************************************************************************************************************/
/* *******************************************contenedor general luego del header ********************************/

/*para todos los sections width fijo para mantener centrado en monitores grandes*/
section {
  display: flex;
  width: min(100%, 1350px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#sectionHero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

/* barra vertical a la izquierda del hero*/
.divUlBtns {
  height: calc(100% - 0px);
  display: flex;
  align-items: flex-end;
}

/* UL Botones Hero: Github  Linkedin Cel*/
.ulBtnsContacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  bottom: 0px;
  left: 50px;
}

/* cada uno de los logos en el ul*/
.fa-github,
.fa-linkedin,
.fa-square-phone {
  font-size: 37px;
  color: var(--socials-buttons);
  transition: 0.3s;
}

/*agrego el fa globe para no repetir codigo*/
.fa-github:hover,
.fa-linkedin:hover,
.fa-square-phone:hover,
.fa-globe:hover {
  color: var(--bg-buttons);
  transform: scale(1.2);
}

/* linea vertical final*/
.divDecoration {
  height: 4rem;
  width: 0px;
  border: solid 4px var(--socials-buttons);
}

/* contiene el saludo y el div de los botones*/
.contenedorHero {
  padding-right: 30px;
  height: 563px;
  width: 75%;
  display: flex;
  justify-content: center;
}

/* Card central Hola,soy Gabriel Torrez...*/
.divTitulo {
  margin-top: 80px;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  height: 450px;
}

.h1Titulo {
  font-size: 8rem;
  line-height: 0.9;
  font-weight: 600;
  width: 600px;
  /*Letras color en gradiente*/
  background: linear-gradient(to right, #0077b6, #00b4d8);
  color: transparent;
  -webkit-background-clip: text;
  animation: gradient 5s ease infinite;
}

.spanTitulo {
  margin-top: 10px;
  font-size: 23px;
  color: var(--texto);
  font-weight: 600;
  text-align: center;
}

/*Div y Botones para contacto o descargar Cv*/
.divBtnsHero {
  margin-top: 22px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.descargarCv,
.contactameLogo {
  height: 22px;
}

/*botones de Hero */
.aHero {
  margin-top: 5px;
  padding: 18px 30px;
  background-color: var(--bg-buttons);
  color: var(--text-buttons);
  font-size: 23px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 5px;
}

.aHero:hover {
  transform: scale(1.1);
}

/* ********************************************   Section Sobre mi , Habilidades, etc********************************* */
#sectionSobreMi,
.sectionSobreMi2 {
  padding: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 3rem;
}

.divTitulos,
.divDown {
  text-align: center;
  width: 95%;
}

/*Titulo Sobre Mi, Habilidades, Educacion ,Mis Proyectos*/
.text4x1 {
  color: var(--texto);
  font-size: 2.4rem;
  line-height: 2.5rem;
}

/*Span que tienen debajo: quien soy, mis conocimientos,etc*/
.spanText {
  color: var(--texto-secundario);
  font-size: 1rem;
}

/*Parrafos */
.pSobreMi,
.aContactame,
.fa-arrow-pointer {
  color: var(--texto);
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.75rem;
}

.fontNegrita {
  font-weight: 600;
}

/* *****************************************     Seccion de Habilidades    ******************************************* */
/* Divs contenedor  de habilidades */
.divHabilidades {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  width: 100%;
}

/*Titulos de habilidades*/
.divTitulosHab {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

/* *************************************  H A B I L I D A D E S :***********************************/
.contenedor-tecnologias {
  padding: 20px;
}

/* iconos tecnologias  */
.tit-tec {
  font-size: 19px;
  color: #fff;
  margin-bottom: 15px;
}

/* contenedor front, back, etc */
.div-tec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.card-tec {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  background-color: #35373a;
  border: 1px solid #4a4d52;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.card-tec:hover {
  transform: scale(1.05);
  background-color: #414449;
  border-color: #5c6168;
}

.card-tec i {
  font-size: 50px;
}

.card-tec span {
  font-size: 14px;
  color: white;
}


/**************************************************  Mi Trayectoria  **********************************************/

.divTrayectoria {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95%;
}

/*Div contenedor Educacion*/
.divEducacion {
  width: min(100%, 1350px);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 35px;
}

/*Logo sombrerito*/
.fa-graduation-cap {
  color: var(--texto);
  font-size: 30px;
}

.h3Educacion {
  color: var(--texto);
  font-size: 28px;
  text-align: center;
}

/*Div contenedor de la linea de tiempo*/
.divTiempo {
  display: flex;
  justify-content: space-around;
}

.divTiempo ol {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* width por igual a cada una de las cards educacion*/
.divTiempo ol li {
  width: 33%;
}

/*div conenedor y individuales de logo calendario y linea de tiempo violeta*/
.divLineal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.fa-calendar-check {
  color: var(--texto);
  font-size: 32px;
}

.divDecoration2 {
  border: solid 2px var(--bg-buttons);
  width: 100%;
}

/* Textos de cards*/

.divTiempo ol li :nth-child(2) {
  font-size: 1.1rem;
  line-height: 1rem;
  color: var(--texto);
  font-weight: 700;
}

.divTiempo ol li :nth-child(3) {
  color: var(--texto-secundario);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.5rem;
}

.divTiempo ol li :nth-child(4) {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--texto);
  font-weight: 600;
}

/* ********************************************************  Proyectos ***************************************************/
#sectionProyectos {
  padding-top: 75px;
}

.divTitulosProyectos {
  width: 85%;
  text-align: center;
}

/*Div contenedor de cada una de las cards de proyectos*/
.divContenedorProyectos {
  width: 85%;
}

/*cada contenedor de cada proyecto*/
.divProyecto {
  margin-bottom: 30px;
  height: 400px;
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-between;
  border-radius: 20px;
}

.imgProyecto {
  width: min(60%, 701px);
  border-radius: 7px;
}

.divTextProyecto {
  margin-top: 50px;
  width: 40%;
}

/*titulo del proyecto editado mas arriba en .text4x1 */
/* parrafo descriptivo del proyecto*/
.pProyecto {
  margin-top: 20px;
  color: var(--texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2rem;
  background-color: var(--bg-buttons);
  padding: 14px 12px;
  border-radius: 10px;
  max-width: 450px;
  position: absolute;
}

/* UL contenedor de etiquetas HTML CSS JS*/
.ulLenguajes {
  margin-top: 195px;
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* ETIQUETAS  HTML CSS JS */
.liLenguaje {
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 4px;
  color: var(--text-buttons);
  background-color: var(--texto-secundario);
  background-color: rgb(107, 114, 128);
}

/*div de los logos github e internet*/
.divEnlacesProyecto {
  margin-top: 7px;
  display: flex;
  justify-content: end;
  gap: 24px;
  padding-right: 20px;
}

/*logo enlaces proyecto github vercel*/
.fa-globe,
.githubproyect {
  color: var(--text-buttons);
  font-size: 35px;
}

/* En la linea 200 estan los hover*/

/* ****************************************      Seccion otros proyectos         **********************************  */

/*Div cards otross proyectos*/
.divCardsOtrosProyectos {
  margin-top: 2rem;
  width: 85%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 50px;
}

/*Card individual de cada proyecto*/
.cardOtroProyecto {
  width: 30%;
  height: 355px;
  padding: 20px;
  border: 0.1px solid #e5e7eb1e;
  box-shadow: 10px 10px 20px hsl(225, 7%, 11%);
  border-radius: 5px;
  cursor: pointer;
}

.cardOtroProyecto:hover {
  background-color: #acadaf41;
}

.divIconos {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* div con iconos de Github y Vercel*/
.divEnlacesOtrosProyecto {
  display: flex;
  gap: 20px;
}

.fa-folder {
  color: var(--bg-buttons);
  font-size: 50px;
}

.fa-globeProyectos,
.githubotrosProyectos {
  color: var(--socials-buttons);
}

/*h3 card individual otros proyecto*/
.h3OtroProyecto {
  color: var(--text-buttons);
  font-size: 1.7rem;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 15px;
}

/*Parrafo de la card*/
.pCardOtrosProyectos {
  color: var(--text-buttons);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6rem;
}

/*ul contenedor de las etiquetas HTML CSS*/
.ulLenguajesOtros {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}

/*etiqueta individual HTML CSS*/
.liLenguajeOtros {
  text-align: center;
  background-color: var(--bg-buttons);
  border-radius: 7px;
  font-size: 16px;
  font-weight: 700;
  width: 70px;
  padding: 6px 4px;
  color: var(--text-buttons);
}

/* ****************************************************     SECTION CONTACTO      *********************************** */
/* section y contenedor de div text y div form*/
#sectionContacto {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: min(85%, 1140px);
  height: auto;
  padding-top: 95px;
  padding-bottom: 140px;
}

.divContactoTexto {
  width: 50%;
}

.h1Contacto {
  color: var(--texto);
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.spanContactame {
  height: 85px;
  width: 390px;
  display: flex;
  align-items: center;
  padding-left: 13px;
  background-color: var(--bg-buttons);
  border-radius: 7px;
  color: var(--text-buttons);
  font-size: 3.3rem;
}

.pContacto {
  color: var(--texto);
  font-size: 18px;
  padding: 19px 15px;
  line-height: 1.6rem;
  text-align: start;
  width: 90%;
}

.divContactoForm {
  width: 50%;
  height: 60%;
}

/*div email y cel*/
.divEmailCel {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/*icono email y cel en contacto*/
.fa-sq-ph2,
.fa-envelope {
  color: var(--texto);
  font-size: 28px;
  padding-right: 10px;
}

.fa-sq-ph2:hover {
  color: var(--texto);
  transform: none;
}

/*letra email*/
.font-bold {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto);
  display: flex;
  align-items: center;
}

/*********************************************************  Formulario *******************************************/
form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.contacto-datos {
  background-color: var(--background);
  color: var(--texto);
  border: solid 1px var(--texto);
  font-size: 1rem;
  padding: 11px 8px;
  border-radius: 7px;
  width: 100%;
  outline: none;
}

.contacto-datos:active,
.contacto-datos:focus {
  border: solid 2px var(--texto);
  color: var(--texto);
}

/*ingrese su mensaje */
textarea {
  height: 150px;
}

/*boton enviar */
.submit-contacto {
  background-color: var(--bg-buttons);
  font-size: 1.5rem;
  border-radius: 7px;
  padding: 19px 0px;
  color: var(--texto);
  width: 100%;
  cursor: pointer;
  transition: 0.3;
}

.submit-contacto:hover {
  transform: scale(1.05);
}

/*oculto enlace a que permite enviar el form a mi correo(HTML: esta luego de cerrar el form) */
/*el click se da automaticamente a travez de J S */
#emailJS {
  opacity: 0;
  cursor: default;
}

/* *********************************************************  footer ********************************************* */
footer {
  width: 100%;
  height: 55vh;
  padding-top: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 2px solid var(--texto);
}

footer h2 {
  margin-bottom: 31px;
  color: var(--texto);
  font-size: 2.2rem;
  font-weight: 600;
}

/*btn contactame footer */
.aFooter {
  margin-bottom: 40px;
  padding: 18px 43px;
  background-color: var(--bg-buttons);
  color: var(--text-buttons);
  font-size: 23px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 6px;
}

.aFooter:hover {
  transform: scale(1.1);
}

footer p {
  margin-bottom: 28px;
  color: var(--texto);
  font-weight: 100;
  font-size: 15px;
}

.ulBtnsContactoFooter {
  margin-bottom: 15px;
  display: flex;
  gap: 18px;
}

.font-boldFooter {
  padding-left: 107px;
  text-align: start;
  width: 100%;
}