/* Importa una fuente online */
@font-face {
    font-family:"fuente_online";
    src: url("https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVI.woff2");
}

/* Define las variables para los colores */
:root{
    --colorA: #ffffff;
    --colorB: #979797;
    --colorC: #000000;
    --colorD: #0196A7;
    --colorD2: #00626d;
    --colorE: #3b3b3b;
    --colorF: #C5C6C6;
    --colorG: #EEEEEE;
}

/* Estilos generales para elementos de la página */
* {
    /* Hace que se incluyan en las dimensiones de los elementos los rellenos y los bordes, pero no los margenes */
    box-sizing: border-box;
}

html{ 
    margin: 0;
    padding: 0;

}

body{
     /* Define el contenedor principal como un grid */ 
     display: grid;
     /* Define el número de filas y columnas que conforman nuestra maqueta*/
     grid-template-columns: 95%;
     grid-template-rows: auto auto auto auto auto auto auto;
     /* Define mediante areas nuestra maqueta*/
     grid-template-areas:
        "header"
        "nav"
        "zona_1"
        "zona_2"
        "zona_3"
        "zona_4"
        "footer"; 
    background-color: var(--colorG);
    max-width: 1200px;
    min-width:500px;
    margin: 0 auto;
    justify-content: center;
}

/* Tecnica para ocultar un elemento pero mantener SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

h2{
    color: var(--colorD2);
}

h4{
    font-weight: normal;
}

a{
    color: var(--colorA);
}

p, li{
    font-family: "fuente_online", serif;
    font-size: 1.1rem;
}

.tarjeta{
    box-shadow: -5px -5px 20px -5px var(--colorB), 5px 5px 20px -5px var(--colorB);
    border-radius: 15px;
}

.fondo_proyecto{
    background-color: var(--colorG);
}

.icono {
    width: 3.5rem;
    margin: 0.7rem;
}

/* Área de Cabecera ------------------ */   
header{
    grid-area:header;
}

/* Área de navegación --------------- */
nav{
    grid-area:nav;
    background-color: var(--colorD);
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}

.menu {
    display: flex;
    justify-content: space-evenly;
    width: 100%; 
}

nav a {
    display: flex;
    font-family: "fuente_online", serif;
    text-decoration: none;
    font-weight: bolder;
    font-size: 1.2rem;    
}

nav a:hover {
    color: var(--colorF);
}

.logo{
    width: 5rem;
    margin: 0.5rem;
}

.icono_idiomas{
    width: 2rem;
    margin: 0.5rem; 
}

/* Contenido */
/* Subzona de contenido 1 ------------------- */
#datos_personales{
    grid-area:zona_1;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: url("../imagenes/fondo_1.png") top center/100% 100% no-repeat;
    margin-top: 2rem; 
}

.div_presentacion {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 50%; 
}

.div_presentacion p{
    font-size: 1.6rem;   
    padding: 1rem; 
}

.div_redes {
    display: flex;
    justify-content: space-evenly;
    width: 100%; 
}

/* Iconos de redes sociales con transicion */    
.icono_redes {
    border: var(--colorA) 0.5vw solid;
    border-radius: 50%;
    width: 5rem; 
    margin: 0.5rem; 
}
        
.icono_redes:hover {
    transform: rotate(360deg);
    border-color: var(--colorD);
    /* La transición se aplica sobre todas las propiedad definidas y durará 2 segundo.*/
    transition: all 2s;
}
 
.div_animacion{
    display: flex;
    width: 50%;
}

/* Contenedor principal de las animaciones */
.div_animacion{
    background: url("../imagenes/cabeza.png") center center/40% no-repeat; 
}

.area_animacion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;
}

/* Elementos que seran animados */
.vue {
    width: 6vw;
    position:relative;    
    left: 80%;
    bottom: 60%;
    opacity:0;
}

.laravel {
    width: 6vw;
    position:relative;   
    left: 50%; 
    bottom: 20%;
    opacity:0;
}

.api {
    width: 6vw;
    position:relative;   
    left: 35%; 
    bottom: 60%;
    opacity:0;
}

