/* CSS Document */

:root{                       /*Peudoselector y root es una forma de alamcenar variables y es llamado custom porpreties*/
	--blanco:#FFF;
	--obscuro:#000;
	--amarillo:yellow;
	--rojo:#F00;
	--verde:#0F3;
	--azul:#03F;
	--morado:#C0F;
	--fuente-principal: 3.8rem;
	}  
	
	
	.titulo-principal-cumpleaños{
		  text-align:center; /* alienar al centro de la etiqueta h1 */
		  font-style:italic;
   color: var(--amarillo);
   font-size:70px;
   background-image:url(../img/estrellas2.jpg);
   padding:40px;		
		}
	
	.subtitulo {
   text-align:center; /* alienar al centro de la etiqueta h1 */
   font-style:italic;
   color: var(--azul);
   font-size:30px;
   
   }
   
   .parrafos_sub{
	text-align:center; /* alienar al centro de la etiqueta h1 */
   font-style:italic;
   color:var(--obscuro);
   font-size:10px; 
}
	   
	   
   
   .subtitulo-span{
	   background-color:#03F;
	   color:#FFF;
	   padding:5px 15px;
	   margin-top: 10px;
	   font-size:10px;
	   text-transform:uppercase;
	   font-weight:bold;
	   border-radius:10px;
	   width:90%;
	   
	   
		
		
		text-align:center; /* alienar al centro de la etiqueta h1 */
   font-style:italic;
   
   font-size:20px;
   
   
   
   
	   }
	   @media (min-width: 768px ){
		
		body{
			
			
			font-size:2rem
			 
			
			}
			.subtitulo-span{
				
				
				width:auto;
				}
			
		}