/***** Estilos para DEGRADADOS *****/

.caja1 { width:500px; height: 400px; margin:10px auto;
background: linear-gradient(to top, green, yellow, red);
}

.caja2 { width:500px; height: 400px; margin:10px auto;
background: radial-gradient(green, yellow, rgb(255,140,0));
}

/*background: rgb(162,125,125);
background: radial-gradient(circle, rgba(162,125,125,1) 0%, rgba(0,0,0,1) 25%, rgba(0,212,255,1) 100%);*/

.caja3 {width:500px; height: 400px; margin:10px auto;
    background-color:#000000; background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
    rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
    rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
    rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
    rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
    rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
    rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
    rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
    rgba(143, 77, 63, 0.25) 10px);
}

.caja4 {width:500px; height: 400px; margin:10px auto;
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
}

/***** Estilos para TRANSFORMACIONES *****/

.transformar {
/* transform: rotate(90deg); transform-origin: bottom left; */
transform: skewX(10deg) translateX(150px); transform-origin: bottom left; }

/***** Estilos para TRANSICIONES *****/

.parrafo-transicion {
    width:370px; margin-left: 140px; margin-top: 40px; padding: 10px;
    color:#222; font-weight: bold; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #ffaa00;

    transition: all 3s;
    transition: background-color 1s linear;
}
.parrafo-transicion:hover {
    background-color: #3f3f3f;
    color:#eee;
}
#bola {
    border-radius: 50px; width:100px; height: 100px;
    background-color:brown; position: absolute; top:60px; left:10px;
    transition: all 4s;
}

/***** Estilos para ANIMACIONES *****/

h2.animacion {
    color:darkolivegreen; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate;
}

@keyframes slidein {
    from {
        margin-left: 100%; width: 100%;
    }
    to {
        margin-left: 0%; width: 100%;
    }    
    50% {
        font-size:200%;
    }
}