/*estilos para index.html ejercicio display*/

/* estilo para div */
div {
    background: green;
    color: beige;
    margin: 5px;
    height: 50px;
    border: 5px solid rgb(243, 168, 7);
}

/* definimos display para las clases block, no notariamos diferencia con el que no definimos block */
.block {
    display: block;
    width: 25% ;
}


/* definimos display para las clases inline. se adapta al contenido */
.inline {
    display: inline;
    /*ignoraria width y height . padding si afectaria*/
    /*width: 25%;*/
}

/* definimos display para las clases inline-block. se adapta al contenido */
.inline-block {
    display: inline-block;
    /*le afectaria width y height*/
    width: 25% ;
}

/* definimos display para las clases flex  flex seria el padre ocupa todo el ancho de pantalla*/
.flex {
    display: flex;
    background-color: blueviolet;
}
/* flex div seria el hijo que esta dento del div padre*/
.flex div {
    width: 25%;
    height: auto;
    background-color: brown;
}
/* inline-flexSe adapta a la anchura de las letras*/
.inline-flex {
    display: inline-flex;
    background-color: blue;
    }
.inline-flex div {
    /*width: 25%;*/
    height: auto;
}

.padding {
    padding-bottom: 150px;
}

.grid {
    display: grid;
    /* repetir en 3 columnas */
    grid-template-columns: repeat(3, 30%);
   /* hacer 2 filas de 100 de ancho */
    grid-template-rows: repeat(2, 100px);
    /* espacio entre filas y columnas*/
    gap: 10px;
    background-color: red;
    height: auto;
}

.inline-grid {
    display: inline-grid;
    /* repetir en 3 columnas */
    grid-template-columns: repeat(3, 30%);
   /* hacer 2 filas de 100 de ancho */
    grid-template-rows: repeat(2, 70px);
    /* espacio entre filas y columnas*/
    gap: 10px;
    background-color: rgb(255, 0, 170);
    height: auto;
}

.list-item {
    display: list-item;
    background-color: black;
}

/* si no ponemos esta primero, no funcionaria e ignoraria las dos siguientes*/
.table {
    display: table;
    background-color: aqua;
}
.table-cell {
    display: table-cell;
    background-color: rgb(83, 59, 29);
}
.table-row {
    display: table-row;
    background-color: brown;
}

.contents {
      /* si ponemos display none no muestra ni ocupa espacio*/
    display: contents;
    /* no hace caso al background*/
    background-color: chartreuse;
}









/* Estilos para doc display-none */
/*queremos que el inline-block afecte solo al primer menu y ponemos >*/
nav > ul > li {
    display:inline-block;  
    margin: 0px 10px;
    position: relative;
}
nav ul li a {
    padding: 8px 15px ;
    background-color: rgb(43, 226, 134);
    border-radius: 10px;
    border: 2px solid rgba(6, 18, 185, 0.541)    
}

/*para ocultar el submenu*/
nav ul li ul {
    display: none;
    /*para colocar en su posicion y que no afecte al resto*/
    position: absolute;
    margin-left: 0px;
    padding-left: 0px;
    top: 25px;
    /*para quitar circulos de la li*/
    list-style-type: none;

}

/*para que se vea el submenu al pasar el raton por encima, añadimos una clase al li "parent"*/
nav ul li.parent:hover ul {
    display: block;
}


nav ul li ul li a {
    background-color: rgb(27, 138, 212);
    color: white;
    width: 100%;    
    display: block;
}