*{
    box-sizing: border-box;
}

body{
    background-color: rgb(77, 202, 165);
    outline: 10px solid purple;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


header{
    width: 100%;
    border: dotted 8px red;
    background-color: black;
    display: flex;
    flex-wrap: nowrap;
    padding: 10px;
    justify-content: space-evenly;
}

a{
    color: white;
    font-size: 2.5em;
}

h1{
    font-size: 6em;
    text-align: center;
    letter-spacing: 8px;
    width: 90%;
    margin: 2px auto;
    text-shadow: -10px 10px 5px rgb(255, 139, 255);
}

h2{
    font-size: 2em;
    text-align: center;
    letter-spacing: 8px;
    width: 90%;
    margin: 20px auto;
    text-shadow: 10px -10px 5px rgb(226, 150, 78);
}

article{
    width: 95%;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: space-between;
}

h3{
    color: white;
    font-size: 2em;
}

p{
    width: 100%;
}

img{
    width: 15%;
    margin: 10px auto;
    border: solid 5px rgb(12, 175, 12)
}

i:last-child{
    width: 100%;
    text-align: right;
    font-size: 3em;
}

article:nth-of-type(1){
    background-color: rgb(160, 160, 160);
    border: solid 2px pink;
}

article:nth-of-type(1)> section{
    width: 100%
}

article:nth-of-type(2){
    background-color: rgb(141, 63, 63);
    outline: dotted white 2px
}

article:nth-of-type(2)> section{
    width: 65%;
    margin: 10px auto;
}

article:nth-of-type(3){
    background-color: rgb(131, 24, 158);
    border: groove rgb(227, 115, 255) 3px
}

article:nth-of-type(3)> section{
    width: 80%;
    margin: 10px auto;
}

article:nth-of-type(4){
    background-color: rgb(187, 96, 96);
    border: groove rgb(235, 174, 174) 3px;
    flex-direction: row-reverse;
}

article:nth-of-type(4)> section{
    width: 80%;
    margin: 10px auto;
}

/* Esta expresión la debemos de poner al princiipio de los estilos:
 *{
    box-sizing: border-box;
}   EDITAR ELEMENTOS PARA METER LOS ESTILOS:
   Para un elemento especifico, escribimos la ruta del objeto en el html partiendo desde el primer elemento en la
   jerarquia tras el body (usamos parametros como :nth-of-type(1,2,3,4, el que sea).
   Usamos > para dirigirnos a elementos dentro de otros. Y abrimos una llave {.
   Si solo escribimos el objeto(section, img, div, etc.), aplicara la configuracion
   a todos los elementos de ese tipo:
   EJEMPLOS:
   article:nth-of-type(4) > section > p{
   article:nth-of-type(1){
   article:nth-of-type(2) > section
   div{ (se aplica a todos los div)
   img{ (se aplica a todos los img)


    COMANDOS CSS:
    Background-color: cambia el color del fondo del elemento.
    Background-image: imagen de fondo. Opcion: url(ruta de la imagen)
    Border: coloca un borde alrededor del elemento
    (opciones: tamaño [2px] color [red] tipo de border [solid])
    Outline: como un border pero hace un borde dentro del elemento (bloque, caja...)
    Margin: establece un margen al elemento (ejemplo, 20px auto le pone un margen superior
    e inferior de 20px y un margen a la izquierda y a la derecha automatico)
    Display: flex = expresión necesaria poder distribuir los elementos dentro del bloque
    al que se lo aplicamos horizontalmente.
    flex: wrap = Distribuye horizontalmente los elementos pero si superan el 100% de la anchura
    del espacio disponible, traspasa la información a la siguiente línea.
    flex: nowrap = Mete a la fuerza a todos los elementos en una sola linea. Utilizar
    el flex wrap cuando tengamos que colocar elementos en varias lineas.
    justifiy-content = Manera de distribuir el espacio entre los elementos del flex:
    space-around pone espacio alrededor de los elementos, dejandolos centrados
    y space-evenly hace que el espacio sea el mismo entre el margen y el bloque y entre
    los propios bloques (   elemento   elemento   ) 
    flex-direction: row-reverse = coloca los elementos de la linea en un display flex
    de forma inversa a la que estan puestos en el html (si tenemos una imagen primero
    y un section despues, row-reverse coloca el section primero y la imagen ultima)
    width = anchura que ocupa el elemento.

    EXPLICACION DE COMO COLOCAR OBJETOS EN VARIAS LINEAS:
    Cuando tenemos una caja y se nos pide que en
    una linea este el titulo, en la siguiento una imagen y una seccion y que la tercera
    acabe con un parrafo, por ejemplo, establecemos un flex-wrap: wrap y
    vamos jugando con la anchura: titulo width 100% (ocupa toda la linea y manda 
    al section y la img a la siguiente) img 30% section 65% y la
    tercera linea la ocupa el parrafo con un width 100%.
    padding: establece un margen entre los elementos dento de una caja con display: flex
    
    PERSONALIZAR TEXTO:
    
    Font-size: (n)em = tamaño de texto
    Color: color = color de TEXTO
    align-text: center/justify/left/right = alinear TEXTO.
    letter-spacing: (n)px = espacio entre letras
    word-spacing = lo mismo qu eel anterior pero con palabras.
    text-shadow: (desplazamiento eje x)px (desplazamiento y)px (tamaño sombra)px color:
    = Añade sombra al texto


    EJEMPLO GRÁFICO DE LOS BLOQUES

    body (tiene el display-flex y flex-wrap: wrap)
        hijo1 (width: 48%) hijo2 (width: 48%)
        hijo2 (width: 100%, tiene flex-wrap: wrap)
            nieto1 (width: 100%)
            nieto2 (width: 30%) nieto3 (width: 68%)
            nieto4 (width: 100%)
        hijo3 (width: 100%)

    Hijo1,2,3... podrian ser article, div...
    Nieto1 podria ser un titulo (h1,2,3) o un parrafo dentro de hijo2
    Nieto2 podria ser una imagen
    Nieto3 podria ser un section dentro del article/div hijo2
    Nieto4 puede ser un parrafo (p) que contenga la ultima informacio que esta dentro del
    bloque de hijo2.
    Si quisieramos cambiar el orden de la linea nieto2 - nieto3 para que nieto3 aparezca
    a la izquierda: row-reverse escrito en los estilos de hijo2.

/*