styles.css

/* Fuente  */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
margin:0;
box-sizing:border-box;
font-family: 'Lato', sans-serif;
}
/*efecto de desplazamiento suave en el documento*/
html {
  scroll-behavior: smooth;
}
.titulo {
	font-family:'Rubik Dirt', cursive;
}

#inicio {
	background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url("imagenes/pexels-christina-morillo-1181675.jpg");
	background-size:cover;
	background-position:center center;	height:100vh;
}

#inicio .contenido header {
background-color: rgba(0,0,0,.8);
position:fixed;
width: 100%;
z-index:100;
top:0;
}

#inicio .contenido header .contenido-header {
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 20px;
}

#inicio .contenido header .contenido-header h1{
text-align:center;
color:#ff5080;
}


#inicio .contenido header .contenido-header nav ul{
	list-style:none;
	display:flex;
	align-items:center;
}

#inicio .contenido header .contenido-header nav ul li a{
	text-decoration:none;
	color:#fff;
	margin: 0 12px;
	font-weight: 400;
	transition: .5s;
}

#inicio .contenido header .contenido-header nav ul li a:hover{
	color: #ff5080;
}

#inicio .contenido header .contenido-header #redes a {
text-decoration:none;
color:#fff;
display:inline-block;
margin-left: 10px;
transition: .5s;
}


#inicio .contenido header .contenido-header #redes a:hover {
color:#ff5080;
}

#inicio .contenido header .contenido-header .seleccionado{
color:#ff5080;
}

#inicio .contenido .presentacion {
	max-width:1100px;
	height:100vh;
	margin:auto;
	color:#fff;
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
}

#inicio .contenido .presentacion .bienvenida {
font-size: 1.3rem;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing:5px;
}

#inicio .contenido .presentacion h2 {
font-size:3.5rem;
margin-bottom:25px;
text-align:center;
}

#inicio .contenido .presentacion h2 span {
font-size:1.25rem;
color:#ff5080;
}

#inicio .contenido .presentacion .descripcion {
max-width:700px;
margin:25px auto;
font-size:0.9rem;
text-align:center;
}

#inicio .contenido .presentacion a {
text-decoration:none;
display:inline-block;
margin: 25px;
padding: 20px 25px;
border: 2px solid #fff;
border-radius:50px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
transition:.5s;
}


#inicio .contenido .presentacion a:hover {
background-color: #ff5080;
}

#icono-nav {
color:#fff;
display:none;
}

/*seccion sobre mi*/

#sobremi {
max-width:1100px;
margin:auto;
padding:100px 15px;
color:#111135;
display:flex;
}

#sobremi .contenedor-foto{
max-width:400px;
margin-right:80px;
}

#sobremi .contenedor-foto img{
padding:20px;
width:100px;
border-radius:20px;
background-color:#f3f3f3;
}

#sobremi .sobremi{
margin:0 40px;
}

#sobremi .sobremi .titulo-seccion{
font-size:1.8rem;
text-transform:uppercase;
color:#111135;
text-decoration:underline;
text-decoration-color:#d3d3d3;
text-decoration-thickness:5px;

}


#sobremi .sobremi h2{
font-size:2.42rem;
font-weight:bold;
letter-spacing:2px;
}


#sobremi .sobremi h2 span{
color:#ff5080;
}


#sobremi .sobremi h3{
font-size:1.28rem;
font-weight:500;
text-transform:uppercase;
margin-bottom:20px;
letter-spacing:1px;
}


#sobremi .sobremi p{
font-size:1rem;
line-height:25px;
color:#565656;
margin-bottom:12px;
}


#sobremi .sobremi a{
display:inline-block;
text-decoration:none;
color:#000;
border-radius:30px;
border:1px solid #000;
margin-top:30px;
padding:10px 20px;
transition:.5s;
}


#sobremi .sobremi a:hover{
background-color:#ff5080;
color:#fff;
}


/*seccion experiencia*/

#experiencia {
padding:100px 15px;
text-align:center;
background-color:#f3f3f3;
}

#experiencia .titulo-seccion{
font-size:1.8rem;
text-transform:uppercase;
color:#111135;
text-decoration:underline;
text-decoration-color:#d3d3d3;
text-decoration-thickness:5px;
}

#experiencia .fila{
display:flex;
justify-content:space-between;
max-width:1100px;
margin:30px auto;
}

#experiencia .fila .empresa{
max-width:350px;
background-color:#fff;
padding:30px;
margin:0 5px;
border-radius:5px;
transition:.5s;
}

#experiencia .fila .empresa:hover{
box-shadow:5px 5px 10px #565656, -5px -5px 10px #8a8a8a;
}

#experiencia .fila .empresa h4{
font-size:1.57rem;
margin-bottom:25px;
}

#experiencia .fila. .empresa .icono{
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background-color:#d3d3d3;
padding:20px;
margin-bottom:25px;
}

#experiencia .fila .empresa hr{
width:30%;
margin:auto;
color:#000;
margin-bottom:25px;
}

#experiencia .fila .empresa ul{
list-style:none;
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

#experiencia .fila .empresa p{
font-size:1rem;
line-heservicios;
}

/* seccion habilidades */

