html {
  position: relative;
  min-height: 100%;
  min-width: 330px;
}
body {
  margin-bottom: 130px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110px;
  background-color: #f5f5f5;
}
.container {
  max-width: 850px;
  margin: 20px auto;
}
.content {
  font-family: monospace;
  font-size: 10pt;
}
#hero {
  opacity: 0.4;
  width: 100%;
}
header {
  border-top: 6px solid #f3f3f3;
  margin: 20px auto;
  position: relative;
  padding: 20px 0;
}
header:after {
  content: " ";
  clear: both;
  display: block;
}
header img {
  float: left;
  margin-right: 20px;
}
.name {
  font-weight: bold;
  font-size: 15pt;
  display: block;
  margin-top: 10px;
}
header .btn {
  position: absolute;
  top: 86px;
}
p {
  max-width: 720px;
  margin-bottom: 20px;
}
footer tt {
  color: #666;
}
footer ul {
  padding: 0;
}
footer li {
  display: inline-block;
  margin-right: 10px;
}
@media(max-width: 565px) {
  .name { font-size: 10pt; margin-top: 5px }
  .moto { font-size: 8pt; }
}
@media(max-width: 500px) {
  footer tt { font-size: 8pt }
  body { margin-bottom: 150px }
  .footer { height: 130px }
}
@media(max-width: 400px) {
  footer tt { font-size: 7pt }
  body { margin-bottom: 170px }
  .footer { height: 150px }
}
dd {
  margin-left: 20px;
}
dt {
  margin-top: 20px;
}