.wordpress {
    width: 6vw;
    position:relative;   
    left: -80%; 
    bottom: 60%;
    opacity:0;
}

/* Define las caracteristicas de cada animación */
#vue {
    animation-name: vue;
    animation-duration: 10s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#laravel {
    animation-name: laravel;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#api {
    animation-name: api;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#wordpress {
    animation-name: wordpress;
    animation-duration: 6s;
    animation-iteration-count: 1;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

/* Define los estados de cada animación*/
@keyframes vue {
    0%   {
        }
    45% {
        bottom: 0%;
        left: -5%;
        opacity:1;
    }
    70%{
        bottom: 5%;
        left: -5%;
        opacity: 0;
    }
    100%{
        width: 0%;
    }
}

@keyframes laravel {
    0%   {
        }
    70% {
        bottom: -5%;
        left: 0%;
        opacity:1;
    }
    80% {
        bottom: 5%;
        left: 0%;
        opacity:0;
    }
    100%{
        width: 0%;
    }
}

@keyframes api {
    0%   {
        }
    70% {
        bottom: 0%;
        left: 0%;
        opacity:1;
    }
    80% {
        bottom: 5%;
        left: 0%;
        opacity:0;
    }
    100%{
        width: 0%;
    }
}

@keyframes wordpress {
    0%   {
        }
    50% {
        bottom: 5%;
        left: 0%;
        opacity:1;
    }
    70% {
        bottom: 5%;
        left: 0%;
        opacity:0;
    }
    100%{
        width: 0%;
    }
}

/* Subzona de contenido 2 -------------------- */
#habilidades {
    grid-area:zona_2;
    background-color: var(--colorA);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2.5rem;
    padding-bottom: 1rem;
}

.div_iconos{
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 90%;
    margin: 1rem;
}

/* Subzona de contenido 3 ------------------ */
#proyectos{
    grid-area:zona_3;
    background-color: var(--colorA); 
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2.5rem;
    padding-bottom: 1rem;
}

.div_proyectos{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 1rem;
    padding: 1rem;   
}

.div_proyectos > h3{
    padding-left: 1rem;
    margin-bottom: -1rem;
}

.div_proyectos > div{
    width: 100%;   
}

.div_proyecto{
    display: flex;
    width: 90%;
    margin: 1rem;
    padding: 1rem;   
}

.div_proyecto > article{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 60%;
    margin: 1rem;        
}

.div_proyecto_img{
    width: 40%;
    margin: 1rem;
    padding-top: 1rem;   
    text-align: center;
}

.proyecto_img {
    box-shadow: -5px -5px 20px -5px var(--colorB), 5px 5px 20px -5px var(--colorB);
    border: solid 3px var(--colorD);
    width: 100%;
}

/* Subzona de contenido 4 ------------------ */
#empresas{
    grid-area:zona_4;
    background-color: var(--colorA); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 2.5rem;
    padding-bottom: 1rem;
}

/* Pie de página -------------------------- */
footer{
    grid-area:footer;
    background-color: var(--colorD);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--colorA);
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Adaptación a la resolución de la pantalla -------------  */ 
@media screen and (max-width:900px) {
   
    nav a{
          font-size: 1rem;    
    }

    #datos_personales{
        flex-direction: column-reverse;
    }

    .div_presentacion {
        width: 100%;
    }

    .area_animacion{
        height: 200px;
    }

    .icono{
        width: 2.9rem;
    }
    
}

@media screen and (max-width:700px) {
           
    .div_presentacion p{
        font-size: 1.2rem;
    }

    .area_animacion{
        height: 150px;
    }

    p, li{
        font-size: 1rem;
    }
    
    .icono{
        width: 2.5rem;
    }
}

@media screen and (max-width:600px) {
       
    h3{
        font-size: 1rem;
    }

    nav a{
          font-size: 0.7rem;    
    }

    .icono_redes{
        width: 4rem;
    }

    .icono{
        width: 2rem;
        margin: 0.2rem;
    }

    .div_proyecto > article{
        margin: 0.5rem;        
    }

    .div_proyecto_img{
        margin: 0.5rem; 
    }

}