* {
    box-sizing: border-box;
}

body {
    font-family: serif, monospace, sans-serif;
}
/* Estilo de body */
body {
    font-family: Arial;
    margin: 0;
}

/* Estilo de Header/logo Title */
.header {
    padding: 60px;
    text-align: center;
    background: cornflowerblue;
    color: rgb(255, 255, 255);
}

/*Estilo del encabezado*/
header {
    background-color: rgb(249, 171, 31);
    padding: auto;
    text-align: center;
    font-size: 26px;
    color: rgb(rgb(94, 124, 126));
}

/*Control para cajas flexibles*/
section {
    display: -webkit-flex;
    display: flex;
}

/*Estilo para el menu de navegación*/
nav {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: .5;
    background-color: rgb(248, 234, 105);
    padding: 30px;
} 

/*Estilo para la lista dentro del menu*/
nav ul {
    list-style-type: none;
    padding: 20px;
    text-decoration-line: none;
}

/*Estilo para la lista dentro del menu*/
li.opcion { 
    padding-bottom: 25px;
}

/*Estilo para el div logo */
div.cajalogo {
    width: 150px;
    max-height: 100px;
    float: left;
}

/* Estilo para logo */
img.logo {
    width: 150px;
    max-height: 150px;
    padding-bottom: 30px;
    margin-left: 40px;
}

/*Crear dos columnas desiguales que se encuentren una al lado de la otra */
/* Barra lateral / columna izquierda */
.main {
    flex: 30%;
    background-color: rgb(#FFCA00);
    padding: 20px;
}
/* Columna principal */ 
.main {
    flex: 30%;
    background-color:rgb(#AD99C8);
    padding: 20px;;
}
/* Estilo para la imagen */
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 400px;
}

/* Estilo para la imagen */
img.app {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 100px;
}

/* Estilo para el contenido */ 
article {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: rgba(247, 161, 154, 0.877);
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

/* Estilo para pie de página */
footer {
    background-color: rgb(41, 86, 170);
    padding: 10px;
    text-align: center;
    color: white;
}

/* Estilo para los enlaces no visitados */
a:link {
    color: violet;
    text-decoration-line: none;
}

/* Estilo para los enlaces visitados */
a:visited {
    color: rgb(2, 0, 158);
    text-decoration-line: none;
}

/*  Estilo para los enlaces al pasar el cursor encima*/
a:hover {
    color: rgb(0, 158, 132);
    text-decoration-line: none;
}

/* Estilo para los enlaces al ser activados */
a:active {
    color: yellowgreen;
    text-decoration-line: none;
}

/* Diseño responsivo: hace que el menú y el contenido (dentro de la sección) se coloque uno encima del otro en lugar de uno a lado de otro */
@media (max-width:600px) {
    section {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

.flex.container {
    display: flex;
}