@charset "utf-8";
/* CSS Document */
* {margin: 0;}
body {background-color: rgba(81,36,0,0.5);}
header {background-image:url( "../img/coffee-shop-7711529_1280.jpg");text-align: center; width: 100%; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; height: 10%;}
nav {position: fixed; background-color:orange; width:100%; height: 80px; box-shadow: 4px 5px 5px;}
nav ul {padding:20px 25px 0 0;}
nav ul li{display: inline; padding-right: 50px; color:black; text-decoration: none; text-transform: uppercase; font-size: 30px;}
nav ul li:hover {background-color: black; color:orange;}
nav ul li a {color: black; text-decoration: none; text-transform: uppercase;}
nav ul li a:hover {color: greenyellow;}
nav ul li {display: inline; padding:10px; border-radius: 10px;}
h1 {font-size: 10rem; color: #FFCE01; padding-top: 17%; text-shadow: 5px 5px 5px black;}
button {background-color:orange; padding: 20px 20px;margin: 17%; text-transform: uppercase; border-radius: 10px; font-size: 25px;}
.contenido1 {padding: 8% 0px; background-color: rgba(81,36,0,0.5);}
h2, h3 {font-size:6em; color: chocolate; text-align: center; padding: 40px 0; text-shadow: 3px 3px 3px black;}
.c1 {width: 60%; margin: 0 auto;}
.img1 {padding: 3% 0;}
.img1 p {width: 45%; float: right; display:inline-block; font-size:30px; color: antiquewhite; height: 30%; text-align: justify;}
.img1 img {width:50%; border-radius: 10px; box-shadow: 5px 5px 10px;}
/*fin de estilos header*/
/*comienzo de mi estilo contenido2*/
.contenido2 { width: 90%; margin: 0 auto; padding: 3% 0;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: 3%;}
.oculto {display: none;vertical-align: middle; padding: 15px; background-color: black; border-radius: 10px;}
.contenido2 div:hover .oculto {display: block;}
.contenido2 div:hover p {display: none;}
.contenido2 img {width: 100%; border-radius: 10px; box-shadow: 5px 5px 10px black;margin-bottom: 20px;}
@media (max-width: 600px) { .contenido2{ grid-template-columns: 100%;}}
.contenido2 p {text-align: justify; font-size: 30px; color: antiquewhite;}
/*fin de mi estilo contenido2*/
/*aqui empieza mi footer*/
footer {text-align: center; background-color: chocolate; padding: 35px; font-size: 25px; color: antiquewhite; display: grid; box-shadow: 0px -10px 5px black; height: 80px; grid-template-columns: 50% 50%;margin-top: 80px;}
footer p {padding: 20px 0;}
footer nav {position: relative; box-shadow: none; float: none; display: block; padding: 0px; background: none;}