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

body {
    font-family: "Work Sans", sans-serif;
    background-color: gainsboro;
    width: 100vw;
    display: flex;
    flex-direction: column;
    text-align: center;
}

h2,
h3,
h4 {
    display: flex;
    flex-direction: row;
    font-family: "Miriam Libre", sans-serif;
    justify-content: center;
    color: white;
}

p {
    font-size: 0.9em;
}

section h2 {
    font-size: 1.5em;
}

article h3 {
    font-family: , sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: black;
}

h1 {
    font-size: 1.2em;
    letter-spacing: .1em;
    font-weight: 900;
}

.portada {
    display: flex;
    width: 100vw;
    height: auto;
}

header img#retrato {
    border-radius: 50%;
    max-width: 20vh;
    height: auto;
}

header {
    width: 100vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    color: white;
    background-image: url(../img/arboles.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    justify-content: space-around;
}

a {
    text-decoration: none;
    color: #C0FCD4;
    font-family: "Miriam Libre", sans-serif;
}

header nav {
    display: flex;
    flex-direction: row;
    width: 100vm;
    height: 10vm;
justify-content: space-around;
}

header div.portada {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 65%;
    justify-content: space-around;
    align-items: center;
}

header div.portada p {
    width: 90vw;
    font-size: 0.8em;
}

.portada {
    display: flex;
    flex-direction: column;
    width: 100vw;
}

header nav ul {
    display: flex;
    width: 100vw;
    min-width: 50vw;
    margin: 0% 5% 0% 5%;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    font-size: 0.8em;
}

header nav {
    display: flex;
    flex-direction: row;
   justify-content: space-around;
    width: 100vw;
    align-content: center;
}

header nav ul {
    align-content: center;
    align-items: center;
   justify-content: space-around;
}

header nav ul li a {
    list-style: none;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-family: "Miriam Libre";
   justify-content: space-around;
    margin: 5% 5% 5% 5%;

}

header div a {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 1em;
    width: 100%;
    background-color: rgba(999, 999, 999, .1);
    color: white;
    padding: 5% 10% 5% 10%;
    border-radius: 5%;
    text-align: center;
}

header nav ul img {
    width: 50%;
}

section {
    display: flex;
    flex-direction: column;
    padding: 5% 0% 5% 0%;
    justify-content: space-around;
}

section article {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    background-color: gainsboro;
    justify-content: space-around;
    align-items: center;
    justify-content: center padding: 0% 5% 0% 5%;
    flex-wrap: wrap;
}

article img {
    display: flex;
    flex-direction: row;
    width: 12vw;
    height: auto;
    margin: 0% 0% 5% 0%;
}

article div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    justify-content: space-between;
    text-align: center;
    padding: 5% 0% 5% 0%;
}

article section {
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    background-color: white;
    justify-content: flex-start;
}

article section div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    width: 90vw;
    height: auto;
}

article section h2 {
    display: flex;
    flex-direction: row;
    font-size: 1.2em;
    font-family: "Miriam Libre";
    color: black;
    padding: 2% 2% 0% 2%;
}

article section h3 {
    padding: 2% 2% 2% 2%;
    text-decoration: overline;
    text-decoration-style: wavy;
    text-decoration-color: #C0FCD4;
    font-family: "Work Sans";
}

article section h3 a {
    font-family: "Work Sans";
    font-weight: 600;
}

article section div.propuesta a {
    width: 80vw;
    height: auto;
}

article section div.propuesta a img {
    width: 100%;
    height: auto;
}

article section div.portfolio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
}

article section div.portfolio img {
    display: flex;
    flex-grow: 1;
}

footer {
    width: 100vw;
    display: flex;
    flex-direction: column;
    color: white;
    background-image: url(../img/arboles.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    justify-content: space-around;
    padding: 2% 2% 2% 2%;
    align-items: center;
}

footer p {
    display: flex;
    color: gainsboro;
    text-transform: uppercase;
    font-size: 0.5em;
    justify-content: center;
    margin: 2% 0% 0% 0%;
    width: 90vw;
    height: 40%;
    align-items: center;
}

footer h5 {
    color: white;
    width: 90vw;
}