/* Estilos generales */

body{
    width: 1260px;
    height: 1545px; /* 100px footer + 400px section + 45px margin */
    padding-top: 45px;
    background-color: rgb(45, 206, 157);
}

/* Primer nivel - estilo layout */

main{
    /* display: flow-root; */
    /* overflow: hidden; */
}

    /* Estilo para el contenedor principal */

section{
    width: 780px; /* 780px / 800px - 20px padding (10 +10)*/
    height: 370px; /* 370px / 400px - 30px padding top*/
    margin: 0 10px 0px 20px;
    padding: 30px 10px 0 10px;
    /* border: 1px solid #000; */
    background-color: #54a8a2;
    float: left;
}

    /* Estilo para el aside */

aside{
    width: 370px; /* 370px / 400px - 30px padding (20 + 10)*/
    height: 350px; /* 350px / 400px - 30px padding top*/
    margin: 0px 20px 0px 10px;
    padding: 50px 0 0 30px;
    /* border: 1px solid #000; */
    background-color: #4faf6c;
    float: left;
    position: relative; /* Con este position hacemos que los elementos que esten fuera del flujo dentro de este contenedor se coloquen con respecto a si mismo y no con el body, excepto la caja con position fixed, que siempre se colocara conforme el cuerpo */
}

    /* Estilo para el footer */

footer{
    height: 100px;
    width: 1260px;
    background-color: #b2554b;
    clear: both;
}

/* Segundo nivel - Estilo para contenido section */

form{
    border: 1px solid #000;
    background-color: burlywood;
    padding: 1em 0 1em 70px ;
}

form input{
    margin: 10px 0;
}

label, input[type="submit"]{
    display: block;
}

input[type="text"]{
    width: 490px; /* 490px / 500px - 10px padding */
    padding-left: 10px;
    height: 1.8em;
}
    
input[type="submit"]{
    width: 150px;
    height: 2em;
    background-color: #D8d8d8;
    margin: auto;
}

/* Estilo para los elementos del aside */

img{
    margin: 50px 0 0 30px;
    width: 150px;
}

#fixed{
    /* Con este position se fija en el sitio y siempre se quedará ahi, sin ocupar espacio en el flujo */
    position: fixed;
    background-color: chocolate;
    top: 90;
}

#absoluta{
    /* Con este position sacamos del flujo la caja y lo colocamos donde necesitemos */
    position: absolute;
    background-color: darkviolet;
    top: 0;
    left: 0;
}