*{/*valores universales que afectan a toda la web*/
	margin: 0;
	padding: 0;
}

body{/*queafecta al body de todas las páginas de la web*/
	min-width: 320px;/*ancho mínimo de la página web*/
}

/*-----Página de inicio-----*/

.inicio{ /* imagen de fondo de la página de inicio */
	background: url("../img/fondo3.jpg");	
}
.contenido{/* valores que afectan a todo el contenido de la página de inicio */
    margin-top: 34vh;/* margen superior */
    padding: 10px 10px;/* primer valor afecta en la parte superior e inferior, y el segundo valor afecta en la izquierda y derecha,(espacio entre los bordes del contenedor y su contenido)*/
    display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
    justify-content: center;/*los elementos se centran en el eje principal*/
    align-items: center;/*los elementos se posicionan en el centro del contenedor*/
    flex-direction: column;/* se define el eje en el que se colocan los objetos */
}
.cosas{/*afecta a los elementos que contengan la clase .cosas*/
	text-transform: uppercase; /* hace que las letras se pongan en mayúsculas */
	font-family:'Unbounded', cursive;/*tipo de fuente tipográfica en el que estará escrito*/
	font-weight: 600px;/* el peso de la fuente */
    font-size: 2em;/*el tamaño de la fuente*/
    margin-bottom: 45px; /* margen inferior */
    color: tomato;/*color de la tipografía*/
}

.entrada{/*afecta a los elementos que contengan la clase .entrada*/
	text-transform: uppercase; /* hace que las letras se pongan en mayúsculas */
	font-family:'Unbounded', cursive;/*tipo de fuente tipográfica en el que estará escrito*/
	font-weight: 600px;/* el peso de la fuente */
    font-size: 6em;/*el tamaño de la fuente*/
    margin-bottom: 100px;/* margen inferior */
    text-align: center;/*alinea el texto en el centro*/  
}

.entrada::before{ /* pseudo-elemento que inserta contenido antes del contenido del elemento .entrada */
	content: ''; /*el contenido del pseudo-elemento, será el que aparezca entre ''*/
	animation: changingtext 4s linear infinite; /*animación que cambiará el texto de forma linear cada 4 segundos, tendrá una duración infinita*/
}
/*keyframes que regulan la animación*/
@keyframes changingtext{ 
	0%{ /*palabra que aparece al principio de la animación*/
		content: 'Diseño Gráfico';/*palabra que aparece en el 0%*/
		color: yellowgreen;/*color de la palabra*/
	}
	25%{
		content: 'Diseño Web';/*palabra que aparece en el 25%*/
		color: yellowgreen;/*color de la palabra*/
	}
	50%{
		content: 'Diseño UI/UX';/*palabra que aparece en el 50%*/
		color: yellowgreen;/*color de la palabra*/
	}
	75%{
		content: 'Marketing Digital';/*palabra que aparece en el 50%*/
		color: yellowgreen;/*color de la palabra*/
	}
	100%{/*palabra que aparece al final de la animación, es la misma que la primera, para que la animación sea fluida y no se crucen dos plalabras diferentes*/
		content:'Diseño Gráfico' ;/*palabra que aparece en el 100%*/
		color: yellowgreen;/*color de la palabra*/
	}
}
/*-----Sección Sobre mi-----*/

/*Sobre mi*/

