* {
    box-sizing: border-box; 
}

body {
    font-family: 'Times New Roman';

}

/* estilo del encabezado */

header {
 background-color: rgb(185, 211, 71); 
 padding: 30px ;
 text-align: center;
 font-size: 25px;
 color: rgb(83, 0, 156);
}

/* contenedor para cajas flexibles */

main {
display: -webkit-flex;
display: flex;
width: 100%;
}

/* estilo para menú de navegación */

nav {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: .5;
    background-color: rgb(170, 123, 223);
    padding: 40px;
}

/* estilo para lista del menú */

#temas {
    list-style-type: none;
    padding: 20px;
    text-decoration-line: none;

}

/* estilo para elementos de la lista */

li.elemento {
    padding-bottom: 25px;
    font-size: large;
    font-weight: bold;
    text-decoration-line: none;
}

/* estilo para la imagen centrada */

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 350px;
    width: 30%;
    border-radius: 15px;
}

/* estilo al contenido */

section {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

/* estilo para text */

text {
    text-align: justify;
    font-family: sans-serif;
    color: #000000;
    margin: 2%;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

/* estilo para los enlaces no visitados */

a:link {
    color: #4c1a7e;
    text-decoration-line: none;
}

/* estilo para los enlaces visitados */

a:visited {
    color: #4c1a7e;
    text-decoration-line: none;
}

/* estilo para los enlaces al pasar el cursor encima */

a:hover {
    color: rgb(185, 211, 71);
    text-decoration-line: none;
}

/* estilo para los enlaces al ser activados */

a:active {
    color: #000000;
    text-decoration-line: none;
}

/* diseño responsivo para div principal */

@media (max-width: 800px) {
    main {
        -webkit-flex-direccion: column ;
        flex-direction: column;
    }
}