/* Estilos generales */

body {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    background-color: #042233;
    margin: 0;
    padding: 0;
}
main{padding: 20px;
}
	
.content {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0px;
	background-color: #042233;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Estilos del encabezado */

header {
    background-color: #09104F;
	background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    text-align: center;
    padding: 20px 0;
}


header h1 {
    font-size: 30px;
}

h2 {
    font-size: 15px;
}


header img {
    max-width: 250px;
    border-radius: 50%;
}

/* Estilos de la barra de navegación */

nav {
    background-color: #4575B7;
    padding: 10px 0;
    text-align: center; /* Centrar horizontalmente */
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

.boton-menu {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el espacio interno del botón según tus preferencias */
    background-color: #007BFF; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    text-decoration: none; /* Quita la subraya de los enlaces */
    border: none; /* Quita el borde del botón */
    border-radius: 5px; /* Borde redondeado */
    margin-right: 10px; /* Espacio entre botones (puedes ajustarlo según tus necesidades) */
}

/* Estilos adicionales al pasar el mouse sobre los botones (efecto hover) */
.boton-menu:hover {
    background-color: #0056b3; /* Cambia el color de fondo al pasar el mouse */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
}







/* Estilos de la sección principal */

section {
    display: grid;
	/*repetir automatic, tamaño mínimo 18 rems máx 1fr que sería 100% */
	grid-template-columns: repeat (auto-fit, minmax(10rem, 10fr)) ;
    grid-gap: 1rem;
}

article {
    background-color: #ecf0f1;
    margin-bottom: 20px;
    padding: 20px;
    flex: 0 0 calc(33.33% - 20px);
    box-sizing: border-box;
    border-radius: 25px; /* Añadir esquinas redondeadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Añadir sombreado */
}

article h3 {
    font-size: 18px;
}

article ul {
    list-style: none;
}

article li {
    padding: 5px 0;
}

/* Estilos del pie de página */

footer {
	
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 2px 0;
}

footer p {
  /* Cambia el tamaño del texto dentro del footer ajustando el valor de font-size */
  font-size: 10px; /* Puedes usar cualquier valor de tamaño de fuente que desees */
}

footer p {

  font-family: "Arial", sans-serif;
}

.otro-estilo {
    color: #53BFD7; /* Cambia el color del texto */
    font-weight: bolder; /* Hace el texto en negrita */
    font-size: 12px; /* Cambia el tamaño de fuente según tus preferencias */
    /* Agrega otros estilos según lo que desees */
}