.contenedor-habilidades {
	background:linear-gradient(#eb5a5acc, rgba(33,16,16,.8)), url("imagenes/pexels-snapwire-618613.jpg");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	padding:100px 0;
	text-align:center;
}

.contenedor-habilidades .habilidad {
	max-width:600px;
	margin:30px auto;
}

.contenedor-habilidades .habilidad .info {
	display:flex;
	justify-content:space-between;
}

.contenedor-habilidades .habilidad .lista {
	display:inline-block;
	margin-right:20px;
	height:10px;
	width:10px;
	background-color:#fff;
}

.contenedor-habilidades .habilidad .barra {
	background-color:#919191;
	width:100%;
	height:6px;
	margin:10px 0;
}

/*Estilo aplicado con javascript que anima la barra */
.contenedor-habilidades .habilidad .barra .barra-progreso1 {
	background-color:#fff;
	width:95%;
	height:6px;
	animation:progreso1 2s forwards;
}

.contenedor-habilidades .habilidad .barra .barra-progreso2 {
	background-color:#fff;
	width:90%;
	height:6px;
	animation:progreso2 2s forwards;
}

.contenedor-habilidades .habilidad .barra .barra-progreso3 {
	background-color:#fff;
	width:90%;
	height:6px;
	animation:progreso3 2s forwards;
}

.contenedor-habilidades .habilidad .barra .barra-progreso4{
	background-color:#fff;
	width:85%;
	height:6px;
	animation:progreso4 2s forwards;
}

/*animaciones de las barras*/
@keyframes progreso1{
0%{width:0;}
100%{width:95%;}
}

@keyframes progreso2{
0%{width:0;}
100%{width:90%;}
}

@keyframes progreso3{
0%{width:0;}
100%{width:90%;}
}

@keyframes progreso4{
0%{width:0;}
100%{width:85%;}
}

/*seccion portfolio*/

#portfolio {
	max-width:1100px;
	padding:100px 0;
	margin:auto;
}

#portfolio .titulo-seccion {
font-size:1.8rem;
text-transform:uppercase;
color:#111135;
text-decoration:underline;
text-decoration-color:#d3d3d3;
text-decoration-thickness:5px;
text-align:center;
}

#portfolio .fila {
	display:flex;
	justify-content:space-between;
	margin:30px 0;
}

#portfolio .fila .proyecto {
	max-width:450px;
	border:1px solid #000;
	margin:0 1px;
	position:relative;
	overflow:hidden;
}

#portfolio .fila .proyecto img {
	width:100%;
	height:100%;
	filter:grayscale(1);
	object-fit:cover;
	transition:.5s;
}

#portfolio .fila .proyecto:hover img {
	filter:grayscale(0);
}

#portfolio .fila .proyecto .info {
	position:absolute;
	left:0;
	background-color:rgba(0,0,0,.8);
	color:#ff5080;
	width:100%;
	padding:10px;
	opacity:0;
	bottom:-40px;
	transition:.5s;
}

#portfolio .fila .proyecto:hover .info {
	opacity:1;
	bottom:0;
}

/*seccion contacto*/

#contacto {
	padding:100px 15px;
	}

#contacto .titulo-seccion {
	margin-bottom:20px;
	font-size:1.57rem;
	text-transform:uppercase;
	color:#111135;
	text-decoration:underline;
	text-decoration-color:#d3d3d3;
	text-decoration-thickness:5px;
	text-align:center;
}

#contacto .contenedor-form {
	max-width:1100px;
	margin:auto;
}

#contacto .contenedor-form .fila {
	margin-bottom:15px;
}

#contacto .contenedor-form .mitad {
	display:flex;
	justify-content:space-between;
}

#contacto .contenedor-form input, 
#contacto .contenedor-form textarea{
	padding:20px;
	border-radius:20px;
	border:none;
	border:1px solid #919191;
}

#contacto .contenedor-form .mitad input {
	width:48%;
}


#contacto .contenedor-form .input-full {
	width:100%;
}

#contacto .btn-enviar {
	display:block;
	margin:auto;
	cursor:pointer;
	transition:.5s;
	padding:10px 15px;
	font-size:1.28rem;
	font-weight:bold;
}

#contacto .btn-enviar:hover {
	background-color:#ff5080;
	color:#fff;
}

/*footer*/
footer {
	background-color:#000;
	color:#fff;
	text-align:center;
	padding:30px 0;
}

footer a {
	text-decoration:none;
	color:#fff;
	display:inline-block;
	margin:5px;
	font-size:1.85rem;
}

/*responsive*/

@media screen and (max-width:800px){
#redes{
display:none;
}
nav{
display:none;
}
nav.responsive{
display:block;
background-color:rgba(0,0,0,.8);
width:100%;
position:absolute;
top:48px;
left:0;
padding:10px 0;
}
nav.responsive ul{
display:block !important;
text-align:center;
}
nav.responsive ul li{
margin:5px 0;
}
#icono-nav{
display:block;
}
#inicio .contenido .presentacion h2{
font-size:2.85rem;
}
#sobremi{
padding:50px 0;
display:block;
}
#sobremi .contenedor-foto{
margin:auto;
max-width:200px;
}
#sobremi .contenedor-foto img{
padding:8px;
}
#sobremi .sobremi .titulo-seccion{
text-align:center;
}
#sobremi .sobremi h2{
font-size:1.78rem;
text-align:center;
}
#experiencia{
padding:50px 15px;
}
#experiencia .fila{
display:block;
}
#experiencia .fila .empresa{
margin:10px auto;
}
.contenedor-habilidades{
padding:50px 20px;
}
#portfolio{
padding:50px 0;
}
#portfolio .fila{
display:block;
}
#portfolio .fila .proyecto{
margin:10px auto;
}
#contacto{
padding:50px 15px;
}
#contacto .contenedor-form .mitad{
margin-bottom: 15px;
display: block;
}
#contacto .contenedor-form .mitad input{
width: 100%;
margin-bottom: 15px;
}
}