* { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 1rem; line-height: 1.5; color: 333; overflow-x: hidden; justify-content: center; align-items: center; min-height: 100vh; } /*****************************/ .tar{ max-width: 100%; } /*****************************/ .number{ max-width: 100%; } /*ENCABEZADO*/ .contenedor0{ background-color: rgba(0, 0, 0, 0.959); } .header { height: 7s0vh; display: flex; align-items: center; text-align: center; color: rgb(113, 87, 20); } .content { max-width: 50rem; padding-left: 1rem; padding-right: 1rem; margin: auto; text-align: center; } .header-overlay { height: 80vh; width: 100vw; position: absolute; top: 0; left: 0; background: #d1735416; z-index: 1; opacity: .95; } .header-content { height: 100%; width: 100%; z-index: 2; display: block; } .header-content h1 { height: 100%; width: 100%; font-size: 250%; margin-bottom: 0; font-family: 'Lobster', cursive; position: relative; } @media (max-width: 960px) { .content { padding: 0 3rem 0 3rem; } } @media (min-width: 980px) { .header-content h1 { height: 100%; width: 100%; font-size: 100px; } } .img-fluid { width: 500px; max-width: auto; height: auto; } /*BARRA DE NAVEGACIÓN*/ .navbar { overflow: hidden; background-color: beige; } .navbar a { display: table; color: chocolate; padding: 15px 25px; font-size: 18px; text-decoration: none; } .navbar a:hover { color: red; transition: all .3s; background-color: rgba(210, 105, 30, 0.452); } @media screen and (max-width: 600px) { .navbar a { float: none; width: 100%; } } /*CONTENIDO*/ .fondo1{ background-image: url(../src/fondo2.jfif); background-size: 100% 100% 100% 100%; padding: 45px; margin: 20px; border: 5px solid rgb(90, 21, 21);/*crea un borde solido */ } .Titulo{ text-align: center; color: chocolate;; } h2{ text-align: center; color: chocolate;; } .app{ width: 100%; height: 100%; } .imagen1{ height: auto; border-radius: 50%; animation-name: girarb; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear; display: inline-block; border: 5px solid rgb(90, 21, 21);/*crea un borde solido */ max-width: 100%;/**/ } @keyframes girarb{ from{ transform: rotate(0deg); }to{ transform: rotate(360deg); } } /* //girrar la imagen img:hover{ transform: rotate(1080deg); transition: 1s ease-in-out; } */ .row{ margin: 10px auto;/*lo coloca en el centro */ text-align: justify; } .row div{ padding: 2em; } .column1 ul{ list-style-type: none;/* quita los puntos*/ margin: 0; padding: 0; max-width: 100%;/**/ } .column1 li{ padding: 10px;/* tano*/ margin-bottom: 10px; background-color: rgba(210, 105, 30, 0.452); color: rgb(10, 10, 10); text-align: center; } .column1 .lista:hover{ background-color: rgba(255, 0, 0, 0.701); } .column3{ color: black; } /*Para escritorio*/ @media only screen and (min-width: 768px){ .column1{width: 20%;} .column2{width: 40%;} .column3{width: 40%;} } /*panatalla de 992px*/ @media screen and (max-width: 992px){ .column1{ width: 100%; } } /*FOOTER O PIE DE PÁGINA*/ .pie-pagina{ width: 100%; background-color: rgb(113, 87, 20); } .pie-pagina .grupo-1{ width: 100%; max-width: 1200px; margin: auto; display:grid; grid-template-columns: repeat(3, 1fr); grid-gap:50px; padding: 45px 0px; } .pie-pagina .grupo-1 .box figure{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .pie-pagina .grupo-1 .box figure img{ width: 250px; } .pie-pagina .grupo-1 .box h2{ color: #fff; margin-bottom: 25px; font-size: 20px; } .pie-pagina .grupo-1 .box p{ color: #efefef; margin-bottom: 10px; } .pie-pagina .grupo-1 .red-social a{ display: inline-block; text-decoration: none; width: 45px; height: 45px; line-height: 45px; color: #fff; margin-right: 10px; background-color: rgba(248, 137, 10, 0.603); text-align: center; transition: all 300ms ease; } .pie-pagina .grupo-1 .red-social a:hover{ color: aqua; } .pie-pagina .grupo-2{ background-color: rgba(255, 168, 6, 0.137); padding: 15px 10px; text-align: center; color: #fff; } .pie-pagina .grupo-2 small{ font-size: 15px; } @media screen and (max-width:800px){ .pie-pagina .grupo-1{ width: 90%; grid-template-columns: repeat(1, 1fr); grid-gap:30px; padding: 35px 0px; } }