.sobremi{/* imagen de fondo de la página sobre mi */
	background: url("../img/fondo3.jpg");/* imagen de fondo de la página de sobre mi */
}
.seccion-sobremi{/* valores que afectan a la disposición de los elementos que pertenezcan a esta clase */
	display: grid;/*con grid se establece una cuadrícula con items en bloque*/
	grid-template-columns: repeat(2, 1fr);/*con esta propiedad indicamos que se repita dos veces con 1fr de tamaño, es decir,una parte del tamaño disponible*/
    /*padding: 100px 192px ;*/
}
.informacion{/* seleccionamos el elemento que contenga esta clase */
	width: 70%;/*ocupa el 70% de ancho*/
	margin-left: 10vw;/*margen de su lado izquierdo*/
}
.titulo-sobremi{/* seleccionamos el elemento que contenga esta clase */
	font-family:'Unbounded', cursive;/*fuente tipográfica aplicada*/
	font-weight: 600px;/*peso de la tipografía*/
	text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
    font-size: 3em;/*tamaño de la tipografía*/
    margin-bottom: 100px;/*margen inferior*/
    margin-top: 40px;/*margen superior*/
    color: yellowgreen;/*color de la tipografía*/
}
.informacion p{/*seleccionamos el elemento p que este dentro del elemento con clase .información */
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
    font-size: 1.2em;/*tamaño de la tipografía*/
    line-height: 2rem;/*altura del interlineado*/
    margin-top: 10px;/*margen superior*/
    margin-bottom:30px;/*margen inferior*/
  	width: 70%;/*ocupa el 70% de ancho*/
}
.cont-img-sobremi{/* seleccionamos el elemento con esta clase */
	width: 60%;/*ocupa el 60% de ancho*/
  	margin-left: 10vw;/*margen de su lado izquierdo*/
  	margin-top: 5vh;/*margen superior*/
}
.img-sobremi{/* seleccionamos el elemento con esta clase */
    width: 420px;/*tamaño de ancho*/
    height: 590px;/*tamaño de alto*/
    display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
	margin: 30px auto; /* primer valor afecta en la parte superior e inferior, y el segundo valor afecta en la izquierda y derecha */ 
    object-fit: cover;/* la imagen llena el contenedor manteniendo su relación de aspecto*/
}
.boton{/* seleccionamos el elemento con esta clase */
	padding: 10px 20px;/* primer valor afecta en la parte superior e inferior, y el segundo valor afecta en la izquierda y derecha,(espacio entre los bordes del contenedor y su contenido) */
    background:tomato;/*color del botón*/
    color: white;/*color de la tipografía*/
    border: none;/*no tiene borde*/
    font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
    font-size: 1em;/*tamaño de la tipografía*/
    text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
    cursor: pointer;/*el cursor es un puntero, el cual indica un enlace*/
    border-radius: 5px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
    text-decoration: none;/*ninguna decoración de texto*/
}

/*Habilidades*/

.seccion-habilidades{/* seleccionamos el elemento con esta clase */
	display: grid;/*con grid se establece una cuadrícula con items en bloque*/
	grid-template-columns: repeat(2, 1fr);/*con esta propiedad indicamos que se repita dos veces con 1fr de tamaño, es decir,una parte del tamaño disponible*/
}
.contenido-habilidades{/* seleccionamos el elemento con esta clase */
	width: 70%;/*ocupa el 70% de ancho en base a su elemento padre*/
	margin-left: 10vw;/*margen de su lado izquierdo*/
}

.titulo-habilidades{/* seleccionamos el elemento con esta clase */
	font-family:'Unbounded', cursive;/*fuente tipográfica aplicada*/
	font-weight: 600px;/*peso de la tipografía*/
	text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
    font-size: 3em;/*tamaño de la tipografía*/
    margin-bottom: 100px;/*margen inferior*/
    margin-top: 80px;/*margen superior*/
    color: yellowgreen;/*color de la tipografía*/
}

.texto-habilidades{/* seleccionamos el elemento con esta clase */
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
    font-size: 1.2em;/*tamaño de la tipografía*/
    line-height: 2rem;/*altura del interlineado*/
}

.lista-habilidades {/* seleccionamos el elemento con esta clase */
	list-style: none;/*no mostrar ningún marcador en los elementos de la lista*/
	width: 60%;/*ocupa el 60% de ancho en base a su elemento padre*/
  	display: grid;/*con grid se establece una cuadrícula con items en bloque*/
  	gap: 15px;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
  	margin-left: 10vw;/*margen de su lado izquierdo*/
  	margin-top: 5vh;/*margen superior*/
}
.lista-habilidades:first-child{/* seleccionamos al primer hijo del elemento con clase .lista-habilidades */
	margin-top: 140px;/*margen superior*/
}
.lista-habilidades:last-child{/* seleccionamos al último hijo del elemento con clase .lista-habilidades */
	margin-bottom: 50px;/*margen inferior*/
}

.item-habilidades .wrapper {/* seleccionamos al elemento con clase .wrapper que está dentro del elemento con clase .item-habilidades */
 	display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
  	justify-content: space-between;/*los elementos se ditribuyen de manera uniforme en el eje principal, estando el primer elemento alineado con el borde de inicio y, el último elemento alineado con el borde del final*/
  	align-items: center;/*los elementos se posicionan en el centro del contenedor*/ 
}

.habilidad-nombre,
.data-habilidades {/* seleccionamos dos elementos con clases diferentes a los que les vamos aplicar los mismos valores */
  	color: tomato;/*color de la tipografía*/
  	font-size: 1em;/*tamaño de la fuente*/
  	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
 	font-weight: 400px;/*peso de la tipografía*/
}

.caja-progreso-habilidades {/* seleccionamos el elemento con esta clase */
  	background-color: darkgray;/*color del elemento*/
  	height: 8px;/*tamaño de alto*/
  	border-radius: 2px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
}

.progreso-habilidades {/* seleccionamos el elemento con esta clase */
  	background-color: tomato;/*color del elemento*/
  	height: 100%;/*ocupa el 100% de alto*/
  	border-radius: inherit;/* inherit: que debe heredar el valor de su elemento principal, en este caso, de .caja-progreso-habilidades. Hereda el border-radius, que define el radio en las esquinas*/
}

