html {
     font-size: 20px;
     font-family: "Charter","Georgia",'Times New Roman',serif;
}
 body {
     line-height: 1.3;
}
 article, .container {
     max-width: 800px;
     margin: auto;
}
 h1,h2,h3,h4 {
     font-family: arial, sans;
}
 h2 {
     text-align: center;
     margin-bottom: 1em;
}
 h3 {
     font-family: arial, sans;
     margin: 1.3em 0 0.9em;
}
 b {
     font-family: arial, sans;
     font-weight: normal;
     font-size: 0.8em;
}
 pre, p {
     margin: 0.9em 0px 0.9em;
}
 pre, code {
     background-color: #eeeeff;
     line-height: normal;
     overflow: auto;
     font-size: 0.8em;
}
 pre {
     padding: 0.5em 0.5em;
     border-radius: 4px;
}
 nav ul {
     padding-left: 0;
     border-radius: 4px;
     list-style: none;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     font-size: 0.8em;
     background-color: #f0f0f0;
     border: 1px solid #bbbbdd;
}
 nav li:first-child {
     border-left: none;
}
 nav li {
     border-right: 1px solid #bbbbdd;
     border-left: 1px solid #ffffff;
}
 nav a {
     padding: 0.4em 1em;
     display: inline-block;
     text-decoration: none;
     font-family: arial, sans;
}
 nav a:hover {
     background-color: #e0e0e0;
}
 nav a:link {
     color: #44d;
}
 nav a:visited {
     color: #44d;
}
 nav a.here {
     background-color: #e0e0e0;
}
 @media only screen and (max-device-width: 480px) {
     article, .container {
         width: 100%;
    }
     html {
         font-size: 13px;
    }
}