body 
{
 text-align: center;
}

#principal 
{
 display: block;
 width: 500px;
 margin: 50px auto;
 padding: 15px;
 text-align: center;
 border: 1px solid #999999;
 background: #DDDDDD;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px; /* esquinas redondeadas, misma curvatura, un solo valor */

-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
-ms-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(150,150,150) 5px -5px; /* sombra, desplazamiento (horizontal y vertical) en pixeles (+ ó -) */

background: -webkit-linear-gradient(top, #ffffff, #006699); /* fondo, color o imagen, linear-gradient(posición inicio,color inicial, color final) 
	.... 30deg, #FFFFFF, #006699 --> ángulo para declarar punto de comienzo en una dirección específica del gradiente*/
background: -moz-linear-gradient(top, #FFFFFF, #006699);

outline: 2px dashed #000099; /* crea un segundo borde de 2 pixeles con un desplazamiento de 15 pixeles. */
outline-offset: 15px;

-moz-transform: scale(1.5);
-webkit-transform: scale(1.5); /* scale (escalar, entre 0 y 1 reducirán el elemento, 1 mantendrá proporciones originales y mayores que 1 aumentarán. scale(1,-1)), 
	rotate (rota en dirección de las agujas de un reloj, valor en grados “deg”), 
	skew (inclinar, skew(20deg)) y translate (traslada o mueve a partir de su posición original) */

-moz-transition: -moz-transform 1s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 1s ease-in-out 0.5s; /* propiedad que será para hacer la transición (transform). 
  2° parámetro especifica el tiempo que la transición se tomará para ir de la posición inicial a la final. 
  3er parámetro puede ser cualquiera de las siguientes palabras clave: ease, linear, ease-in, ease-out o ease-in-out (basado en una curva Bézier) 
  El último parámetro es el retardo. Éste indica cuánto tiempo tardará la transición en comenzar.
	Para producir una transición para todas las propiedades que están cambiando en un objeto, la palabra clave all debe ser especificada. */

}

#principal:hover{  /* pseudo clase */
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg); /* cuando el mouse pasa sobre esta caja rota en 2 grados, y cuando se aleja la caja vuelve a su posición original. */
}

#titulo 
{
 font: bold 36px verdana, sans-serif;
 text-shadow: rgb(0,0,150) 3px 3px 5px;  /*sombras para figuras irregulares como textos, valores iguales a box-shadow */
 color: hsla(50, 100%, 50%, 0.5);  /* 0-360:rojo, 120:verde, 240:azul */
				/* tono,saturacion,luminosidad,opacidad */
}