* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    margin: 20px;
   line-height: 1.7em;
   font-size: 1em;
}

h1 {
    font-family: Arial;
    text-align: center;
    color: mediumblue;
    font-size:40px;
}

p {font-family: Arial;
    text-align:justify;
    color:black;
   line-height: 1.7em;
   font-size: 1em;
}

/* Estilo del encabezado*/
header {
    background-color:palevioletred;
    padding: 3px;
    text-align: center;
    font-size: 5px;
    color:royalblue;
}
/* Contenedor para cajas flexibles */
main {
    display: flex;
    width: 100%;
}
/* Estilo para el menú de navegación */
nav {
    flex: .5;
    background: darkcyan;
    padding: 20px;
    font-family: Georgia;
}
/*Estilo para el menu de navegación */
ul#temas {
    list-style-type: none;
    padding: 20px;
    text-decoration-line: none;
}
/* Estilo para elementos de la lista dentro el menú */
li.opcion {
    padding-bottom: 200px;
    font-size: large;
    font-weight: bold;
}
/* Estilo para figure */
figure {
    width: 150%;
    max-height: 100px;
    float: left;
}
/* Estilo para logo */
img#logo {
    width: 115px;
    max-height: 90px;
    padding-bottom: 20px;
    margin-left: 40px;
}
section {
    flex: 3;
    background-color:snow;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}
/* Estilo para la imagen */
img#center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 350px;
    width: 40%;
}

img#fresa {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 350px;
    width: 20%;
}

img#collage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 300px;
    width: 45%;
}
img#pandemia {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 400px;
    width: 30%;
}

img#de {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 400px;
    width: 40%;
}

#mivideo {text-align: center;}

#gif {margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 1000px;
    width: 100%;
    text-align: center;
}

/* Estilo para articulo */
article {
    text-align: justify;
    font-family: Georgia;
    margin-left: 2%;
    margin-right: 2%;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
}
/* Estilo para el pie de pagina */
footer {
    background-color: rosybrown;
    padding: 10px;
    text-align: center;
    color: black;
}

/* Estio para los enlaces no visitados */
a:link {
    color: seagreen;
    text-decoration-line: none;
}
/* Estilo para los enlaces visitados */
a:visited {
    color: black;
    text-decoration-line: none;
}
/* Estilo para los enlaces al pasar el cursor encima */
a:hover {
    color: orange;
    text-decoration-line: none;
}
/* Estilo para los enlaces al ser activados */
a:active {
    color: red;
    text-decoration-line: none;
}
/* Diseño responsivo: común y contenido (dentro de cuerpo) uno encima del otro */
@media (max-width: 800px) {
    main  {
    flex-direction: column;
    }
}