*{
	opacity: 1;
	margin:0;
	overflow-x: hidden;
    overflow-y: hidden;
    padding:0;
	animation:apareciendo 6s linear;
	
}




@keyframes apareciendo{
	0%{
		background-position:0% 0%;
		opacity: 1;
	}

    50%{
        background-position:0% 50%;
		opacity: 1;
    }

	75%{
		opacity: 1;
	}
	
	85%{
		opacity: 1;
	}
	99%{
		opacity: 0;
	}
	100%{
		 
        background-repeat: no-repeat;
        background-size:cover;
        background-position:0% 100%;
        background-attachment: fixed;
		opacity:0;
	}
}







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


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



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

header{
	background-image: none;
    min-height:98vh;
    /* animation: aparecerheader 6s linear; */
}


@keyframes aparecerheader{
    0%{
        
        opacity:0.3;
    }
    50%{
        
        opacity:0.5;
    }
    
    100%{
        opacity: 1;       
    }
}




/*ESTILOS*/

header h1{
    color:white;
    text-shadow: 1px 2px 3px #0096d2,2px 3px 4px #0096d2;
	text-align: center;
	padding: 3%;
    animation:apareciendoeltitulo 6s linear;
}


/*ANIMACIÓN DE EL TÍTULO DE JAVIER APARICIO GARRIDO - BACKEN DEVELOPER */
  
@keyframes apareciendoeltitulo {
    0%{
        transform: translateY(800px); 
		transform:scale(9.5,9.5);
    }
    50%{
        transform: translateY(300px);
		
    }
    
    75%{
        transform: translateY(100px);
		color:white;
		transform:scale(2.5,2.5);
    }
	93%{
		color:white;
		transform:scale(2,2);
	}
    100%{
        transform: translateY(15px);
		transform: scale(1.2,1.2);
        
    }
}




/*ESTILOS GENERALES DEL UL*/
header #menu{
    opacity:0;
	display: flex;
	list-style: none;
	background-color:black;
    animation:apareciendoelmenu 6s linear;
}


 @keyframes apareciendoelmenu{
    0%{
        opacity:0;
       
    }
    50%{
        opacity:0;
        
    }
    99%{
        opacity:0;
    }
    100%{
        opacity:0;
        
    }
}



/*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:20%;
}


/*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{
	/*transform: scale(1.2);*/
	transform: translate(14px,20px);
	box-shadow: 1px 2px 3px orange,2px 3px 4px orange,3px 4px 5px orange,4px 5px 6px orange,5px 6px 7px orange,
	6px 7px 8px orange,7px 8px 9px orange,8px 9px 10px orange;
}



/*Estilos del bloque donde pongo mis datos de contacto Y SOBRE MI */
#contacto,
#sobremi{
	background-color: #f59622;
	box-shadow: 5px 6px 6px cyan;
	border-radius:8px 8px 0 0;
	width:50%;
	margin:0 auto;
	padding: 1.5% 2% 3% 2.9%;
	font-weight: bold;
}

#sobremi{
	width:80%;
}


/*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%;
}



/*ESTILOS DE LA INFORMACIÓN DE CONTACTO TANTO DE TELÉFONO COMO DE EMAIL COMO DE LINKEDIN*/
#telefono,
#email,
#linkedin,
#contacto a{
	margin-top:3%;
	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 DEL PIE DE PÁGINA*/
footer{
    opacity: 0;
	margin:0 auto;
	background: linear-gradient(to bottom, white,#0096d2);
	width: 96%;
	text-align: center;
	padding:15px;
	border-radius: 8px 8px 0% 0%;
	
}