
* {
    box-sizing: border-box;
    }
    body {
    font-family: Arial, Helvetica, sans-serif;
    }
    /* Estilo del encabezado */
    header {
    background-color: rgb(144, 201, 247);
    padding: 30px;
    text-align: center;
    font-size: 25px;
    color: rgb(9, 56, 95);
    }
    /* Contendor para cajas flexibles */
    section {
    display: -webkit-flex;
    display: flex;
    }
    /* Estilo para el menú de navegación */
    nav {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: .5;
background: rgb(211, 195, 195);
padding: 30px;
}
/* Estilo para la lista dentro del menú */
nav ul {
list-style-type: none;
padding: 20px;
text-decoration-line: none;
}
/* Estilo para elementos de la lista dentro del menú */
li.opcion {
padding-bottom: 25px;
}
/* Estilo para div logo */
div.cajalogo {
width: 150px;
max-height: 100px;
float: left;
}

/* Estilo para logo */
img.logo {
    width: 290px;
    height: 140px;
    padding-bottom: 30px;
    margin-left: 20px;
    }

/* Estilo para la imagen */
img.center {
display: block;
margin-left: auto;
margin-right: auto;
border:none;
max-height: 400px;
}
/* Estilo para el contenido */
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f7e5e5;
padding: 10px;
padding-left: 40px;
padding-right: 40px;
}
/* Estilo para el pie de página */
footer {
background-color: rgb(2, 81, 117);
padding: 10px;
text-align: center;
color: white;
}
/* Estilo para los enlaces no visitados*/
a:link {
color: rgb(102, 66, 0);
text-decoration-line: none;
}
/* Estilo para los enlaces visitados*/
a:visited {
color: rgb(2, 61, 109);
text-decoration-line: none;
}
/* Estilo para los enlaces al pasar el cursor encima*/
a:hover {
color: rgb(129, 0, 158);
text-decoration-line: none;
}
/* Estilo para los enlaces al ser activados*/
a:active {
color: rgb(3, 80, 3);
text-decoration-line: none;
}
/* Diseño responsivo: hace que el menú y el contenido (dentro de la sección) se
coloquen uno encima del otro en lugar de uno al lado del otro. */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.flex-container {
display: flex;
}