*{
    box-sizing: border-box;
}
body{
    font-family: Century Gothic, Helvetica, sans-serif;
}
/* Estilo del encabezado */
header {
  background: rgb(172, 144, 247);
    padding: 30px;
    text-align: center;
    font-size: 19px;
    color: rgb(10, 6, 226);
}
/* Estilo de top navigation bar - la barra de navegación superior */
 
.navbar {
  display: flex;
  justify-content: center;
}

/* Estilo de nagation bar links - las ligas de la barra de vínculos*/

.navbar a {
  color: rgb(92, 82, 243);
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

/* Cambiar color al pasar el cursor sobre opción del menú */

.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/*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: #ccc;
    padding: 30px;
}
button {
  font-size: 0.9em;
  background-color: rgb(172, 144, 247);
  color: #fff;
  border: 0.25rem solid #3498db;
  padding: 0.85em 0.75em;
  margin: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
button:hover {
  color: #3498db;
}
button::after {
  content: "";
  background: #ecf0f1;
  position: absolute;
  z-index: -1;
  padding: 0.85em 0.75em;
  display: block;
}
button[class^="slide"]::after {
  transition: all 0.35s;
}
button[class^="slide"]:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.35s;
}
button.slide_from_left::after {
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
}
button.slide_from_right::after {
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
}
button.slide_from_top::after {
  left: 0;
  right: 0;
  top: -100%;
  bottom: 100%;
}
button.slide_from_bottom::after {
  left: 0;
  right: 0;
  top: 100%;
  bottom: -100%;
}
button[class^="grow"]::after {
  transition: all 0.3s ease;
}
button[class^="grow"]:hover::after {
  transition: all 0.3s ease-out;
}
button.grow_box::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0);
}
button.grow_box:hover::after {
  transform: scale(1, 1);
}


/*Estilo para la lista dentro del menu */
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: 150px;
    max-height: 150px;
    padding-bottom: 30px;
    margin-left: 40px;
}
/* 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: #f1f1f1;
padding: 10px;
padding-left: 40px;
padding-right: 40px;
}

/* Estilo para el pie de página */
footer {
  background-color: rgb(172, 144, 247);
    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;
} 

h1 {text-align: center; color: rgb(4, 0, 255); font-family: sans-serif; font-size: 25px; 
}