body {
	background-color: #17212B;

  margin: 10% auto;
  padding: 0 10%;
  max-width: 1100px;

  font-family: "Mononoki", "Open Sans", "Sans", "Arial";
  text-align: left;
  line-height: 1.5em;
  color: #A6B0B9;
  font-size: 100%;
}

a:link {
  color:lightblue;
}

a:visited {
  color: #D7B3FF;
}

:focus {
  outline: 2px solid white;
}

h1 {
  padding: 1em 0;
	font-variant: small-caps;
  text-align: center;
  line-height: 1em;
	font-size: 4em;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.navbar li {
  flex-basis: 10%;
  flex-grow: 1;
}

.navbar .liright {
  float: right;
}

.navbar li a {
  display: block;
  color: #CBD7E1;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
}

.navbar li:hover a {
  background-color: #C8E8FF;
  color: #17212B;
}

h1, .navbar {
  color: #CBD7E1;
	background-color: #2B5278;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h1, .navbar, .navbar a {
  border-radius: 5px;
}

section {
  overflow: auto;
  margin: 60px 0 20px;
}

h2 {
  font-size: 2.4em;
  text-align: center;
  margin: 40px 0;
  line-height: 1.2em;
}

p {
  font-size: 1.1em;
  text-indent: 2em;
}

ul {
  font-size: 1.1em;
}

/* Aumentar tamaño de fuente sólo para el primer nivel de lista. */
ul ul {
  font-size: 1em;
}

.column {
  display: grid;
}

.odd, .even {
  margin: 0 10% 5%;
  max-width: 50%;
  height: auto;
}

.odd {
  float: left;
  margin-left: 0;
}

.even {
  float: right;
  margin-right: 0;
}

.even img, .odd img {
  max-width: 100%;
  height: auto;
  margin: 0;
}

img {
  max-width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 15px;
}

.final {
  margin: 50px 0;
  text-align: center;
}

.final p {
  text-indent: 0;
}

.oldButtons {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* No subrayado para que no aparezca una línea al lado de botones visitados.
 * El selector :visited no funciona para quitar esta línea.
 */
.oldButtons a {
  text-decoration: none;
}

.oldButtons img {
  width: 88px;
  height: 31px;
  margin: .2em;
  border-radius: 0;
  box-shadow: none;
  background: white;
}

@media only screen and (max-width: 600px) {

  .odd, .even {
    margin: 0 10% 20px;
    max-width: 100%;
    height: auto;
    float: none;
  }

  ul {
    padding-left: 5%;
  }

  body {
    text-align: center;
  }

  p {
    text-indent: 0;
  }

}