@charset "utf-8";
/* CSS Document */
* {margin: 0px;}
body {background-color: #000;font-family:"Metal Mania", system-ui;}
/*estilo a mi capa header con parallax*/
header {background-image:  url("../img/halloween.jpg"); background-position: center; background-size: cover; height: 500px;/*con las siguientes propiedades añado parallax a mi fondo del header >>*/background-attachment: fixed; background-repeat: no-repeat;text-align: center;}
header.laura {background-image: url("../img/halloween_laura.jpg");}
/* ............ */
/* ............ */
/*AQUÍ TENÉIS QUE AÑADIR LA CLASE A HEADER - header.nombre (vuestro nombre) y luego tenéis que llamarla en vuestro HTML*/
header.rodrigo {background-image: url("../img/rodrigo.jpg")}




/*HASTA AQUÍ VUESTRA EDICIÓN DE STYLE, si quieres añadir o cambiar más estilos crea OTRA HOJA DE ESTILOS .css y llámala desde tu html tunombre.html en head
A PARTIR DE AQUÍ NO TOCAR ESTILOS*/
/* ............ */
/* ............ */
/*Con la media lo que hago es reducir la altura de header en versiones de pantalla más pequeña, de hasta 800px*/
@media (max-width: 800px) {
	header {height:  250px;background-image: none; background-color: #000;}
}
.fondo {background-color: rgba(0,0,0,0.6);height: 500px;}
nav {position: fixed;background-color: #000;width: 100%;height: 10%;box-shadow: 4px 5px 5px;}
nav ul {float: right; list-style: none;padding: 20px 20px 0px 0px;}
nav ul li {display: inline;padding: 10px;border-radius: 3px;}
nav ul li a {color: #fff; text-decoration: none;text-transform: uppercase;}
nav ul li:hover {background-color: red;}
nav ul li a:hover {color: #fff;}
nav ul li.active {background-color: red;}
h1 {padding-top: 15%;color: #fff;font-size: 6rem;text-shadow: 5px 5px 5px red;}
button {padding: 10px; font-size: 1rem;background-color: #000; color: #fff;border-radius: 3px; border-color: red;}
button:hover {background-color: red; color: #fff;border-color:red;}
/*fin de estilo contenido header*/

/*ahora doy estilo al contenido1 */
.contenido1 {padding: 20px 8%;color: #fff; height: 150px; width: 80%;display: grid;grid-template-columns: 100%;column-gap: 5%;align-content: center;}
.contenido1 p {text-align: center; font-size: 2em;line-height: 1em;text-shadow: 5px 5px 5px red;}
h2, h3 {color: #fff; font-size: 2.5rem;padding: 40px 0;text-shadow: 3px 3px 3px #000;text-align: center;}
/*.c1 { width: 90%;margin: 0 auto;}
.img1 {padding: 3% 0px;}
.img1 h3 {width: 45%;float: right; display: inline;font-size: 2rem;color: #fff;text-align: justify;}
.img1 img {width: 20%;border-radius: 10px;box-shadow: 5px 5px 10px rgba(81,36,0,0.9);}*/
/*fin de estilos para mi capa contenido1*/

/*comienzo de mi estilo contenido2*/
.contenido2 {width: 90%; margin: 0 auto;padding: 20px 2% 60px 2%;;vertical-align: middle;/*estas propiedades son para trabajar con grid lo último en css para contabilizar por columnas>>*/display: grid;text-align: center;grid-template-columns: 13% 13% 13% 13% 13% 13% 13%;column-gap: 2%;align-content: center;grid-row-gap: 8%;}
/*.oculto {display: none;vertical-align: middle;padding: 15px 15px; background-color: #570406;border-radius: 10px;}*/
.contenido2 img {width: 90%; border-radius: 3px;box-shadow: 0px 0px 20px red;margin-bottom: 5%;overflow: hidden;}
.contenido2 img:hover {width: 100%;}
@media (max-width: 600px) { .contenido2{ grid-template-columns: 100%;}}
.contenido2 p {text-align: center;color: #fff;font-size: 1.2rem;padding: 10px 0 10px 0;}
/*fin de estilos para mi capa contenido2*/
/*inicio de estilos para mi pie de página*/
footer {margin-top: 60px;text-align: center;box-shadow: 0px -5px 20px red;padding:10px 0px 0px 0px;height: 80px;background-color: #000; font-size: 1.2rem; color: red;/*estas propiedades son para trabajar con grid lo último en css para contabilizar por columnas>>*/display: grid; grid-template-columns: 80% 20%;}
footer p {padding-top: 0px;}
footer nav {position: relative; box-shadow: none;float: none;display: block;padding: 0px;}
footer a {color: #fff;}