@charset "UTF-8";
/* Hoja de estilo de Cowweb */
body{
/*Fondos */
background-color: lightblue;
background-image: url("../imagenes/background.png");
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
 }


	h1{
	color: lightskyblue;
	background-color: lightcyan;
	width: 50%;
	height: auto;
	/*
	margin: 100px;
	margin-top: 0;
	margin-left: auto;
	margin-bottom: 50px;
	margin-right: auto;
	margin: 10px 20px 30px 40px;
	*/
	margin: 100px auto;
	padding: 30px 0;
	text-align: center;
	/*Bordes
	3 propiedades (ancho, color, estilo)
	border-width: 25px;
	border-color:blue;
	border-style: solid;
	border: none; <- Para quitar el borde
	
	/* Notación específica para cada borde
	border-top-color: skyblue;
	border-right-color: lightsteelblue;
	border-left-color: steelblue;
	border-bottom-color: cyan;
	border-top-style: dotted;
	border-left-width: 100px;	
	Notación condensada (a todos a uno en concreto)
		border: o border-left: 
	*/
	
	border: 7px lightskyblue solid;
	border-radius: 100px 0;
	
	/*Para hacer doble borde
		outline:10px lightblue dotted;*/
	outline: none;
	
	
	/*	Para poner la sobre hacia arriba
		box-shadow: 10px 10px black;
		offset-x offset-y blur spread color;
		
		Para poner la sombra dentro de la caja, agregar la palabra inset al principio.
		box-shadow: inset ... los valores*/
	box-shadow: 10px 10px 5px 2px lightblue;
}

h2{
color:dodgerblue;
text-align: center;
width: 50%;
margin: 30px auto;
background-color: azure;
background-image: url("imagenes/background.png");
background-repeat: repeat-x;
background-position: left center;
border: 2px solid black;
padding: 10px;
border-radius: 20px;

}

nav{
width: 50%;
margin: 50px auto;
padding: 20px;
border: 1px solid black;
background-color: lightcyan;
background: linear-gradient(to right, lightpink, 200px, lightcyan);
/*background: radial-gradient(lightcyan, lightpink);*/
/*background: repeating-conic-gradient(lightcyan, lightpink);*/
}


/*Colores*/
h1{ /*Nombres de color*/
color:cornflowerblue;
background-color: lightcyan;
}

h2{ /*Valores RGB*/
color: rgb(220,40,80); /*Función rgb()*/
background-color: #D77587 /* Función hexadecimal*/
}

h3{ /*Valores HSL*/
color: #081; /* Web Safe Colors (hexadecimal)*/
background-color: hsl(200,50%,50%);
}

p{ /*Transparencia: rgba() hsla()*/
background-color: rgba(234,153,189, 0.5);
}