/* colores https://coolors.co/palettes/popular/2f4f4f*/
* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("../images/fondo.jpg");
}

#container{
    display: flex;
    /*1  pon todo en vertical */
    /* 1: */flex-direction: column;


    /* Anchura del lienzo*/
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
    /* todo el lienzo */
    height: 100%;
    /* 100vh es igual a la altura total de la ventana gráfica */
    min-height: 100vh; 

}

header {
    background-color:darkslategrey;
    color: white;
    text-align: center;
}

nav {
    background-color: #407e79;
    color: white;
    /*2 en horizontal */
    /* 1: */display:flex;
    /* 2: */justify-content:end;
width: 100%;

    /*3 Elemento a la derecha  del todo*/
    /* 1: */margin-left: auto;

    
}
nav a {     
    text-align: center;
    /* espacio */
    padding: 5px 20px;
    /* quitar subrayado */
    text-decoration: none;
    color: white;
}
nav a:hover{ 
    background-color: #6b0504;
}


#main{
    /*4  ponlo en horizonal para que quepan los dos elementos*/
    /* 1: */display: flex;
    /* 2: */flex-direction: row;


    background-color: #759B8F;
    /*5 El elemento debe ocupar 100%, con flex*/
    /* 1: */flex-grow: 1;

    
}


aside {
    /*6 tengo que ocupar un 30% del espacio que me den */
    /* 1: */flex: 30%;

    
}
#info {
    /*7 debo ocupar el resto 70%*/
    /* 1: */flex: 70%;

    
}
article {
    border-radius: 10px;
    margin: 10px;
    padding: 5px;
    background-color: white;
}
footer{
    background-color: #407e79;
    color: white;
    text-align: right;
    padding-right: 10px;
}


/* Responsive layout - si ocupo menos de 700px apilo las capas usando flex*/
@media screen and (max-width: 700px) {
    #main {   
        /*8  ponlo en vertical */
        /* 1: */flex-direction: column;

        
    }
  }