body { 
  max-width: 50em; margin: auto; padding: .5em; font: 1em sans-serif ;
  background: url('/img/html_bg.png');
  position: relative;
  padding-left: 8em;
}

a:hover { opacity: .7 }

.side { max-width: 18em; display: block; float: right; border: 1px solid black; padding: .5em;margin:.5em; margin-left:1em;
  font-size: .9em

 }
p { line-height: 1.5; max-width: 100% }
img { display: block; max-width: 100% }

footer { clear: both }
.side h3 { margin: .1em; font-size: 1em}
.side img { width: 100% }
.side h2 { text-align: center; font-size:1.3em;margin:.3em }
.side p,.side ul { margin: 0 }

footer p { text-align: center }
footer { margin-top: 2em }
.side {
 background: rgba(255,255,255,0.5);
}

.lm {
  position: absolute;
  left:0;
  top: 0; 
  max-width: 6em;
  font-size: .9em;
}

.lm ul {
  margin: 1em 0;
  padding: 0;
}

.lm li {
  margin-bottom: .3em
}

@media only screen and (max-width: 56em) {

.side { float: none; margin: auto }
body { padding-left: .5em }
.lm { position: relative;
  max-width: 100%;
  }
.lm li {
  display: inline;
  padding: .2em .5em;
  
}


}