/*Servicios*/

.contenedor-servicios{/* seleccionamos el elemento con esta clase */
	margin-left: 10vw;/*margen de su lado izquierdo*/
	margin-bottom: 40px;/*margen inferior*/
}
.titulo-servicios{/* seleccionamos el elemento con esta clase */
	font-family:'Unbounded', cursive;/*fuente tipográfica aplicada*/
	font-weight: 600px;/*peso de la tipografía*/
	text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
    font-size: 3em;/*tamaño de la tipografía*/
    margin-bottom: 100px;/*margen inferior*/
    margin-top: 105px;/*margen superior*/
    color: yellowgreen;/*color de la tipografía*/
}
.contenido-servicios{/* seleccionamos el elemento con esta clase */
	width: 90%;/*ocupa el 90% de ancho*/
	align-items: center;/*los elementos se posicionan en el centro del contenedor*/
	display: grid;/*con grid se establece una cuadrícula con items en bloque*/
	grid-template-columns: repeat(4, 1fr);/*con esta propiedad indicamos que se repita dos veces con 1fr de tamaño, es decir,una parte del tamaño disponible*/
	gap: 2em;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
}
.caja-servicios{/* seleccionamos el elemento con esta clase */
	display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
	flex-direction: column;/*los elementos flexibles se disponen verticalmente, en columna*/
	align-items: center;/*los elementos se posicionan en el centro del contenedor*/
	text-align: center;/*alinea el texto en el centro*/
	padding: 15px;/*valor que afecta a los 4 lados, (espacio entre los bordes del contenedor y su contenido)*/
	background: white;/*color del elemento*/
	border-radius: 6px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);/*se definen dos sombras, separadas por comas*/
	transition: 0.5s all cubic-bezier(0.075,0.82,0.165,1);/*transición: duración/ todas las propiedades tendrán un efecto de transición/ velocidad de la animación*/
}
.caja-servicios:hover{/*cuando el usuario se desplaze sobre el elemento .caja-servicios*/
	transform: scale(1.05);/*multiplica el ancho y alto del elemento por el valor*/
	transition: 0.5s all cubic-bezier(0.075,0.82,0.165,1);/*transición: duración/ todas las propiedades tendrán un efecto de transición/ velocidad de la animación*/
}
/*.simbolo-servicios{
	
}*/
.caja-servicios h2{/* seleccionamos el h2 que está dentro del elemento con clase .caja-servicios*/
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
    font-size: 1.2em;/*tamaño de la tipografía*/
    line-height: 2rem;/*altura del interlineado*/
    margin: 8px 0;/*margen, primer valor afecta arriba y abajo, el segundo valor afecta a la izquierda y a la derecha*/
	color: tomato;/*color de la tipografía*/
	text-transform: uppercase;/*hace que se transforme a mayúsculas*/
}
.caja-servicios p{/* seleccionamos el p que está dentro del elemento con clase .caja-servicios*/
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/ 
	font-weight: 400px;/*peso de la tipografía*/
	font-size: 0.9em;/*tamaño de la tipografía*/
}


/*-----Sección Trabajos-----*/

.trabajos{
	background: url("../img/fondo3.jpg");/* imagen de fondo de la página de trabajos */
}

.titulo-trabajos{/* seleccionamos el elemento con esta clase */
	font-family:'Unbounded', cursive;/*fuente tipográfica aplicada*/
	font-weight: 600px;/*peso de la tipografía*/
	font-size: 3em;/*tamaño de la tipografía*/
	text-align: center ;/*alinea el texto en el centro*/
	margin-top: 100px;/*margen superior*/
	color: yellowgreen;/*color de la tipografía*/
}
.cara-titulo{/* seleccionamos el elemento con esta clase */
	color: tomato;/*color del elemento*/
}
.seccion-trabajo{/* seleccionamos el elemento con esta clase */
    width: 100%;/*ocupa el 100% de ancho*/
    margin: 100px 0px;/*margen, primer valor afecta arriba y abajo, el segundo valor afecta a la izquierda y a la derecha*/
    display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
    justify-content: center;/*los elementos se centran en el eje principal*/
    align-items: center;/*los elementos se posicionan en el centro del contenedor*/   
}

.contenedor-trabajo{/* seleccionamos el elemento con esta clase */
    width: 100%;/*ocupa el 100% de ancho*/
    display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
    flex-wrap: wrap;/*los elementos son colocados en varias lineas*/
    gap: 10px;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
    position: relative;/*toma como referencia su posición original dentro del flujo normal*/
    justify-content: center;/*los elementos se centran en el eje principal*/
}
.card-trabajo{/* seleccionamos el elemento con esta clase */
    width: 250px;/*tamaño de ancho*/
    height: 250px;/*tamaño de alto*/
    overflow: hidden;/*si es necesario, el contenido se recorta para adaptarse al contenedor*/
    display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
    background: #ebebeb;/*color del elemento*/
    transition: 0.5s;/*transition: duración*/
    border-radius: 5px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
    position: relative;/*toma como referencia su posición original dentro del flujo normal*/
}

