body {
 background-color: #cccccc;
}

footer {
  display: flex;
  justify-content: center;
}

.centered-footer {
    /*background-color: #872708; Dark background for visibility */
    color: #872708; /* White text color */
    padding: 20px; /* Some padding around the content */

    display: flex; /* 1. Make the footer a flex container */
    flex-direction: column; /* 2. Stack its children (text and image) vertically */
    align-items: center; /* 3. Horizontally center items along the cross-axis (due to column direction) */
    justify-content: center; /* 4. Vertically center items along the main-axis (if extra space) */
    text-align: center; /* Good fallback for text within the flex items */
}

.centered-footer p {
    margin: 5px 0; /* Adjust spacing for the paragraph */
    font-size: 0.9em;
}

.centered-footer img {
    max-width: 200px; /* Ensure image isn't too large */
    height: auto; /* Maintain aspect ratio */
    margin-top: 10px; /* Add some space above the image */
}

.parallax {
  /* The image used */
  background-image: url("img/libros.jpg");

  /* Set a specific height */
  min-height: 300px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Margin y padding*/
  margin: 10px 10px 10px 10px;
}

h1 {
  font-family: "mifont";
}
h2 {
  font-family: "mifont";
}

h3 {
  font-family: "mifont";
}

p {
  font-family: "mifont";
}

section { 
        margin: 10px 10px 10px 10px;
        padding: 2px 2px 2px 2px;
}

nav{
    width: 100%; /* Ancho completo del contenedor */   
    background-color: #872708;
    font-family: "mifont";
}
nav ul {
    display: flex; /* Activar Flexbox */
    list-style-type: none; /* Quitar estilos de lista */
    padding: 0; /* Quitar padding predeterminado */
    margin: 0; /* Quitar margen predeterminado */
    
}
nav li {
    flex-grow: 1; /* Crecer para ocupar el espacio disponible */
    text-align: center; /* Centrar el texto */
}
nav a {
    display: block; /* Hacer que el enlace ocupe todo el espacio del li */
    margin:0;
    color: white;
    padding: 10px; /* Espaciado para una mejor visualización */
    text-decoration: none; /* Quitar el subrayado del enlace */
    border: 1px solid white;
}
nav a:hover {
    background-color: #e14f0c;
}


th {
    height: 50px;
    width:100px;
    margin: 20px 20px 20px 20px;
    padding: 20px 20px 20px 20px;
    color: white;
    background-color: #00ff00
}
td {
    height: 50px;
    width: 100px;
    text-align: center;
    margin: 20px 20px 20px 20px;
    padding: 20px 20px 20px 20px;
}
.container {
  display: grid;
  grid-template-columns: 150px auto auto auto auto;
  gap: 5px;
}
.container > div {
  background-color: #e76f38;
  text-align: center;
  font-size: 1.1vw;
  font-family: "mifont";
  padding: 8px;
}
#outer-grid {
  display: grid;
  grid-template-columns: 150px auto;
  grid-gap: 5px;
}
#outer-grid > div {
  background-color: #e76f38;
  font-size: 1.1vw;
  font-family: "mifont";
  padding: 8px;
}

.inner-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}
.inner-grid > div {
  background: salmon;
  padding: 8px;
}

.inner-grid1 {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 5px;
}
.inner-grid1 > div {
  background: #e76f38;
  padding: 8px;
}

#inner-grid2 {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}
#inner-grid2 > div {
  background: #e76f38;
  padding: 8px;
}

#inner-grid21 {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}
#inner-grid21 > div {
  background: #e76f38;
  padding: 8px;
}

#inner-grid22 {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}
#inner-grid22 > div {
  background: #e76f38;
  padding: 8px;
}

#inner-grid3 {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5px;
}
#inner-grid3 > div {
  background: #e76f38;
  padding: 8px;
}

#inner-grid31 {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5px;
}
#inner-grid31 > div {
  background: #e76f38;
  padding: 8px;
}
#inner-grid4 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
}
#inner-grid4 > div {
  background: salmon;
  padding: 8px;
}

#inner-grid5 {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 5px;
}

#inner-grid5 > div {
  background: salmon;
  padding: 8px;
}

#inner-grid6 {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 5px;
}
#inner-grid6 > div {
  background: salmon;
  padding: 8px;
}

.inner-gridv2 {
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: 5px;
}
.inner-gridv2 > div {
  background: salmon;
  padding: 8px;
}

#dv0 {
  background-color: #9a3405;
}
svg {
    width: 25px;
    height: 25px;  
}
iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}
@font-face {
  font-family: "mifont";
  src: url("typewriter.ttf");
  }