/* estilos de tercera prueba flexbox con gap */


.item {
    border: 3px solid black;
    background-color: rgb(240, 171, 230);
    color: white;
    width: 99%;
    height: 50px;
    font-size: 26px;
    text-align: center;
    font-weight: bold;}

/*pseudoclases en base a estados o posiciones*/
/*vamos a darle un orden para que cambie el color del contenedor segun posicion en html, first-child(primero) last-child(ultimo) nth-child(nº) el que queramos*/

.container1 .item:first-child {
    background-color: tomato;}

.container2 .item:last-child {
    background-color: rgb(233, 42, 250);}

.container3 .item:nth-child(2) {
    background-color: rgb(109, 85, 248);}


.container1 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(183, 219, 162);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    /*como ya estaba en horizontal, con la siguiente orden no veremos cambios*/
    flex-direction: row;
    /*para dar espacio entre contenedores*/
    column-gap: 50px;}

.container2 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(124, 113, 163);
    border: 2px solid rgb(54, 54, 51);
    margin: 50px;
    /*como row-reverse decimos a los elementos que se ordenen inversamente*/
    flex-direction: row-reverse;
    /*para dar espacio entre contenedores*/
    column-gap: 250px;}

.container3 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(156, 150, 179);
    border: 2px solid rgb(238, 238, 174);
    margin: 50px;
    /*como column decimos a los elementos que se ordenen en columnas*/
    flex-direction: column;
    /*para dar espacio entre contenedores*/
    row-gap: 20px;}


.container4 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(144, 243, 86);
    border: 2px solid rgb(238, 83, 11);
    margin: 50px;
    /*como column decimos a los elementos que se ordenen en columnas*/
    flex-direction: column-reverse;
    /*para dar espacio entre contenedores*/
    row-gap: 20px;}