html, body {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* min-width: 100%;
  min-height: 100%; */
}

body {
/*
   margin: auto;
   width: 640px;
   padding: 50px;
*/
   /* min-width: 100vw;
   min-height: 100vh; */
   font-family: 'Arial', sans-serif;
   color: white;
   background-color: black;
   margin: 0;
}

.sidenav {
  flex: .125;
  border: 1px solid white;
  text-align: left;
  padding-top: 15px;
  /* background-color: gray; */
}

.sidenav ul {
  list-style: none;
  margin: 0;
  padding: 5px 5px 5px 5px; 
}

.sidenav li {
  border: 1px solid white;
  /* display: block; */
}

img {
   /*width: 100vw;*/
   width: 800px;
   height: auto;
   max-width: 100%;
}

header {
  border: 1px solid white;
  flex: .1;
  /* background-color: darkslategray; */
}

main {
  display: flex;
  flex: 1;
  border: 1px solid white;
  /* justify-content: center; */
  /* text-align: center; */
}

content {
  /* display: flex; */
  flex: 1;
  /* width: 80%; */
  border: 1px solid white;
  justify-content: center;
  text-align: center;
}

footer {
  border: 1px solid white;
  flex: .1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: darkgray; */
}

/* http://github.com/jmuspratt/hijax-demo */
/* .cf:after {
  content: "";
  zoom: 1;
  font-size: 0;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; } */

.main-header {
  max-width: 800px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto; }

.main-header {
  /* -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease; */
  position: relative; }
  .main-header nav {
    margin: 20px 0 10px 0; }
    .main-header nav ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    .main-header nav li {
      float: left;
      margin-right: 15px; }
    .main-header nav li:last-child {
      margin-right: 0; }
    .main-header nav li a {
      background: #eee;
      font-weight: bold;
      border-radius: 20px;
      display: block;
      padding: 6px 15px;
      /* -webkit-transform-origin: center top;
      -ms-transform-origin: center top;
      -moz-transform-origin: center top;
      -o-transform-origin: center top;
      transform-origin: center top; */
      color: #777;
      /* -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; */}
    .main-header nav li a:hover {
      background: #eaeaea;
      color: #222; }
    .main-header nav li.active a {
      background: #09b3f2;
      color: #fff;
      top: 0;
      padding: 6px 30px; }
  /* .main-header .code-link {
    padding-top: 27px; }
    .main-header .code-link a {
      font-weight: bold;
      color: #ddd; }
    .main-header .code-link a:hover {
      color: #09b3f2; } */