body {
  font-family:Arial, sans-serif;
  margin:0 auto;
  padding:1em;
  background-color:#f9f9f9;
  max-width:1024px;
}
h1  {
    font-size:1.4em;
    margin:3px;
}
h2 {
    text-align:center;
    margin:0;
}
p {
    line-height:1.3em;
    text-align:justify;
}
a  {
  text-decoration: none;
}
header {
  background-color:#4CAF50;
  color:white;
  padding:4px;
  text-align:center;
}

nav {
  background-color:#4caf50;
}

nav ul {
  list-style-type:none;
  margin:2px;
  padding:0;
  overflow:hidden;
}

nav ul li {
  float:left;
  /* margin:0; */
  /* padding:0; */
}

nav ul li a {
  display:block;
  color:white;
  text-align:center;
  margin:4px;
  border-radius:4px;
  padding:2px 10px;
  background-color:#0e8113;
  text-decoration:none;
}

nav ul li a:hover {
  background-color:#111;
}

main {
  padding:20px;
}
pre {
    color:white;
    font-size:1.2em;
    padding:1em;
    border:1px inset;
    background-color:#0051ff;
    padding-left:10%;
}
footer {
    background-color:#4CAF50;
    color:white;
    text-align:center;
    padding:5px;
}