}

body {

min-width: 342px;
padding-left:  100px;
padding-right: 100px;

color: #333;
background: #e5e5e5;

}

h1, h2, h3, h4, h5, h6 {

color: #333;

letter-spacing: -1px;

}

code {

font-family: monospace;
font-size: 15px;
line-height: 15px;

}

header {

margin: 20px auto;

text-align: center;

}

header a#title {

color: inherit;

font-size: 40px;
font-weight: bold;

text-decoration: none;

}

wrapper {

margin:  0 auto;
padding: 5px 30px 40px 30px;

color: #606060;
background: white;

border: 2px solid silver;
border-radius: 15px;

}

wrapper a {

text-decoration: none;
color: #393;

}

wrapper a:hover {

color: #528;

}

menu {

padding: 10px 20px;

border-bottom: 1px dashed lightgrey;

text-align: center;

}

menu ul {

list-style-type: none;

}

menu li {

list-style-type: none;

font-weight: bold;
text-transform: uppercase;

}

sidebar {

padding: 20px;

text-align: right;

}

sidebar h1.title {

margin:  0;
padding: 0;

color: #333;

font-size: 24px;
letter-spacing: -1px;

text-align: left;
text-transform: uppercase;

}

sidebar img.logo {

display: block;

width:  256px;
height: 256px;
margin: 10px auto 10px auto;

border: 1px solid lightgrey;
border-radius: 15px;

}

main {

padding: 20px;

}

main p {

margin: 0 0 20px 0;

font-size: 15px;
line-height: 20px;

}

main pre {

overflow: auto;
white-space: pre-wrap;

margin: 0 0 20px 20px;
padding: 20px;

background-color: #f5f5f5;
border: 1px solid lightgrey;

}

main ul, main ol {

margin: 0 0 20px 20px;

font-size: 15px;

}

main ul {

list-style-type: square;

}

metadata {

color: #aaa;

}

footer {

margin: 20px 0;

}

/* On screens 860px wide or wider, display a two column flex layout with the

* sidebar taking 1/5 of the horizontal space, and the main content filling the
* remainder.  There will be a border between the sidebar on the left and the
* main body on the right. */

@media only screen and (min-width: 860px) {

#content {
  display: flex;
}

#sidebar {
  flex: 1;

  border-right: 1px dashed lightgrey;
}

main {
  flex: 4;
}

#menu ul {
  display: flex;
  justify-content: space-between;
}

}

/* On screens less than 860px wide, do not do any flex rendering, which means

* the sidebar and the main body will both be rendered in order, stacked
* vertically.  Draw a border between the sidebar on the top and the main body
* on the bottom.
*/

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

#sidebar {
  border-bottom: 1px dashed lightgrey;
}

}