.miniatura-trabajo{/* seleccionamos el elemento con esta clase */
    width: 100%;/*ocupa el 100% de ancho*/
    position: relative;/*toma como referencia su posición original dentro del flujo normal*/
    border-radius: 5px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
    overflow: hidden;/*si es necesario, el contenido se recorta para adaptarse al contenedor*/
}
.cerrar-boton{/* seleccionamos el elemento con esta clase */
    position: absolute;/*toman como referencia el primer ancestro relativo que tengan, si no tienen ninguno, su referencia será el body*/
    top: 20px;/*valor que determina la posición del elemento*/
    left: 20px;/*valor que determina la posición del elemento*/
    width: 20px;/*tamaño de ancho*/
    cursor: pointer;/*el cursor es un puntero, el cual indica un enlace*/
    display: none;/*no se muestra*/
}

.imagen-trabajo{/* seleccionamos el elemento con esta clase */
    width: 100%;/*ocupa el 100% de ancho*/
    height: 100%;/*ocupa el 100% de alto*/
    object-fit: cover;/* la imagen llena el contenedor manteniendo su relación de aspecto*/
}

.card-trabajo.active{/* cuando .card-trabajo este activa*/
    border: 1px solid #cecece;/*border: ancho estilo color*/
}

.wrapper-trabajo{/* seleccionamos el elemento con esta clase */
    transition: 1s;/*transition: duración*/
}
.card-trabajo.blur{ /* filtro que se aplicará sobre el resto de .card-trabajo cuando una de ellas este activa */
    filter: blur(5px);/*aplica un filtro de desenfoque*/
}

.card-trabajo.active .wrapper-trabajo{/* seleccionamos .wrapper-trabajo cuando card-trabajo este activa*/
    position: fixed;/*toma como referencia la ventana del navegador*/
    top: 0;/*valor que determina la posición del elemento*/
    left: 0;/*valor que determina la posición del elemento*/
    z-index: 2;/*determina que elemento se ver por delante de los demás, el elemento que tenga el número mayor, se verá por delante del resto*/
    width: 100%;/*ocupa el 100% de ancho*/
    height: 100vh;/*tamaño de alto*/
    display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
    justify-content: center;/*los elementos se centran en el eje principal*/
    align-items: center;/*los elementos se posicionan en el centro del contenedor*/
    gap: 20px;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
    background: rgba(0,0,0, 0.1);/*color de fondo*/
}

.card-trabajo.active .miniatura-trabajo{/* seleccionamos .miniatura-trabajo cuando .card-trabajo este activa*/
    width: 450px;/*tamaño de ancho*/
    height: 450px;/*tamaño de alto*/
}

.card-trabajo.active .cerrar-boton{/* seleccionamos .cerrar-boton cuando .card-trabajo este activa*/
    display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
}

.card-trabajo.active .tags{/* seleccionamos .tags cuando .card-trabajo este activa*/
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
    position: absolute;/*toman como referencia el primer ancestro relativo que tengan, si no tienen ninguno, su referencia será el body*/
    bottom: 10px;/*valor que determina la posición del elemento*/
    z-index: 2;/*determina que elemento se ver por delante de los demás, el elemento que tenga el número mayor, se verá por delante del resto*/
    left: 10px;/*valor que determina la posición del elemento*/
    color: white;/*color de la tipografía*/
    opacity: 0.9;
}

.cuerpo-trabajo{/* seleccionamos el elemento con esta clase */
    display: none;/*no se muestra*/
}

.card-trabajo.active .cuerpo-trabajo{/* seleccionamos .cuerpo-trabajo cuando .card-trabajo este activa*/
    display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
    width: 450px;/*tamaño de ancho*/
    height: 450px;/*tamaño de alto*/
    background: white;/*color del elemento*/
    border-radius: 5px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
    margin-right: 10px ;/*margen de su lado derecho*/
    border: 1px solid #cecece;/*border: ancho estilo color*/
}

.nombre-trabajo{/* seleccionamos el elemento con esta clase */
	font-family:'Unbounded', cursive;/*fuente tipográfica aplicada*/
	font-weight: 600px;/*peso de la tipografía*/
    font-size: 2em;/*tamaño de la tipografía*/
    margin-top: 30px;/*margen superior*/
    margin-left: 20px;/*margen de su lado izquierdo*/
    text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
}

