@charset "utf-8";
/* CSS Document */
* {margin: 0px;}
body {background-color: rgba(81,36,0,0.5);}
/*estilo a mi capa header con parallax*/
header {background-image: url( "../img/ai-generated-8592890_640.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;}
/*con la media lo que hago es reducir la altura del header en versiones de pantalla más pequeña, de hasta 800px*/
@media (max-width:800px) {
	header {height: 250px;background-image: none; background-color: #784c0c;}
}
.fondo{background-color: rgba(0,0,0,0.3);height: 500px;}
nav {position: fixed;background-color: #fff;width: 100%;height: 8%;box-shadow: 4px 5px 5px;}
nav ul {float: right; list-style: none;padding: 20px 20px 0px 20px;}
nav ul li {display: inline;padding: 15px;text-align: center; border-radius: 10px;}
nav ul li a {color: #000;text-decoration: none;text-transform: uppercase;}
nav ul li:hover {background-color: #512400;}
nav ul li a:hover {color: #fff;}
h1 {padding-top: 10%;color: #fff;font-size: 6rem;text-shadow: 5px 5px 5px black;}
button {padding: 15px; font-size: 2rem;background-color: #512400;color: #fff;border-radius: 10px;margin-top: 50px;border-color: aliceblue;}
button:hover {background-color: #fff; color: #512400; border-color: #D3D3D3;}
/*fin de estilo contenido header*/
/*ahora doy estilo al contenido1 */
.content1 {padding: 4% 0px;}
h2, h3 {padding: 60px; color: #fff; font-size: 3rem;padding-bottom: 60px; text-shadow: 3px 3px 3px #000;text-align: center;}
.c1 {width: 60%;margin: 0 auto;}
.imagen1 {padding: 3% 0px;}
.imagen1 p {float: right; display: inline-block; width: 45%; color: #fff;font-size: 2rem; text-align: justify;}
.imagen1 img {width: 45%;height: 400px; border-radius: 15px;box-shadow: 5px 5px 10px #000;}
/*fin de estilos para mi capa content2*/

/*comienzo de mi estilo content2*/
.content2 {width: 90%;margin: 0 auto;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: 30% 30% 30%; column-gap: 5%;}
.content2 img {width: 90%; border-radius: 15px;box-shadow: 5px 5px 10px #000;}
@media (max-width: 600px) { .contenido2{ grid-template-columns: 100%;}}
.content2 p {padding: 30px; text-align: justify; color: #fff; font-size: 1.3rem;}
.oculto {display: none; background-color: #512400; border-radius: 10px;padding: 10px;}
.content2 div:hover p {display:none;}
.content2 div:hover p.oculto {display: block;}
/*fin de estilos para mi capa content2*/

/*comienzo de mi estilo footer*/
footer {margin: 0 auto; text-align: center; box-shadow: 0px -5px 10px #512400; padding: 15px; height: 80px; background-color: #fff;font-size: 1.2rem;display: grid;grid-template-columns: 50% 50%;}
footer nav {position: relative; display: block; padding: 0 80px 0 0 ;box-shadow: none;}
.inf1 {position: relative;background-color: #fff;width: 100%;height: 8%;box-shadow: 4px 5px 5px;}
.inf1 ul {float: left; list-style: none;padding: 20px 20px 0px 10px;}
.inf1 ul li {display: inline;padding: 15px;text-align: center; border-radius: 10px;}
.inf1 ul li a {color: #000;text-decoration: none;text-transform: uppercase;}
.inf1 ul li:hover {background-color: #512400;}
.inf1 ul li a:hover {color: #fff;}
footer p {padding-top: 25px;}