/* Quitamos los estilos por defecto */
* {
  box-sizing: border-box;
}

/* Cuerpo del body */
body {
  display: flex; /* Habilitamos flexbox */
  flex-direction: column; /* Apilamos los elementos verticalmente */
  min-height: 100vh; /* Hacemos que el body ocupe toda la altura de la ventana */
  font-family: Verdana;
  color: #aaaaaa;
}

/* Estilos para todos las etiquetas p */
p {
  text-align: justify;
}

/* Estilos del título */
.titulo {
  background-color: #0F4D92;
  padding: 15px;
  text-align: center;
  color: #FFFFFF;
}

/* Estilos del menú */
.menu {
  float: left;
  width: 20%;
  text-align: center;
}

/* Estilos de la etiqueta a dentro de la clase menu */
.menu a {
  background-color: #e5e5e5;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: black;
}

/* Estilos del cuerpo de la página */
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  color: #000000;
  text-align: center;
}

img {
  margin-top: 15%; /* Ajusta este valor según lo necesites */
  margin-bottom: 15%; /* También puedes agregar margen inferior si es necesario */
  display: block; /* Asegúrate de que la imagen se comporte como un bloque */
  margin-left: auto; /* Centra la imagen si es necesario */
  margin-right: auto; /* Centra la imagen si es necesario */
}




/* Estilos del panel de estatus de la página */
.right {
  background-color: #F60003;
  color: #FFFFFF;
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

/* Responsividad */
@media only screen and (max-width: 620px) {
  /* Para teléfonos móviles: */
  .menu, .main, .right {
    width: 100%;
  }
}

/* Estilos del footer */
footer {
  text-align: center;
  padding: 20px;
  background: #0F4D92;
  color: #FFFFFF;
}