*            { box-sizing: border-box; }
html         { position: relative; min-height: 100%; margin: 20px; font-size: 1.1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; line-height: 1.6; }
body         { margin: 40px auto 120px auto; padding: 1.5rem 0 6rem 0; max-width: 46rem;}
pre, code    { border-radius: 3px; background: #F3F3F3;  padding: 3px 5px; font-family: monospace; }
pre code     { line-height: 140%; display: block; padding: 18px 4px; border: none; font-size: 0.8rem; }
pre          { overflow-x: auto; }
h1           { font-size: 2.25rem }
h2           { font-size: 1.75rem; }
h3           { font-size: 1.5rem; }
h1, h2, h3   { margin: 60px 0 40px 0; border-bottom: 1px solid #ddd; }
small        { font-size: 70%; }
ul li        { list-style: circle; }
hr           { border: none; height: 1px; color: #ddd; background-color: #ddd; margin: 80px 0 40px 0; }
article img  { margin: 0 auto; display: block; }
blockquote   { font-style: italic; }
a            { color: #3498db; }
a:hover      { color: #FF1600; }

header nav a,
header nav a:visited { color: #3498db; text-decoration: none; }

@media (min-width: 320px) and (max-width: 480px) {
      html, body { margin: 20px 2px 120px 2px; padding: 0; font-size: 90%; }
}