.detalle-trabajo{/* seleccionamos el elemento con esta clase */
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
    font-size: 16px;/*tamaño de la tipografía*/
    line-height: 20px;/*altura del interlineado*/
    margin: 20px 20px;/*margen, primer valor afecta arriba y abajo, el segundo valor afecta a la izquierda y a la derecha*/
}

.cuerpo-trabajo .btn{/* seleccionamos .btn que está dentro de .cuerpo-trabajo*/
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
	color: black;/*color de la tipografía*/
    display: inline-block;
    margin-top: 10px;/*margen superior*/
    margin-left: 20px;/*margen de su lado izquierdo*/   
}


/*-----Sección Contacto-----*/

.seccion-contacto{/* seleccionamos el elemento con esta clase */
	padding: 10vw;/*valor que afecta a los 4 lados, (espacio entre los bordes del contenedor y su contenido)*/
	align-items: center;/*los elementos se posicionan en el centro del contenedor*/
}
.titulo-contacto{/* seleccionamos el elemento con esta clase */
	font-family:'Unbounded', cursive;/*fuente tipográfica aplicada*/
	font-weight: 600px;/*peso de la tipografía*/
	font-size: 3em;/*tamaño de la tipografía*/
	text-align: center;/*alinea el texto en el centro*/
	margin-top: 100px;/*margen superior*/
	color: yellowgreen;/*color de la tipografía*/
}
.forma{/* seleccionamos el elemento con esta clase */
    width: 750px;/*tamaño de ancho*/
    margin: auto;/*margen, lo centra*/
    margin-top: 50px;/*margen superior*/
    padding: 10px 20px;/* primer valor afecta en la parte superior e inferior, y el segundo valor afecta en la izquierda y derecha,(espacio entre los bordes del contenedor y su contenido)*/
    box-sizing: border-box;/*padding y border forman parte del cálculo del ancho de la caja y no se suma posteriormente*/
    background: white;/*color del objeto*/
	border-radius: 6px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);/*se definen dos sombras, separadas por comas*/
}
.txt{/* seleccionamos el elemento con esta clase */
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/
	font-size: 1.4em;/*tamaño de la tipografía*/
	text-transform: lowercase;/*hace que la palabra se ponga en minúsculas*/
	color: tomato;/*color de la tipografía*/
	border-right: .15em solid #18BDEC;/*borde del lado derecho, border: ancho estilo color*/
	width: 0;/*ancho del elemento, ya que al principio de la animaciómn su ancho será ese*/
	overflow: hidden;/*si es necesario, el contenido se recorta para adaptarse al contenedor*/
	white-space: nowrap;/*los espacios en blanco se contraen en uno, no hay saltos de línea*/
	animation: typing 4s steps(38) 1s 1 normal both ,blink 1s steps(1) infinite;/*se definen dos animaciones distintas, en ambas se especifican los valores deseados de las animaciones*/
} 
@keyframes typing{/*primera animación que define el ancho al principio y al final de la animación*/
	from{
		width: 0;
	}
	to{
		width: 60%;
	}
}
@keyframes blink{/*segunda animación que define el border-color en el 50% de la animación*/
	50%{
		border-color: transparent;/*color del borde*/
	}
}

input, textarea{/* seleccionamos estos dos elementos*/
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/ 
	font-weight: 400px;/*peso de la tipografía*/
    width: 100%;/*ocupa el 100% de ancho*/
    height: 4vh;/*tamaño de alto*/
    padding: 10px;/*valor que afecta a los 4 lados, (espacio entre los bordes del contenedor y su contenido)*/
    box-sizing: border-box;/*padding y border forman parte del cálculo del ancho de la caja y no se suma posteriormente*/
    background-color:white;/*color de fondo*/
    border: 1px solid tomato;/*border: ancho estilo color*/
    border-radius: 5px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
    margin: 10px 0;/*margen, primer valor afecta arriba y abajo, el segundo valor afecta a la izquierda y a la derecha*/
    outline: none;/*sin perfiles*/
}

::placeholder{/*pseudo-elemento que representa el texto provisional*/
    color: tomato;/*color de la tipografía*/
    text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
}

textarea{/* seleccionamos el elemento*/
    height: 10vh;/*tamaño de alto*/
    font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 400px;/*peso de la tipografía*/   
}

.enviar-btn{/* seleccionamos el elemento con esta clase */
	width: 100%;/*ocupa el 100% de ancho*/
    padding: 10px 20px;/* primer valor afecta en la parte superior e inferior, y el segundo valor afecta en la izquierda y derecha,(espacio entre los bordes del contenedor y su contenido)*/
    background: tomato;/*color del botón*/
    font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
    color: white;/*color de la tipografía*/
    border: none;/*sin borde*/
    font-size: 1em;/*tamaño de la tipografia*/
    text-transform: capitalize;/*primera letra de cada palabra en mayúsculas*/
    cursor: pointer;/*el cursor es un puntero, el cual indica un enlace*/
    border-radius: 5px;/*define el radio en las esquinas, es decir, redondea las esquinas*/
    margin-top: 20px;/*margen superior*/
}

