* {
    box-sizing: border-box;
}

/*Estilo para la pagina*/
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/*Estilo del Encabezado*/
header {
    background-color: rgb(48, 69, 110);
    padding: 30px;
    text-align: center;
    font-size: 25px;
    color: rgb(250, 250, 81);
}

/*Estilo para principal que debe ser un contenedor flexible*/
main {
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

/*Estilo a la caja del menu*/
nav {
    -webkit-flex:1 ;
    -ms-flex:1 ;
    flex:0.5;
    background-color: #3a4462;
    padding: 30px;
}

/*Estilo a nuestra lista*/
ul#temas {
    list-style-type: none;
    padding: 20px;
    text-decoration-line:none ;
}

/*Estilo a los elementos de la lista*/
li.elemento {
    padding-bottom: 25px;
    font-size: larger;
    font-weight: bold;
}

/*formato para la caja del logo*/
figure {
    width: 100px;
    height: 100px;
    float: left;
}

/*Estilo al logo*/
img#logo { 
    width: 200px;
    max-height: 200px;
    padding-bottom: 30px;
    margin-left: 40px;
}

/*Estilo a la imagen que esta en el centro*/
img#center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 450px;
    width: 550px;
}

/*Estilo al area de seccion*/
section {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color:#f1f1f1;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

/*Estilo a los articulos*/
article {
    text-align: justify;
    font-family: Helvetica;
    margin-right: 2%;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

/*Estilo a pie de pagina*/
footer {
    background-color: rgb(2, 81, 117);
    padding: 10px;
    text-align: center;
    color: white;
}

/*Estilo enlaces no visitados*/
a:link {
    color: rgb(102, 66, 0); 
    text-decoration-line:none;
}

/*Estilo enlaces visitados*/
a:visited {
    color: rgb(171, 174, 177); 
    text-decoration-line:none;
}

/*Estilo enlaces al pasar el curzor*/
a:hover {
    color: rgb(129, 0, 158);
    text-decoration-line:none;
}

/*Estilo enlaces activos*/
a:active {
    color: rgb(3, 80, 3);
    text-decoration-line: none;
}

/*diseño responsivo menu y contenido*/
@media (max-width: 800px) {
    main {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}