body {
text-align: center;
}

 @keyframes changeText1 {
            0%, 50% {
                content: 'Bienvenid@ a Ganar Dinero';
            }
            50.1%, 100% {
                content: 'Hecho Est@';
            }
        }

@keyframes changeTextTitle {
    0% { content: "y con tu"; }
    33.33% { content: "email"; }
    66.66% { content: "con tu monedero"; }
    100% { content: "tu Whastapp"; }
}

.title::before {
         content: "Bienvenid@ a Monetizar";
         animation: changeText1 5s infinite;
       }

 .encabezado::before {
     content: "y con tu";
     animation: changeTextTitle 5s infinite;
 }

#principal1 {
display: block;
width: 90%;
margin: 10px;
padding: 10px;
text-align: center;
border: 2px solid #999999;
background: #DDDDDD;

-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 30px 30px 30px 30px;

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 30px / 30px;

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(50,50,50) 0px -25px 10px;

background: -webkit-linear-gradient(top, yellow 50%, red 50%);

outline: 2px solid #000099;
outline-offset: 15px;

-moz-transform: scale(2);
-webkit-transform: scale(2);


}
#principal2 {
display: block;
width: 90%;
margin: 10px auto;
padding: 30px;
text-align: center;
border: 2px solid #999999;
background: #DDDDDD;
}
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font: italic 14px verdana, sans-serif;


-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 30px 30px 30px 30px;

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 40px / 40px;

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(50,50,50) 0px 25px 10px;

background: -webkit-linear-gradient(top, green 50%, yellow 50%);
background: -moz-linear-gradient(top, #FFFFFF, #006699);
}

#principal2:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

#principal3 {
display: block;
width: 90%;
margin: 10px auto;
padding: 30px;
text-align: center;
border: 2px solid #ffffff;
background: #000000;


-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 30px 30px 30px 30px;

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 30px / 30px;

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(50,50,50) 0px 25px 10px;

background: -webkit-linear-gradient(top, red , #000069);
/*
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);//La función transform:  toma exclusivamente un parámetro.  Debilidad de HTML5
-moz-transform: scale(-1.4, 1);//la función transform: scale con parametros negativos de -1 hace un espejo xy
-webkit-transform: scale(-1.4, 1);
-moz-transform: skew(45deg, 0deg);
-webkit-transform: skew(45deg, 0deg);
-moz-transform: translate(100px);
-webkit-transform: translate(100px);

-moz-transform: translateY(100px) rotate(300deg) scaleX(1.4) skew(330deg, 0deg);
-webkit-transform: translateY(100px) rotate(300deg) scaleX(1.4) skew(330deg, 0deg);
-moz-transition: -moz-transform 1s ease-in-out 0.5s; //linear, ease, ease-in, ease-out también son parámetros
-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;
*/
}

#principal3:hover{
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}


#principal4 {
display: block;
width: 90%;
margin: 10px auto;
padding: 30px;
text-align: center;
border: 2px solid #999999;
background: #DDDDDD;

-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 30px 30px 30px 30px;

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 30px / 30px;

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(50,50,50) 0px 25px 10px;

background: -webkit-radial-gradient(center, ellipse, #FFFFFF 60%, #006699 50%);

-moz-transition: -moz-transform 1s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;
}

#principal4:hover{
-moz-transform: rotate(345deg);
-webkit-transform: rotate(345deg);
}



#titulo1 {
font: bold 20px verdana, sans-serif;
text-shadow: rgba(255,255,255,0.5) 3px 3px 5px;
color: hsla(222, 100%, 50%, 0.5);
outline: 2px dashed #009999;
outline-offset: 3px;

}

#titulo2 {
font: bold 40px verdana, sans-serif;
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
}
#titulo3 {
font: bold 40px verdana, sans-serif;
text-shadow: rgba(255,255,255,0.5) 3px 3px 5px;
}
#titulo4 {
font: bold 40px verdana, sans-serif;
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
}

#principal5 {
display: block;
width: 500px;
margin: 50px auto;
padding: 30px;
text-align: center;

border: 29px;
-moz-border-image: url("diamonds.png") 29 stretch;
-webkit-border-image: url("diamonds.png") 29 stretch;

border-image: src("C:\Users\alexalberto\Desktop\ElGranLibroDeHtml5CssJavaScript\HomeSweetHome.jpg") 29 stretch;
}
#titulo5 {
font: bold 40px verdana, sans-serif;
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
}