:root { --text-color: black; --card-background-color: rgba(55, 66, 74, 0.5); --background-color: rgba(55, 66, 74, 0.8); --background-color-btn: rgba(200, 242, 155, 1.0); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Poppins, sans-serif; color: black; max-width: 1100px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; min-height: 100sdvh; min-height: 100ldvh; /* Todo el sitio en grid, ocupa todo el espacio, header y footer en su posición independientemente del tamaño de la página */ display: grid; grid-template-rows: auto 1fr auto; } /* ========== NAV BAR ========== */ nav { padding-top: 1em; padding-right: 1em; } .nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 100%; } .nav img { height: 5rem; } .nav a { text-decoration: none; } .nav li { list-style: none; } .nav li:nth-child(-n + 2) { flex-grow: 1; } .nav li:nth-child(n + 3) { flex-basis: 100px; text-align: center; } .nav li:last-child { background-color: var(--background-color-btn); font-weight: bold; font-size: large; border: solid 1px black; padding: 0 1em; border-radius: 5px; } /* ======== END NAV BAR ======== */ main { width: 100%; padding: 0em 1em; text-align: justify; } main h1, h2, h3 ul, p { padding-bottom: 1em; } main a { text-decoration: none; } main li { margin-left: 1em; } /* ========== SLIDER =========== */ .slider img { display: blcok; object-fit: contain; height: 80vh; width: 100%; } /* ======== END SLIDER ========= */ /* ========== CARDS ============ */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); grid-auto-rows: minmax(150px, auto); grid-gap: 1rem; margin-top: 0.5rem; } .cards > div { padding: 0.5rem; background-color: var(--card-background-color); color: white; border: solid black 1px; } .cards > div h3 { padding-bottom: 2rem; text-align: center; } .col:nth-child(2) { border: solid black; background-color: white; color: black; } .cards .p_center { text-align: center; } /* ======== END CARDS ========== */ /* ========= NOSOTROS ========== */ .nosotros { margin: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(350px,2fr)); grid-gap: 10px; padding-bottom: 0.5rem; } .card { padding: 0.5rem; background-color: var(--background-color); color: white; } .card h3 { padding-bottom: 2rem; text-align: center; } .card img { display: block; object-fit: cover; width: 100%; height: 100%; } /* ======= END NOSOTROS ======== */ /* ======== DONATIVOS ========== */ form { padding: 2rem 7rem; } .table-box { font-size: 1rem; line-height: 0.5em; } .table-row { /* display: table;*/ background: transparent; font-size: 1rem; /* line-height: 0.4em;*/ } .table-cell { display: table-cell; text-align: left; } .first-column { display: table-cell; width: 15ch; } /* ====== END DONATIVOS ======== */ /* ========= ALIANZAS ========== */ .alianzas { display: grid; grid-gap: 10px; padding: 1em; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); } .alianzas img { height: 150px; width: auto; vertical-align: middle; /* Centrado de imágenes */ display: block; margin-left: auto; margin-right: auto; } /* ======= END ALIANZAS ======== */ /* ========= REPORTES - CONTACTO ========== */ .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1; z-index: -1; opacity: 0.8; } .two img { width: 100%; height: 90vh; object-fit: cover; } /* ====== END - REPORTES - CONTACTO ======= */ /* ========== FOOTER =========== */ .footer { background: var(--background-color); color: white; padding: 0.5em; /* align-items: center;*/ height: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .footer .redes { width: 100%; padding-top: 0.5em; display: flex; flex-wrap: wrap; justify-content: space-around; } .footer li { list-style: none; flex-basis: 50px; } .footer li:nth-child(-n + 1) { flex-grow: 1; text-align: left; } .footer a { text-decoration: none; } .footer img { height: 1em; } /* ======= END - FOOTER ======== */ /* ==== PAGINA NO ENCONTRADA === */ .notfound { text-align: center; font-size: 1.8rem; } /* = END - PAGINA NO ENCONTRADA */ /* ========== DARK MODE ======== */ @media (prefers-color-scheme: dark) { body { color: #eee; background: #121212; } body a { color: #809fff; } img { filter: brightness(.8) contrast(1.2); } /* SVG icon */ body.dark-theme svg.icon path { fill: #efefef; } /* Font icon (using Font Awesome as an example) */ body.dark-theme .fa { color: #efefef; } } /* ====== END - DARK MODE ====== */