/*@import url('segundaHoja.css');*/
body{
    font-family: monospace;
    padding: 30px;   
    background: black;
    color:azure;
    margin: 0 auto;
    width: 600px;
}

h1{
    color:rgba(180, 175, 175, 0.99);
    background: #4a4646;
    padding: 20px;
    margin: 10px 0;
    transition: background 2s;
    transition: color 2s;
}

h1:hover{
    background: #fff;
    color:black;
}

p{
    width: 100%;
}



.mosaico{
    margin: 0 auto;
    width: 450px;    
}

.mosaico .redGreenBlue {
    color: #FFF;
    font-size: 60px;
    height: 200px;
    border-radius: 30px;
}

.mosaico .redGreenBlue .rojo{
    background: red;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.mosaico .redGreenBlue .verde{
    background: green;
}

.mosaico .redGreenBlue .azul{
    background: blue;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.mosaico .redGreenBlue section{
    width: 150px;
    float:left;
    transition: background 1s;
     transition: color 1s;
    
}

.mosaico .redGreenBlue section:hover{
    background: black;
}

.mosaico .redGreenBlue section.rojo:hover{
    color: red;
}


.mosaico .redGreenBlue section.verde:hover{
    color: green;
}


.mosaico .redGreenBlue section.azul:hover{
    color: blue;
}

section.rojo, section.verde, section.azul {
    height: 200px;
    display: inline-block;
}

section.rojo h2, section.verde h2, section.azul h2 {
    position: relative;
    display: block;
    padding:0px 10px;
    
}