@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,2');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --titulo: "Fira Sans", sans-serif;
    --texto: "PT Sans Caption", sans-serif;
    --fontsize: 18px;
    --padding: 20px;
    --bkColor: #151413;
    --txtColor: #f3e7df;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
h1, h2, h3, h4, h5, h6{
    font-family: var(--titulo);
}
body{
    font-family: var(--texto);
    font-size: 1rem;
    background-color: var(--bkColor);
    color: var(--txtColor);
}
header{
    padding: calc(var(--padding)/2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav ul{
    display: flex;
    gap: var(--padding);
    font-weight: 600;
}
section#Introduccion{
    /* padding: var(--padding); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 90vh;
}
section#Introduccion h2{
    font-size: 7rem;
}
section#Introduccion p{
    font-size: 2rem;
}
section{
    padding: calc(var(--padding)*3);
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: justify;
    gap: calc(var(--padding)/2);
    font-size: 1.5rem;
}
.sobreMi{
    display: flex;
    flex-direction: row;
    align-items: center;
}
section#SobreMi p{
     padding-left: var(--padding);
}
section#SobreMi img{
    width: 300px;
    height: auto;
    border-radius: 18px;
    margin-bottom: var(--padding);
}
section#Estudios h3{
    padding-left: calc(var(--padding)*2) ;
    gap: calc(var(--padding)*2);
}
section#Estudios p{
    padding-left: calc(var(--padding)*3);
}
section#Proyectos h3{
    padding-left: calc(var(--padding)*2) ;
    gap: calc(var(--padding)*2);
}
section#Proyectos p{
    padding-left: calc(var(--padding)*3);
}
section#Proyectos a{
    color: var(--txtColor);
    font-weight: 600;
    display: block;
    text-align: right;
}
/* Seguir editando el CSS con formulario y proyectos */
/* section#Contacto{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
} */
div#formulario{
    margin: 0 auto;
    background-color: #f3e7df;
    color: #151413;
    padding: var(--padding);
    border-radius: 18px;
    gap: calc(var(--padding)/2);
    width: 600px;
}
.boton{
    background-color: var(--bkColor);
    color: var(--txtColor);
    padding: var(--padding);
    font-size: 1.5rem;
    padding-bottom: calc(var(--padding)/2);
}
.field{
    height: 30px;
    width: 550px;
}
footer{
    text-align: justify;
    padding: var(--padding);
    background-color: #222121;
    display: flex;
    justify-content: center;
    gap: var(--padding);
}
footer img{
    width: 25px;
    height: 25px;
    background-color: var(--txtColor);
    border-radius: 8px;
}
footer li{
    display: flex;
    align-items: center;
    gap: calc(var(--padding)/4);
    font-weight: 600;
}