*{ /*el asterisco significa que los estilos serán aplicados a toda la página*/     
    box-sizing: border-box; /*esto hace que los elementos no crezcan mas del tamaño que le voy a dar*/ 
}

body {
    margin: 0; /*para eliminar el margen automatico que tiene el body*/
    background-color: #F9ECE5;
    /*border: 1px solid red;*/
}

header{
    margin: 0;
}

#contenido{
    /*border: 1px solid blue;*/

    width: 100%;
    min-height: 100vh;
    
    display: flex; /*para crear un contenedor flexible*/
    flex-wrap: wrap;
    justify-content: center; /*centra los elementos de manera horizontal*/
    align-items: center; /*centra los elementos de manera vertical*/

    flex-direction: row-reverse; /*para que no esten en fila*/
  
}

#imagenDere{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

#imagenIzqui{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

h1{

    font-family: "Poly", serif; /*familia de fuente a la que pertenece, el "serif" es la fuente alternativa en caso la página no cargue la primera fuente*/
    font-size: 40px; /*tamaño de fuente*/
    color: #675E1B; /*color de la fuente*/
    -webkit-text-stroke: 1px #675E1B; /*sirve para poder ponerle un borde a la letra, "stroke" aplica solo para vectores*/
    font-weight: 400; /*define el peso del texto, un equivalente a (bold, light, normal, etc)*/
    text-align: center; /*para alinear el texto*/
}

#primerParrafo{
   font-family: "Poppins", serif;
   font-size: 15px;
   color: #3C2724;
   font-weight: normal; 

   width: 100%;
   max-width: 506px; /*le puse esa cantidad para que este del mimso ancho que la caja de texto*/
}

textarea[name="user-input"]{
    height: 150px; /*alto*/
    width: 100%;
    max-width: 506px; /*ancho*/
    background-color: #EDD9CE; /*color de la caja*/
    border-radius: 28px; /*el redondeo de las esquinas*/

    font-family: "Poly", serif;
    font-size: 15px;
    padding: 26px; /*margen interno*/
    color: #3C2724; /*color del texto ingresado*/

    resize: none; /*para que la caja de texto no se pueda agrandar*/
}

textarea[name="user-input"]::placeholder { /*nota mental: no dejar espacios en la sintaxis*/
    font-family: 'Poly';
    font-size: 16px;
    color: #968484;
}

ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 506px;
    justify-content: center;
    padding: 0;

    font-family: 'Poly', serif;
    font-size: 15px;
    color: #3C2724;

    list-style: none; /*para quitar las viñetas de la lista*/
}

.elemento{
    box-sizing: border-box; /*hace que todas las especificaciones se realicen en torno al tamaño del contenido*/
    border: 1px solid #675E1B;
    border-radius: 24px;
    padding: 12px 19px;
    background-color: #F9ECE5;
    margin: 10px;
    width: auto calc(30% - 20px); 
    height: auto;
    
}

#reset-button{
    background-color: #816150;
    border: 1px solid #46352B;
    border-radius: 24px;
    
    width: 100%;
    max-width: 506px;
    height: 43px;

    font-family: 'Poppins', serif;
    font-size: 15px;
    color: #FBFBFB;
    text-align: center;

    cursor: pointer; /*para que al colocar el cursor encima del botón se vea la manito*/
}

#reset-button:active{ /*active es una pseudoclase que sirve para aplicarle un estilo al boton cuando se le de click*/
    transform: scale(0.95); /*para que al darle click pueda hacerse más chiquito y por lo tanto, el efecto de presión*/
}

footer{
    font-family: 'Poly', serif;
    font-size: 15px;
    color: #968484;
    text-align: center;

    background-color: #EDD9CE;
    width: 100%;
    height: 83px;
    padding-top: 10px;

    position:relative; /*su posicion no afectara a los otros elementos*/
}