h1, h2, h3, h4{
    text-shadow: 1px 1px 10px rgb(167, 169, 172);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgb(24,57,106); 
}

header img {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.him1{
width: 45%;
}

.him1 img{
    width: 20%;
}

.him2{
width: 45%;
}

.him2 h1{
color:rgb(24,57,106);
font-size: 42px;
}

main{
    width: 98%;
    margin-left: 20px;
    text-align: justify;
}

.tabla1{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

table{
    width: 85%;
    font-size: 22px;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
  }

  .tabla2{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .fondo{
    background-color: rgba(167, 169, 172, 0.2);
    }


/* footer */
footer {
    width: 100%;
    height: auto;
    text-align: justify;  
    justify-content: center;
    display: flex;
    padding-bottom: 10px;
    background-image: url(/img/img_footer.png);
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: contain;
    }

    .container1{
    width: 50%;
    height: auto;
    text-align: justify;  
    justify-content: center;
    display: flex;

    }

.row{
    text-align: justify;  
    justify-content: center;
    }

    .informacionfoot{
        text-align: justify;  
        justify-content: center;
        margin-left: calc(20%); 
    }


@media screen and (max-width: 500px) {
        body{
            width: 95%;
            margin-left: 0px;
            margin-right: 0px;
        }
        h1{
            font-size: 25px;
        }
        span{
            font-size: 15px;
        }
        p{
            font-size: 15px;
        }
        .him1{
        width: 45%;
        }
        .him1 img{
            width: 60%;
        }
        .him2{
        width: 45%;
        }
        .him2 h1{
            color:rgb(24,57,106);
            font-size: 20px;
        }

        
        main{
            margin: 15px;
            width: 95%;
            font-size: 15px;
         }

        table{
            width: 90%;
            margin-left: 15px;
            font-size: 17px;
        }

        footer{
            width: 98%;
            margin-bottom: 0px;
            background-image: none;
            background-image: url("/img/img_footer.png");
        }

        .informacionfoot{
                margin-left: 0px;
            }
        footer img{
                width: 90%;
            }
            
    }


    /* Aseguramos que el body ocupe toda la altura */
    body, html {
        height: 100%;
        margin: 0; /* Eliminamos el margen por defecto */
    }

    /* Contenedor que envuelve el div */
    .contenedor {
        display: flex;
        justify-content: center;  /* Centra el div horizontalmente */
        align-items: center;      /* Centra el div verticalmente */
        height: 40vh;            /* Asegura que el contenedor ocupe toda la altura de la ventana */
    }

    /* El div que queremos centrar */
    .mi-div {
        width: 300px;
        height: 200px;
        background-color: lightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }