@charset "utf-8";
/* CSS Document */

body {
    background-color:  	#CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    margin: 0;
    font-size: 45px;
    text-align: center;
}

p {
    padding: 10px;
    font-size: 25px;
}

p#m1 {
    position: absolute;
    top: 8%;
    left: 10%;
    width: 80%;
    height: 10%;
    border: gray solid;
    background-color:#FAD68C;
    text-align: center;
}

p#m2 {  /* Caja verde del centro */
    position: absolute;
    top: 40%;
    left: 33%;
    width: 35%;
    height: 25%;
    border: #78CC5B solid;
    z-index:5;  /* Esta propiedad asigna un valor de importancia a un elemento que se puede superponer 
    , (cuanto mayor sea el número se buscará otros elementos que tengan asignados un valor menor de manera
    que el elemento que tenga el número más grande superpondrá a los que tengan el número menor. 
    En este caso le asignamos un número cualquiera a la caja del centro y más abajo sólo a los párrafos ,
    que son el texto que contienen las cajas le asignamos de nuevo la propiedad de antes pero con un número
    mayor que la caja del centro para así consegir que al pasar el ratón por encima de las otras cajas estas
    se superpondrán a la del centro ya que esta tiene un valor menor de z-index que las otras )
    Nota este valor de esta propiedad sólo lo adquieren cuando pasamos el ratón por encima gracias
    a la propiedad :hover , mientras tanto la del centro es la que tiene el z-index mayor y por eso se superpone
    a todas las demás */
    background-color: #9FFB8E;
    text-align: center;
}

p#m3 {
    position: absolute;
    top: 25%;
    left: 5%;
    width: 35%;
    height: 25%;
    border: #F2D544 solid;
    background-color: #FDFF91;
    text-align: left;
}

p#m4 {
    position: absolute;
    top: 25%;
    right: 5%;
    width: 35%;
    height: 25%;
    border:  #87DEC4 solid;
    background-color:  	#D6FEFE;
    text-align: right;
}

p#m5 {
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 35%;
    height: 25%;
    border: #F46D8D solid;
    background-color: #FAE7FD;
    text-align: left;
}

p#m6 {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 35%;
    height: 25%;
    border: #F23827 solid;
    background-color:  	#F5B5B5;
    text-align: right;
}

p:hover {
    z-index: 7;
}