:root{
    --primary-color: #083c79;
    --main-font: 'Open Sans',sans-serif;
}

*{
    box-sizing: border-box; 
    padding: 0px;
    margin: 0px;
    }

    html {
        font-size: 62.5%; 
       }
    /*Esta es una forma de optimizar el uso del rem, ya que transforma 1 rem en 10px
    por lo que 1,5rem son 15px, 2rem 20px, y asi continua.
    No lo estoy teniendo en cuenta en esta pagina porque es algo que aprendi luego 
    de hacerla.*/  

header{
    width: 100vw;
}

.main-nav{
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    padding-left: 1rem;
    padding-right: 4px;
    padding-top: 2rem;
    font-family: 'Roboto', sans-serif;
    list-style: none;
    /*el padding es una dimension interna en un contenedor, si agrego el padding le estoy agregando un espacio interno*/
    padding-left: 0px;
    background-color: var(--primary-color);
    height: 6rem;
    z-index: 2;
}

.main-nav__item{
    /*para que no sea en vertical, sino que se desplacen en horizontal*/
    /*display: inline-block;*/
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0px;
    font-size: 1.6rem;

}

.main-nav__item a {
    color: whitesmoke;
    padding: 0.5rem;
    /*el border-radius redondea las esquinas de mis botones*/
    border-radius: 0.2rem ;
    text-decoration: none;
    opacity: 90%;
}
/*accion que se realiza a todas las etiquetas "a" que estan adentro de .main-nav__item*/

.main-nav__item a:hover{
    color: white;
    opacity: 100%;
}
/*el hover es un estado, en este caso es cuando paso el mouse por encima del boton*/

.div_item{
    display: inline-block;
    vertical-align: baseline;
    padding-left: 5rem;
    padding-top: 10rem;
    padding-bottom: 14rem;
    box-sizing: content-box;
    float: none;
    margin-right: 0.5rem;
    height: 40vh;
}

.div-container{
    font-size: 1rem;
    width: 100vw;
    background-image: url(../assets/hellocomputer2.png);
}

#hola-text{
    display: inline-block;
    font-size: 2.5rem;
    color: snow;
}

.div_item p{
    color: snow;
    font-size: 2.5rem;
    margin-top: 30px;
}

p{
    color: snow;
    font-size: 1.5rem;
}

#name-text{
    font-size: 6rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: snow;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-top: 20px;
}

.sobre-mi{
    background-color: white;
    width: 100vw;
    border-top: 0.5rem #1a589e solid;
    display: inline-block;
}

.div_item-sobre-mi{
    display: inline-block;
    vertical-align: baseline;
    padding-left: 5rem;
    padding-top: 10rem;
    padding-bottom: 14rem;
    width: 50%;
    box-sizing: content-box;
    float: none;
    margin-right: 0.5rem;
}

.div_item-sobre-mi h1{
    color: #083c79;
    font-size: 4rem;
}

.div_item-sobre-mi h2{
    font-size: 1.5rem;
    text-align: center;
}

.sobre-mi p{
    margin-top: 3rem;
    padding-left: 1rem;
    color: grey;
    text-align:justify;
}

.carousel_container{
    padding: 0px;
    margin: 0px;
    display: inline-flex;
    justify-content: center;
    width: 40vw;
    padding-top: 12rem;
    z-index: 1;
}

.slides{
    display: flex;
    justify-content: center;
}

.me_image{
    width: 30vw;
}

.prev, .next {
    top: 50%;
}

.next {
    right: 15%;
}

.prev{
    left: 15%;
}

.div_item-areas-de-trabajo{
    display: inline-block;
    vertical-align: baseline;
    padding-left: 5rem;
    padding-top: 10rem;
    padding-bottom: 14rem;
    width: 90%;
    box-sizing: content-box;
    float: none;
    margin-right: 0.5rem;
    background-color: var(--primary-color);
}

.div_item-areas-de-trabajo h1{
    color: whitesmoke;
    font-size: 4rem;
}

.div_item-aptitudes{
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100vw;
}

.aptitudes_image{
    width: 25vw;
}

.div_item-formacion-academica{
    display: inline-block;
    vertical-align: baseline;
    padding-top: 10rem;
    padding-bottom: 0rem;
    box-sizing: content-box;
    float: none;
    background-color: white;
}

.formacion-academica{
    background-color: white;
    width: 100vw;
    border-top: 0.5rem #1a589e solid;
    line-height: 0rem;
}

.div_item-formacion-academica figure{
        margin-block-end: 0em;
        margin-inline-end: 0px;
        line-height: 0rem;
        margin-bottom: 0px;
}

.div_item-formacion-academica h1{
    color: #083c79;
    padding-left: 5rem;
    margin-bottom: 2rem;
    font-size: 4rem;
    line-height: 2.6rem;
}

.social {
    display: block;
    list-style-type: disc;
    margin-block-end: 1rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.liRedes{
    list-style: none;
    display: inline-block;
    padding: 0.5rem;
}
  
#mobile-nav{
    display: none;
}

#timelinemobile{
    display: none;
}

#timelinetv{
    display: none;
}


@media (min-width: 2000px){
    .main-nav{
        height: 7rem;
    }

    .main-nav__item{
        margin-left: 1rem;
        margin-right: 1rem;
        padding: .3rem;
        padding-left: 5rem;
        font-size: 3rem;
    
    }

    .div_item{
        display: inline-block;
        vertical-align: middle;
        padding-left: 5rem;
        padding-top: 20rem;
        padding-bottom: 14rem;
        box-sizing: content-box;
        float: none;
        margin-right: 0.5rem;
        height: 60vh;
    }

    .div-container{
        background-image: url(../assets/hellotelevision.png);
    }
    
    #hola-text{
        font-size: 5rem;
    }
    
    .div_item p{
        font-size: 5rem;
    }
    
    p{
        font-size: 3rem;
    }
    
    #name-text{
        font-size: 12rem;
        padding: 10rem 0rem;
    }
    
    .div_item-sobre-mi , .div_item-areas-de-trabajo , .div_item-formacion-academica h1{
        padding-left: 10rem;
    }
    
    .div_item-sobre-mi h1 , .div_item-areas-de-trabajo h1 , .div_item-formacion-academica h1{
        font-size: 7rem;
    }

    .div_item-sobre-mi h2{
        font-size: 3.5rem;
    }
    
    .sobre-mi p , .areas-de-trabajo p{
        font-size: 4rem;
        line-height: 5.5rem;
        padding-left: 3rem;
        padding-top: 3rem;
    }

    .prev, .next {
        padding: 35px;
        font-size: 50px;
    }

    .dot {
        height: 20px;
        width: 20px;
    } 

    #timelinepc{
        display: none;
    }

    #timelinetv{
        display: flex;
    }

    .liRedes img{
        width: 5vw;
        margin: 0 5rem;
    }

    .liRedes{
        padding: 1rem;
    }
    
    #EstiloFooter {
        font-size: 3.5rem;
    }
    
    #e-mail{
        font-size: 3rem;
        text-align: center;
        width: 50rem;
        height: 3rem;
    }
}