/*menú de navegación*/

.titulo{/* seleccionamos el elemento con esta clase */
	font-family:'Montserrat', sans-serif;/*fuente tipográfica aplicada*/
	font-weight: 600;/*peso de la tipografía*/
	font-size: 1.5em;/*tamaño de la tipografía*/
	color: tomato;/*color de la tipografía*/
	cursor: pointer;/*el cursor es un puntero, el cual indica un enlace*/
	text-decoration: none;/*ninguna decoración de texto*/
}
header{/* seleccionamos el elemento*/
	padding: 20px;/*valor que afecta a los 4 lados, (espacio entre los bordes del contenedor y su contenido)*/
	display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
	justify-content: space-between;/*los elementos se ditribuyen de manera uniforme en el eje principal, estando el primer elemento alineado con el borde de inicio y, el último elemento alineado con el borde del final*/
	align-items: center;/*los elementos se posicionan en el centro del contenedor*/
	font-family: 'Montserrat', sans-serif;/*fuente tipográfica aplicada*/	
}
nav ul{
	list-style: none;/*no mostrar ningún marcador en los elementos de la lista*/
	display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
}
nav li:not(:last-child){
	margin-right: 20px;/*margen del lado derecho*/
}
nav a{
	font-size: 1.2em;/*tamaño de la tipografía*/
	color: tomato;/*color de la tipografía*/
	text-decoration: none;/*ninguna decoración de texto*/
	font-weight: 600;/*peso de la tipografía*/
}

.abrir,.cerrar{/* seleccionamos los elementos con estas clases */
	display: none;/*no se muestra*/
}



@media screen and (max-width:1060px){/*tendrá efecto si el ancho máximo de la pantalla del navegador/dispositivo es 1060px */
	
	/*inicio*/
	.entrada{/* seleccionamos el elemento con esta clase */
		font-size: 5em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}
	.cosas{/* seleccionamos el elemento con esta clase */
		font-size: 1.8em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}

	/*sobre mi*/
	
	.informacion{/* seleccionamos el elemento con esta clase */
		width: 100%;/*ocupa el 100% de ancho*/
	}
	.cont-img-sobremi{/* seleccionamos el elemento con esta clase */
		width: 80%;/*ocupa el 80% de ancho*/
	}
	.img-sobremi{/* seleccionamos el elemento con esta clase */
		margin-top: 180px;/*margen superior*/
		margin-left: 2px ;/*margen de su lado izquierdo*/
		margin-right: 0;/*margen de su lado derecho*/
		height:500px ;/*tamaño de alto*/
		width: 350px;/*tamaño de ancho*/
	}
	.lista-habilidades:first-child{/*seleccionamos al primer hijo del elemento con clase .lista-habilidades*/
		margin-top: 200px;/*margen superior*/
	}
	/*trabajos*/

	.titulo-trabajos{/* seleccionamos el elemento con esta clase */
		font-size: 2.5em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}
	.seccion-trabajo{/* seleccionamos el elemento con esta clase */
		flex-direction: column;/*los elementos flexibles se disponen verticalmente, en columna*/
		align-items: center;/*los elementos se posicionan en el centro del contenedor*/
		gap: 20px;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
	}
}

