body {
	background-color: #17212B;

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

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

a:link {
  color:lightblue;
}

a:visited {
  color: #D7B3FF;
}

h1 {
  padding: 1em;

	font-variant: small-caps;
  text-align: center;
  line-height: 1em;
	font-size: 2em;
}

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 li {
  border-radius: 5px;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar li {
  float: left;
}

.navbar .liright {
  float: right;
}

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

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

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

p {
  text-indent: 2em;
}

img {
  margin: 15px 50px;
  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;
}

.column {
  display: grid;
}

.odd {
  float: left;
}

.even {
  float: right;
}

.final {
  display: block;
  margin: auto;
  text-align: center;
}

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

:focus {
  outline: 2px solid white;
}