styles.css

/* En este archivo escriban su CSS */

/* Fonts */
/* Importar aquí la font */ 
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Aquí les dejamos como ayuda este "reset" en el cual ajustamos algunas propiedades
*  cuyos valores asigna por defecto el navegador.
*/

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    /* Para que el scrolleo en la one page sea suave */
    scroll-behavior: smooth;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 28px;
}

/* Para quitar los puntos a los items de listas */
ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #fbfbfb;
}

.active {
    background-color: #fbfbfb;
}

.menu-item.active {
    font-weight: 700;
    background-color: #af599e;
   }
   
.menu-item {
    background-color: #fbfbfb;
}


li {
    padding: 20px;
    margin: 30 px;
    background-color: #fbfbfb;
}


li .active{
    padding: 20px;
    margin: 25px;
    background-color: #af599e;
}

/* Para que los enlaces hereden el color de texto y no tengan subrayado */
a {
    text-decoration: none;
    color: inherit;
}

/* Este max-width es para que el contenido no se "estire" demasiado hacia los costados y
*  el margin: auto; para tenerlo centrado fácilmente ;)
*/
main {
    max-width: 1199px;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-color: #fbfbfb;
}

div {
    margin: 25px;
}

section {
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

p {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width:400px;
}

body {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    display:flex;
    justify-content: center;
    margin-bottom:100px;
}

header {
    height: 90px;
    object-fit: cover;
    background-color:#fbfbfb;
    color: #0f0f0f;
    position: relative;
    top: 0 px;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    left: 50px;
    margin: 5px;
    font-size: 36px;
}

nav {
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
    left: 250px;
    margin: 5px;
    font-size: 36px;
}
#foto {
    height: 400px;
    object-fit: cover;
    width: 100%;
    max-width: 400px;
    border-radius: 50%;
    display: flex;
    margin-left: 30px;
    margin-top: 120px;
    justify-content: center;
}

.CV {
    height: 30px;
    width: 150px;
    border-radius:30px;
    display: flex;
    justify-content: center;
    background-color: rgba(89, 175, 100);
    color: #fbfbfb;
}

li.menu-item:hover,
li.menu-item a.active,
a.CV:hover {
    background-color: #af599e;
    transition: background-color 0.3s;
}

.hablemos {
    display: flex;
    justify-content: center;
    background-color: rgba(89, 175,  100);
    min-height: 10vh;
    color: #0f0f0f;
}

#contacto {
    display: flex;
    justify-content: center;
    background-color: rgba(89, 175,  100);
    min-height: 10vh;
    color: #0f0f0f;
}

article {
    display: flex;
    flex-direction: row;
}

article img {
    width: 100px;
}

footer {
    min-height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #af599e;
    color: #fbfbfb;
}

@media screen and (min-width: 1024px) {

    main {
        background-color: #fbfbfb;
    }

    body {
        font-family: "Lato", sans-serif;
        font-size: 18px;
        margin-bottom:100px;
    }

    header {
        min-width: 1200px;
        position: relative;
        top: 0 px;
        left: 0 px;
        font-size: 36px;
    }

    div {
        margin: 0 px;
    }

    p {
        padding-top: 20px;
        padding-bottom: 20px;
        max-width:1600px;
        left: 0px;
        margin-left: 0 px;
    }

    #foto {
        height: 400px;
        margin-left: 0px;
        object-fit: cover;
        border-radius: 50%;
        display: inline;
        margin-left: 0px;
        margin-top: 0px;
        width: 400px;
    }
 
    section .parrafo {
        text-align:center;
        display: inline;
        justify-content: flex-end;
    }

    .container {
        display: flex;
        align-items: stretch;
      }

    .container .parrafo {
        text-align: center;
        align-items: center;
        flex: 1;
      }

    article {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    .hablemos {
        margin-left: 300px;
        display: flex;
        justify-content: center;
        max-width: 50%;
}

    footer {
        margin-left: 300px;
        max-width: 50%;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(89, 175,  100);
        color: #fbfbfb;
}
}

/* Recomendaciones! 
*  - Comenzar desde lo más general y luego ir hacia lo mas específico, asignando primero
*    "estilos generales". Una buena idea sería comenzar por el <body> ;)
*
*  - Recuerden que queremos evitar "repetir código", en CSS usando la cualidad de la herencia
*    podemos setear ciertas propiedades en un elemento padre y dejar que sean heredadas (por ejemplo: font-size)
*
*  - Nadie sabe todas las propiedades CSS de memoria, si no saben como hacer algo no lo recuerdan, la respuesta
*    pueden encontrarla buscando en la web algo como "CSS como hacer ... " o "propiedad css para hacer ..."
*
*  - Usen mucho las herramientas para desarrolladores del navegador para ir
*    probando el CSS que escriben, resolver dudas y problemas.
*
*  - Paciencia, resiliencia y creatividad! No se desanimen, las primeras experiencias maquetando con HTML y CSS
*    pueden ser frustrantes, pero estas habilidades se van desarrollando con la experiencia, es como aprender
*    un trabajo manual, hacer una artesanía, tocar un instrumento musical... la práctica es todo!
*/