@media screen and (max-width:750px){/*tendrá efecto si el ancho máximo de la pantalla del navegador/dispositivo es 750px */

	/*menú de navegación*/
	nav{/* seleccionamos el elemento*/
		position: fixed;/*toma como referencia la ventana del navegador*/
		top: -100vh;/*valor que determina la posición del elemento*/
		left: 0;/*valor que determina la posición del elemento*/
		padding: 20px;/*valor que afecta a los 4 lados, (espacio entre los bordes del contenedor y su contenido)*/
		width: calc(100% - 40px);/*ocupará el 100% del espacio menos 40px*/
		height: calc(100vh - 40px);/*ocupará el 100% del espacio menos 40px*/
		background-color: tomato;/*color de fondo*/
		transition: top 0.9s;/*transition: nombre de la propiedad y duración*/
		z-index: 1;/*determina que elemento se ver por delante de los demás, el elemento que tenga el número mayor, se verá por delante del resto*/
	}
	.desplegado{/* seleccionamos el elemento con esta clase */
		top: 0;/*valor que determina la posición del elemento*/
	}
	nav ul{/*seleccionamos la ul que está dentro del nav*/
		display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
	}
	nav li:not(:last-child){/*selecccionamos los li del nav que no sean último hijo*/
		margin-right: 0;/*margen de su lado derecho*/
	}
	nav li:not(:first-child){/*selecccionamos los li del nav que no sean primer hijo*/
		margin-top: 20px;/*margen superior*/
	}
	nav a{/*seleccionamos los a que está dentro del nav*/
		color: white;/*color de la tipografía*/
		font-size: 2.5em;/*tamaño de la tipografía*/
	}
	button{/* seleccionamos el elemento*/
		-webkit-appearance:none;/*elimina los valores de webkit*/
		appearance: none;/*no se aplica ningún estilo*/
		background-color: transparent;/*color de fondo del botón*/
	}
	.cerrar{/* seleccionamos el elemento con esta clase */
		display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
		border: none;/*sin borde*/
		font-size: 2em;/*tamaño de la tipografía*/
		color: white;/*color de la tipografía*/
		position: absolute;/*toman como referencia el primer ancestro relativo que tengan, si no tienen ninguno, su referencia será el body*/
		top: 20px;/*valor que determina la posición del elemento*/
		right: 20px;/*valor que determina la posición del elemento*/
		cursor: pointer;/*el cursor es un puntero, el cual indica un enlace*/
	}
	.abrir{/* seleccionamos el elemento con esta clase */
		display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
		position: absolute;/*toman como referencia el primer ancestro relativo que tengan, si no tienen ninguno, su referencia será el body*/
		top: 20px;/*valor que determina la posición del elemento*/
		right: 20px;/*valor que determina la posición del elemento*/
		border: none;/*sin borde*/
		width: 30px;/*tamaño de ancho*/
		padding: 5px 5px 0;/* primer valor afecta en la parte superior, el segundo valor afecta en la izquierda y derecha, y el tercer valor afecta a la parte inferior(espacio entre los bordes del contenedor y su contenido)*/
		cursor: pointer;/*el cursor es un puntero, el cual indica un enlace*/
	}
	.abrir span{/*seleccionamos el elemento span que este dentro del elemento con clase .abrir */
		display: block;/*elemento bloque que ocupa el ancho máximo disponible*/
		height: 3px;/*tamaño de altura*/
		background-color: tomato;/*color*/
		margin-bottom: 5px;/*margen inferior*/
	}
	
	/*inicio*/
	.entrada{/* seleccionamos el elemento con esta clase */
		font-size: 3.5em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}
	.cosas{/* seleccionamos el elemento con esta clase */
		font-size: 1.5em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}

	/*sobre mi*/
	.seccion-sobremi{/* seleccionamos el elemento con esta clase */
		display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
		flex-direction: column-reverse;/*los elementos flexibles se disponen verticalmente, en columna pero en dirección opuesta*/
	}
	.informacion p{/*seleccionamos el elemento p que este dentro del elemento con clase .información */
		width: 70%;/*ocupa el 70% de ancho*/
	}
	
	.img-sobremi{/* seleccionamos el elemento con esta clase */
		margin-top: 0;/*margen superior*/
		margin-left: 100px;/*margen de su lado izquierdo*/
		height:430px ;/*tamaño de alto*/
		width: 300px;/*tamaño de ancho*/
	}
	.seccion-habilidades{/* seleccionamos el elemento con esta clase */
		display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
		flex-direction: column;/*los elementos flexibles se disponen verticalmente, en columna*/
	}
	
	.titulo-habilidades{/* seleccionamos el elemento con esta clase */
		width: 100%;/*ocupa el 100% de ancho*/
	}
	.texto-habilidades{/* seleccionamos el elemento con esta clase */
		width: 100%;/*ocupa el 100% de ancho*/
	}
	.lista-habilidades:first-child{/*seleccionamos al primer hijo del elemento con clase .lista-habilidades*/
		margin-top: 80px;/*margen superior*/
	}
	.lista-habilidades{/* seleccionamos el elemento con esta clase */
		align-items: center;/*los elementos se posicionan en el centro del contenedor*/
		margin-left:15vw ;/*margen de su lado izquierdo*/
	}
	
	.contenido-servicios{/* seleccionamos el elemento con esta clase */
		display: flex;/*propiedad que establece este elemento como un contenedor flex, es decir, que permite un diseño flexible pudiendo ser alineado y distribuido*/
		flex-direction: column;/*los elementos flexibles se disponen verticalmente, en columna*/
	}

	/*trabajos*/

	.titulo-trabajos{/* seleccionamos el elemento con esta clase */
		font-size: 2em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}
	.wrapper-trabajo{/* seleccionamos el elemento con esta clase */
		flex-direction: column;/*los elementos flexibles se disponen verticalmente, en columna*/
		gap: 5px;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
	}
	.card-trabajo.active .miniatura-trabajo{/* seleccionamos .miniatua-trabajo cuando .card-trabajo este activa*/
		width: 300px;/*tamaño de ancho*/
		height: 200px;/*tamaño de alto*/
	}
	.card-trabajo.active .cuerpo-trabajo{/* seleccionamos .cuerpo-trabajo cuando .card-trabajo este activa*/
		height: auto;/* el elemento ajustará su altura automáticamente con el objetivo de que su contenido se muestre de manera correcta */
		width: 300px;/*tamaño de ancho*/
	}
	.cuerpo-trabajo .btn{/* seleccionamos .btn que está dentro de .cuerpo-trabajo*/
   		margin-bottom: 10px;/*margen inferior*/
	}
	/*cotacto*/

	.forma{/* seleccionamos el elemento con esta clase */
		width: 100%;/*ocupa el 100% de ancho*/
	}
	.txt{/* seleccionamos el elemento con esta clase */
		font-size: 1em;/*tamaño de la tipografía*/
		width: 50%;/*ocupa el 50% de ancho*/
	}
	@keyframes typing{/*keyframes de la animación*/
	from{
		width: 0;/*ancho al principio de la animación*/
	}
	to{
		width: 100%;/* al final de la animación ocupa el 100% de ancho*/
	}
	}
}

