/*ESTILOS GENERALES*/
*{

	margin:0;
	padding:0;
	overflow-x: hidden;
				
}





body{
	
	background-image: url("../img/programacion.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
	
}


/*CONTENEDOR PRINCIPAL DE TODO EL PORTFOLIO*/
#contenidoprincipal{
	min-height: 85vh;
	
}



/*ESTILOS DEL TÍTULO DE LA CABECERA */

header{
	background-image: url("../img/puzle_cabecera.jpg");
	background-size:cover;
}

/*ESTILOS*/

header a{
	text-decoration: none;
	color:black;
}
header h1{
	text-shadow: 1px 2px 3px #0096d2,2px 3px 4px #0096d2;
	text-align: center;
	padding: 3%;
	
}

/*ESTILOS GENERALES DEL UL*/
header #menu{
	display: flex;
	list-style: none;
	background-color:black;
}

/*ESTILOS DE LOS ELEMENTOS DEL MENÚ PRINCIPAL*/
header #menu a{
	flex-grow: 1;
	padding:2%;
	padding-right: 5%;
	padding-left: 5%;
	text-decoration: none;
	transition: all 500ms;
}

header #menu a:hover{
	color:orange;
	text-decoration:underline;
}


/*ESTILOS DE LOS ELEMENTOS LI */
header #menu a li{
	text-align: center;
	color:cyan;
	transition: all 500ms;
}

/*HOVER SOBRE EL ELEMENTO DEL MENÚ CAMBIAMOS EL TAMAÑO DEL TEXTO DEL MENÚ QUE ESTÁN CONTENIDAS EN EL ELEMENTO LI*/
header #menu a:hover li{
	color:orange;
	font-weight: bolder;
	transform: scale(1.5);  
}


/*ESTILOS DE LOS H2 QUE SON LOS TÍTULOS DE CADA SECCIÓN*/
h2{
	color:cyan;
	text-shadow: 1px 2px 3px orange,2px 3px 4px orange;
	padding: 2%;
	text-align: center;
	font-size: 250%;
}




/*ESTILOS DE LOS BLOQUES DE PROYECTOS QUE SON ENLACES*/
#misproyectos{
	display: flex;
	margin-top: 3.5%;
	justify-content: space-around;
}


#misproyectos a{
	width:22%;
}



/*ESTILOS DE LA MINIATURA DE PROYECTOS*/
#misproyectos img{
	width:100%;
	transition: all 300ms;
}

/*ESTILOS AL PONER EL CURSOR DEL RATÓN ENCIMA ( HOVER)*/
#misproyectos img:hover{
	border-radius: 100%;
	
}



/*ESTILOS DEL BLOQUE DE CONTACTO*/
#contacto{
	display: flex;
	flex-direction: column;
}



/*Estilos del bloque donde pongo mis datos de contacto Y SOBRE MI */
#contacto,
#sobremi{
	background:linear-gradient(to bottom,white,orange);
	box-shadow: 5px 6px 6px cyan;
	border-radius:8px 8px 0 0;
	width:80%;
	margin:0 auto;
	padding: 1.5% 2% 3% 2.9%;
	font-weight: bold;
}

/*DIV FLEXBOX QUE CONTIENE TANTO LA IMAGEN MÍA PROGRAMANDO COMO EL TEXTO EXPLICATIVO SOBRE MI */
#sobremi{
	display: flex;
	width:90%;
	padding-top:3%;
	margin-bottom: 3%;
}

/*IMAGEN DONDE SALGO PROGRAMANDO EN LA SECCIÓN SOBRE MÍ*/
#sobremi #yo_programando img{
	width:95%;
	flex:1;
	margin-bottom: 2%;
	box-shadow: 3px 4px 5px orange,4px 5px 6px orange;
}

/*DIV QUE CONTIENE LA IMAGEN DONDE SALGO YO PROGRAMANDO*/
#sobremi #yo_programando{
	flex: 1;
}



/*DIV QUE CONTIENE EL TEXTO DONDE EXPLICO SOBRE MÍ*/
#sobremi #texto_sobremi{
	flex:1;
	
}

#sobremi #texto_sobremi p{
	margin-bottom: 3.5%;
	font-size: 120%;
}

/*ENLACE QUE HAY DENTRO DE MI HISTORIA DE SOBRE MÍ DE MIS PROYECTOS PERSONALES */
#enlacemisproyectos{
	color: #0096d2;
	text-decoration: none;
}

#enlacemisproyectos:hover{
	text-shadow:1px 2px 3px cyan, 2px 3px 4px orange;
}






/*ESTILOS DE LOS ICONOS DE  LA FICHA DE CONTACTO(TELEFONO EMAIL Y LINKEDIN ) */
.icon-phone:before,
.icon-mail4:before,
.icon-linkedin2:before{
	font-size: 120%;
}

#contacto p{
	font-size:150%;
	width: 100%;
	flex-grow: 1;
}



/*ESTILOS DE LA INFORMACIÓN DE CONTACTO TANTO DE TELÉFONO COMO DE EMAIL COMO DE LINKEDIN*/
#telefono,
#email,
#linkedin,
#contacto a{
	height:48px;
	margin-top:2%;
	color:black;
	/*text-shadow: 1px 1px 1px #0096d2;*/
	font-weight:bold;
	
}

/*Le quitamos el subrayado de los enlaces a la dirección mia de Linkedin*/
#contacto a{
	text-decoration: none;
}


/*ESTILOS AL COLOCARNOS ENCIMA DEL ENLACE DE LINKEDIN EN EL APARTADO DE CONTACTO*/
#linkedin:hover{
	text-shadow: 1px 2px 3px #0096d2,2px 3px 4px cyan,3px 4px 5px cyan,4px 5px 6px cyan;
}




/*ESTILOS DEL PIE DE PÁGINA*/
footer{
	margin:0 auto;
	background: linear-gradient(to bottom, white,#0096d2);
	width: 96%;
	text-align: center;
	padding:15px;
	border-radius: 8px 8px 0% 0%;
	font-weight: bold;
}