@media screen and (max-width:500px){/*tendrá efecto si el ancho máximo de la pantalla del navegador/dispositivo es 500px */
	
	/*inicio*/
	.entrada{/* seleccionamos el elemento con esta clase */
		font-size: 2.2em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}
	.cosas{/* seleccionamos el elemento con esta clase */
		font-size: 1.3em;/*tamaño de la tipografía*/
		text-align: center;/*alinea el texto en el centro*/
	}
	
	.titulo-sobremi{/* seleccionamos el elemento con esta clase */
		font-size: 2em;/*tamaño de la tipografía*/
	}
	.informacion p{/*seleccionamos el elemento p que este dentro del elemento con clase .información */
		width: 70%;/*ocupa el 70% de ancho*/
	}
	.cont-img-sobremi{/* seleccionamos el elemento con esta clase */
		width: 70%;/*ocupa el 70% de ancho*/
	}
	.img-sobremi{/* seleccionamos el elemento con esta clase */
		margin: 0 10px;/*margen, primer valor afecta arriba y abajo, el segundo valor afecta a la izquierda y a la derecha*/
	}
	
	.titulo-habilidades{/* seleccionamos el elemento con esta clase */
		font-size: 2em;/*tamaño de la tipografía*/
	}
	.titulo-servicios{/* seleccionamos el elemento con esta clase */
		font-size: 2em;/*tamaño de la tipografía*/
	}
	.contenedor-servicios{/* seleccionamos el elemento con esta clase */
		width: 90%;/*ocupa el 90% de ancho*/
		align-items: center;/*los elementos se posicionan en el centro del contenedor*/
	}
	/*trabajos*/
	.titulo-trabajos{/* seleccionamos el elemento con esta clase */
		font-size: 2em;/*tamaño de la tipografía*/
	}
	.card-trabajo{/* seleccionamos el elemento con esta clase */
    	width: 200px;/*tamaño de ancho*/
    	height: 200px;/*tamaño de alto*/
    }
	.wrapper-trabajo{/* seleccionamos el elemento con esta clase */
		flex-direction: column;/*los elementos flexibles se disponen verticalmente, en columna*/
		gap: 5px;/* agrupa row-gap y column-gap, con este valor se especifica el mismo valor para ambas propiedades */
	}
	.card-trabajo.active .miniatura-trabajo{/* seleccionamos .miniatua-trabajo cuando .card-trabajo este activa*/
		width: 80%/*ocupa el 80% de ancho*/
	}
	.card-trabajo.active .cuerpo-trabajo{/* seleccionamos .cuerpo-trabajo cuando .card-trabajo este activa*/
		height: auto;/* el elemento ajustará su altura automáticamente con el objetivo de que su contenido se muestre de manera correcta */
		width: 80%;/*ocupa el 80% de ancho*/
	}
	.cuerpo-trabajo .btn{/* seleccionamos .btn que está dentro de .cuerpo-trabajo*/
    	margin-bottom: 10px;/*margen inferior*/
	}
	.nombre-trabajo{/* seleccionamos el elemento con esta clase */
		font-size: 1.5em;/*tamaño de la tipografía*/
	}
	.titulo-contacto{/* seleccionamos el elemento con esta clase */
		font-size: 2em;/*tamaño de la tipografía*/
	}
	.txt{/* seleccionamos el elemento con esta clase */
		font-size: 0.8em;/*tamaño de la tipografía*/
		width: 100%;/*ocupa el 100% de ancho*/
	}
}